Typography test page with a very long H1 element so that we can test line height – rollover state
This page demonstrates the various typographic styles that are available within WordPress editor fields. As you can probably see, this is a basic paragraph of text. Within it you can include hyperlinks to other pages. When doing so, the link text should always be descriptive of the page that you are linking to. For example, visit the‚ Google homepage is a much better way of linking than this; to visit the Google homepage, click here. When creating hyperlinks it’s best practice to open links to external websites (offsite links) in a new window/tab thus allowing the user to still have this website open in their browser when they have finished with the external website.
This next paragraph includes‚ emboldened text‚ and also some text‚ set in italics. You can also set‚ text to be both emboldened and italicised‚ if you wish. We can also use this paragraph to test underlined text. Obviously, you’d not want to use underlined text as it makes text looks like a hyperlink. Finally, we can also set some text with strikethrough to check that that style works too. Before we take a look at heading styles, let’s just check that the Blockquote style is working:
The HTML <blockquote> tag‚ is a semantic element used to define a quote from another source. Unfortunately WordPress currently offers no way to add the tags ‘cite’ attribute except by manually adding it with the editor in ‘Text’ mode. Anyway, let’s take a look at HTML Headings.
Some more text here. Don’t use bolds in the blockquote as that is how we designate the attribute name below!
– Graham Morgan, Director, Infinite Design
Heading 2, again we have inserted an incredibly long sub-header so that we can test the line height of this style – rollover state
Headings are used to separate blocks of text by level of importance. By default a page title in WordPress is always set in Heading 1 because it is the most important heading on the page. A page’s H1 is an important factor for ‘on page’ SEO. You can see that this paragraph is prefaced with a Heading 2 – the second level of heading importance.
this is a another blockquote.
This is a heading 3 – rollover state
This section of text is prefaced with a Heading 3. We’ll stick in some Latin text just to bulk the paragraph out a bit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sapien metus, faucibus eget massa vel, dictum suscipit mauris. Proin tempor metus est, vel aliquet risus pharetra sed. Curabitur nec semper nisi, vitae egestas turpis. Nunc sit amet magna dignissim tortor suscipit dignissim.
Now let’s add a horizontal line below this paragraph to check that they are working.
Here we have a heading 4 – rollover state
This block of text is prefaced with H4. That means that this paragraph should only contain text that is supportive of the main content as opposed to being of high significance to it. While we’re here, we’ll take a quick look at another text style; Preformatted text:
Preformatted text, set in the HTML <pre> tag is designated as having 'unusual' formatting although in practice, most people use it to display computer code.
Ok, we’re making good progress but we still have a few more default WordPress styles to look at.
This is a heading 5 – rollover state
We’re really getting to the least important heading styles now. Unlike H1, H2 and H3 headings, H4, H5 and H6 are unlikely to be considered by search engines when evaluating a page of content. Therefore, they should only be considered for presentation styles as opposed to SEO significance. However, while we’re here, let’s look at an unordered list, often known as a bullet list.
- Unordered lists are written in HTML using the <ul>tag with ul standing for Unordered List*
- It is unordered as each list item has a graphical ‘bullet’ as opposed to a number
- Unordered lists can be used used for lots of things and should always be used if any form or ordering in not required
- Like any other typographical element, unordered lists can display superscript and subscript elements. Superscript elements are often used to show footnotes‚ like this[1] while subscript elements are often used in element names like this: H20
Obviously there will be times when you need an ordered list, also known as a numbered list. For those situations you need the HTML <ol> tag with ol standing for Ordered List:
- As you can see, ordered lists include numbers
- These numbers will automatically adjust themselves as you add, edit and remove list items to keep the list in numeric order
- Despite the existence of this wonderful tag, people still seem to like to add 1.) 2.) and 3.) to the start of paragraphs rather than use an ordered list.
With that all sorted, we’ll take a quick look at H6 and the last few styles.
This text is set in Heading 6. It could be useful for small print – rollover state
As you can see, we usually use heading 6 for small print. It’s of such minor importance that it is unlikely to be used by search engines as part of the ‘on page’ SEO quality of a page. Therefore, why not use it as a presentational style?
Now‚ let’s just run over some quick notes on adding typographical content to the website. It makes sense to do this in the form of an unordered list as well:
- If you need to insert a symbol into your text, use the ‘Special characters’ icon. It looks like an omega sign. From there you’ll have access to all manner of symbols such as ™ and ©. You’ll also find accented characters such as Ä and ã as well as fractions like ¼ and ¾
- When pasting text from another source, be sure to click the ‘Paste as text’ icon before you paste it in to the WordPress editor. This will ensure any formatting is removed. Failure to do this can lead to superfluous HTML being inserted into your pages
- To remove formatting from selections of text, use the ‘Clear formatting’ icon
- Err away from using the left align, right align and centre align options. This website has been programmed to align text correctly based on its context so you should never need to align text. If you are ever tempted to use the ‘Justify’ option you probably shouldn’t be allowed to use a computer ever again!