Learn WordPress – Add headings with the visual header

Semantic HTML

Many people focus on how their pages look rather than thinking about the underlying HTML structure. I regularly hear people ask “If it looks right why should I worry about how it’s generated?” and to a certain extent I can understand this viewpoint. Image is everything and using a page design to appeal to your customers is important and to the uninitiated the HTML is just the magic that happens behind the scenes. However, semantic HTML, the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages and web applications rather than merely to define its presentation or look, has value for several key reasons:

  1. Accessibility – Google state in their guidelines that you should “Make your site easily accessible”. Some visually impaired users will use a a screen reader program which reads out the structure of the page so those heading and paragraph tags give the user important clues as to the page’s structure.
  2. Google uses the standard semantic HTML tags (title,h1, h2 etc) as a core ranking metric. Not really a surprise given that it is in Google’s best interests to ensure it’s customers get the best possible browsing experience and well laid out and properly structured pages assist with this.
  3. Semantic HTML assists Google’s crawlers in finding and cataloguing content and any help you can give in this area has to be a bonus for your SEO efforts.

A lot of the semantic HTML that defines the content areas on a page is already taken care of in your theme’s page templates. This includes the header, footer, articles, nav, main and asides (Sidebars etc). An example of this is the page title which your theme probably places inside h1 tags at the top of each page. Inside the key content areas on the page you should strive to create a clear hierarchy of information with subsequent sub sections defined using lower order heading tags such as h2, h3 and so on.

An important point to note is that just because something looks like a heading doesn’t mean that the HTML mark up is correct. This means that you can’t just increase the font size, change the colour or make text bold, you have to apply the correct heading formatting. Thankfully the WordPress visual editor makes this as easy as selecting text and choosing an option from a drop down list.

Adding header tags

Here’s how it’s done:

  1. First take a few minutes to think about how you intend to organise your content on the page. Think about the main sections and any sub sections you will use.
  2. Make sure you have selected the Visual tab in the editor.
    Wordpress Visual Editor
  3. I find it easier to type all my content into the visual editor and add the formatting afterwards. This is particularly useful if you intend to copy and paste from another source. Make sure that you copy the source from a plain text editor. If you use Word or similar application any pre-existing formatting will get copied across with the text and may produce undesirable results. If you must copy the source text from Word copy it into the WordPress text editor (See Under the hood below) first and then switch to the Visual editor to add your formatting.
  4. For each heading make sure that there is a new paragraph following it so that the formatting is only applied to the heading itself and not the whole block of content. The quickest way to do this is to this is to place the cursor immediately after the last character in the heading and then press the Delete key until the next line appears to the right of the cursor on the same line. Now press the Enter key to add a new paragraph.
    Wordpress Visual Editor
  5. Click and drag to highlight the heading text
    Wordpress Visual Editor
  6. Click the formatting drop down box on the tool bar and select the appropriate heading. Your heading text will now be properly formatted.
    Wordpress Visual Editor
  7. Repeat for other headings as required.

Under the hood

Want to get your hands dirty. You can view your semantic HTML and add/edit tags using the WordPress text editor.

  1. Click the Text tab to display the text editor
  2. Note that for some reason WordPress strips the paragraph <p> tags out of html code and you will need to ask your developer to make the necessary change to the theme’s functions.php file to re-enable them. Even thought they aren’t visible in the text editor – following step 3 above ensures they are displayed properly.
  3. A heading tag will look like this: <h2>This is my heading</h2>
  4. A paragraph tag will look like this:<p>This is a paragraph</p>
  5. You can type your own HTML using this syntax – note the difference between the opening and closing tags