When developing a new website, it is handy for the designer to have this WordPress styles test page in order to see how all the default styles look in your theme. This page is a quick copy/paste to a test page on your site, to see how everything looks and to make sure all the CSS styles are accounted for. For example, here are the bold, italic, and crossed out styles.
It is also beneficial for SEO (Search Engine Optimization) purposes to utilize these style on your pages and posts.
h1 heading
You typically use the h1 heading only once as the page title, at the top of the page.
h2 heading
H2 headings are useful for you to use for main subheadings, one or more times throughout the page.
h3 heading
For your on-page SEO, it is recommended that you use these heading tags in their proper hierarchical order. A page that is organized well with proper headings is more search engine friendly than a page that does not utilize headings.
h4 heading
H4 headings are not as common, but could still be useful depending on your article length and how many headings and subheadings make sense.
h5 heading
WordPress includes h5 and h6 in the default styles, although it is not as common to use them.
h6 heading
Although the smaller headings are not as common, it is still good practice to have them look good and sized properly, in case you should ever need to use them.
![Low Platelet Diet](https://integrativewellness.org/wp-content/uploads/2023/09/MSH_GoDaddyIntegrativeWellnessMemphis5-5-22-11-min-300x200.jpg)
Caption with image aligned left
Text with an image aligned left:
It is quite common for a website designer to use Latin text like this just to fill up the space and to show the client what the page will look like with content: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
![Low Platelet Diet](https://integrativewellness.org/wp-content/uploads/2023/09/MSH_GoDaddyIntegrativeWellnessMemphis5-5-22-11-min-300x200.jpg)
Caption with image aligned right
Text with an image aligned right:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Text with an image centred:
![Low Platelet Diet](https://integrativewellness.org/wp-content/uploads/2023/09/MSH_GoDaddyIntegrativeWellnessMemphis5-5-22-11-min-1024x681.jpg)
Caption with image centred
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Unordered list:
- Unordered list item #1
- Unordered list item #2
- Unordered list item #3
- Unordered list item #4
- Unordered list item #5
Ordered list:
- Ordered list item #1
- Ordered list item #2
- Ordered list item #3
- Ordered list item #4
- Ordered list item #5
Blockquote or Excerpt:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo.
Left-aligned paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Right-aligned paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Centred paragraph:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Horizontal Line:
Increase Indent:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit sit amet leo placerat molestie. Mauris sed justo efficitur, blandit mi non, vestibulum ligula. Sed feugiat purus in lorem gravida, quis dignissim est posuere. Aliquam ac orci in orci malesuada commodo. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ut tempor ipsum, eget interdum purus. Vivamus rhoncus odio nec sem convallis, ut condimentum purus interdum.
Table:
Nowadays I would rather install a table plugin that creates mobile friendly tables, but here is an old fashioned HTML table to use as an example.
Column 1 | Column 2 | Column 3 |
---|---|---|
Row 1 Column 1 | Row 1 Column 2 | Row 1 Column 3 |
Row 2 Column 1 | Row 2 Column 2 | Row 2 Column 3 |
Row 3 Column 1 | Row 3 Column 2 | Row 3 Column 3 |
Row 4 Column 1 | Row 4 Column 2 | Row 4 Column 3 |