Typography Test Page With A Very Long H1 Element So That We Can Test Line Height
This is the H1 Heading
Above this paragraph should be the H1 heading for your web page. If it is not visible, the design settings for the H1 tag is set to display:none
which many WordPress Themes use to hide the blog title text and replace it with a graphic. Do not use H1 within your blog post area.
If the design in the H1 heading looks like your blog title or blog post title, then that is the style set for that HTML tag and you should not use it within your blog post area.
Inside of this test data section are most of the basic HTML and XHTML and CSS styles that you might use within your WordPress Theme. You need to know what that will look like as part of structuring your styles.
This is the H2 Heading
Above this paragraph should be the H2 heading for your web page. WordPress Themes use the h2 heading for various purposes. Logically, it should be either the post title or the first heading in the post content.
However, it is used all over WordPress Themes including the subtitle, tag line, post title, comment area, sidebar area, and even in the footer. Be specific when styling each h2 headings to ensure you are not styling all of them.
This Is The H3 Heading
Is this the same heading as is in your post title or is this the section headings found within your sidebar? Or is it different? This is the post content heading for the HTML tag h3, as is the one below, H4, for section headings within your post to divide up topics. If there is an H3 or H4 tag in your sidebar, you will need to identify the parent HTML and CSS container for the sidebar and style those appropriate in your blog's stylesheet.
For more information in searching for your styles in your WordPress blog, see CSS: Studying Your CSS Styles.
Also notice how the links in that paragraph are styled so you can style links within your post content area. Links have three styles. There is the link color, link hover color, and visited link color. Be sure and design for each style.
This Is The H4 Heading
In this section under the H4 heading, we’re going to look at what the post content, the meat and potatoes of your site looks like. In general, you will have multiple paragraphs, so we will add another paragraph so you can adjust the spacing in between them to the look you want.
Paragraphs are not just for typing your blog babble, they can also hold frame and hold other information within your content area to help make the point you want to make in your writing. For instance, you will commonly have three types of lists.
- General Lists using the
<ul>
tag - Ordered Lists using the
<ol>
tag - Definition Lists using the
<dl>
tag- Definition Lists use two other tags to generate the list:
<dt>
sets up the word or phrase to be “defined”, usually set in bold, and<dd>
sets up the definition, which is usually in a normal or slightly smaller font and indented under the definition.
- Definition Lists use two other tags to generate the list:
- And that’s the end of the lists
And we’ve just tested a paragraph before and after a general list along with a nested list to help you see what at least three levels of the list will look like. Make sure that each level of the list is styled to match your specific needs. You might want to use the default disc or circle, or you might want to add graphic bullets to your list, too.
This Is The H5 Heading
While the H5 heading is not always used, maybe you might find a need for it if your H1 and H2 and H3 headings are used. You might need one to two levels of subheadings in your post content, so this one gives you another option.
This Is The H6 Heading
While the H6 heading is hardly used, maybe you might find a need for it in a CTA. You might need one to two levels of subheadings in your post content, so this one gives you another option.
We also need to look at the other two lists and then add some images and other styles to flesh out your WordPress Theme sandbox.
- You need to do this first.
- You need to do this second.
- You could do this in between.
- Or give this a try, too.
- But this is the third and last thing to do.
This should give you an idea of how a nested number list would look on your site. Now, let’s look at a definition list.