This is the Main Heading for this Page

The heading above uses the <h1> tag to format text in a way that allows text readers and mobile devices to recognize it as a heading. This is a paragraph (the default, like the “normal” setting in Microsoft Word).

This Looks Like a Heading but is Not

If you were to look at the “Text” tab, you would see that by specifying a font size, rather than a content type, the code looks like this: <span style=”font-size: 18pt;”>This Looks Like a Heading but is Not</span>. This is not meaningful to a text reader and might render in undesirable ways on a mobile device. Any time you look at code and see <span> or <div> codes, your markup is not as clean as it could be.

Messy Markup and How to Avoid it (this is a level 2 heading)

Here are some tips (presented in an unordered list):

  • Use the menus in WordPress for all of your formatting. Note that the word “all” is italicized for emphasis.
  • If you do not see an option in the menu, then it is probably best not to use it (underlining is a good example).
  • Do not copy and paste from Microsoft Word. Save as text only, then paste and format using WordPress menus; or, select the “paste as plain text” option in the WordPress editor. Note that the words “do not” are in bold type to make the point stronger.

Here is an example of some text that is pasted from a Microsoft Word document. If you view the HTML version of this it looks like this:

Screen capture of code pasted directly from Microsoft Word. It shows multiple span tags and unnecessary code elements

Here is the same text that is pasted as plain text. If you view the HTML version of this it looks like this:

Screen capture showing text pasted as plain text. There are no extraneous elements.
Screen capture showing text pasted as plain text

This is less confusing to browsers and to adaptive technologies. It is also less likely to cause problems with the display.

Other Considerations

Note that both images above include captions and alternate text describing their contents. This is another accessibility best practice. For more information about accessible web design, see these ten tips from the University of California, Berkeley. Note that the text of this link to external content uses descriptive text.

Questions? Contact Sarah Terry.