Improve your HTML mark-up

Well formatted HTML is definitely among the best supported digital media in the world and the best way to publish content that millions of people can embed, link to, share and access on all kinds of devices. But marking up your content takes a bit of consideration. Here is 10 tips that will improve accessibility, SEO and presentation of your content.

1. Create hierarchy and rhythm

   Think about how your content is related and create a suitable structure for it. When you create a page the content should be grouped in a logic pattern. You should consider how much weight you want to assign to each element. Say you have two or more separate articles that you want to display on a page. Since the page contains more than one article the articles should be grouped under a top level page heading (usually a h1 element). Ask yourself how the articles are related. The answer to that question will probably be a good name for the page heading. Maybe you have chosen to group the articles because they are written by the same author. In that case a good page heading would be:

   <h1>Articles by John Doe</h1>

   You have now successfully grouped the content but you have at the same time created a constraint or formatting rule for your document. All the headings in John Does articles should now be formatted in in elements with lower weight than <h1>. However: in HTML5 you can use <h1> elements as a sub heading if it is nested within its own <section>. In that case the <h1> wil be equal to a <h2>. element.

2. Use the overlooked <main> element

   The main element is a block element like divs and sections but the element is much more descriptive. Usually you would have a header, a footer a sidebar and maybe a few adds on a page. You don't really want search engines to treat these elements with the same weight as the main articles. In the example above it would be a good idea to wrap the page heading and all the listed articles in a main tag. That way you have marked this area of the page as the "main content area". The <main> element is however not implemented in Internet Explorer and is rendered as an inline element so you must make sure to add this CSS rule:

   /*CSS*/ main { display:block; }

3. Separate UI elements from the content

   You can improve the user experience by adding small icons/images to your elements but be careful not to mix the icons with the content. Say you want a small arrow in front of all you h2 elements. Marking up the h2 tags like this would neither be semantic nor effective:

   <h2><img src="arrow.png" alt="arrow" />My heading</h2>

   First of all screenreaders and search engines would tread the image as content, secondly you would have to manually insert the image in all your h2 elements. Instead create a CSS rule for the h2 elements where you offset the text a bit and use the background property for the image:

   /*CSS*/ h2{ text-indent: 20px; background-image: url(arrow.png); background-repeat: no-repeat; background-position:left; }

   Alternatively, you can use :before or :after CSS pseudo elements.

   /*CSS*/ h2:before{ content:url(arrow.png); }

   Pseudo elements will also allow you to use text, or text-symboles, seperately from your HTML content

   /*CSS*/ h2:before{ content=" → "; }

4. Understand the semantic difference of elements

   Inline elements like <em> and <i> look identical, (they will both be rendered in italic style) but the elements does not mean the same. The content inside an <em> tag will be interpreted as emphasized content by browsers while content inside a <i> tag only will render as emphasized. The same goes for <strong> and <b> elements: Content inside <strong> tags will be interpreted with stronger weight where content in <b> tags will just render in bold. Generally you should never use tags for design reasons. If you want your <h1> elements to be smaller do not change them to <h2> elements. Simply change the font-size and line-height with CSS instead.

5. Don't type words in upper-case

   If you type words in upper-case, screen readers will interpret words typed in upper-case as single letters, so "SVG" or "HTML" should be in upper-case but a plain word like "hello" would be pronounced "H.E.L.L.O." if typed in upper-case. If you want words to render as upper-case use CSS to format them.

   <!--HTML--> <span class="upper">My text in caps</span> /*CSS*/ .upper{ text-transform: uppercase; }

6. Structure your content with microdata

   You can help search engines understand what type of content you are listing on your pages. Microdata are inline descriptive meta data inserted as attributes to your HTML elements. At http://schema.org/ you can find common vocabularies for products, publications, events, contact information and more. You can also find plenty of examples at schema.org.

7. Use the W3C validation service

   It should not be necessary to mention this but you'd be surprised to see how many websites that gets published with serious errors. Some errors can be ignored but others can hurt SEO, break the layout or produce JavaScript errors. Here are some errors you should never ignore:

   • No doctype declaration:
     You should always tell browsers what HTML version you are using. Some browsers might render your page in quirks mode if the doctype cannot be determined.
   • Mismatch between doctype and mark-up:
     If you have declared HTML5 as your doctype you should only use HTML5 mark-up. Do not mix HTML standards.
   • Stray and unclosed tags:
     This is probably one of the most common errors. If you have stray or unclosed tags you are forcing the browser to guess what you've intended.
   • Block elements nested in inline elements:
     Do not nest a <div> within a <b> element. If you absolutely need to have a block within an inline element use a <span> tag and set the display property to "block" with CSS. In HTML5, block elements are allowed within <a> tags though.
   • Duplicate IDs:
     Elements with the samme ID attribute are not allowed and can cause major problems.

8. Do not use JavaScript to generate important content

   You can not expect that search engines will execute JavaScript on your pages and even if they do they would often have difficulties indexing it. If you use AJAX to load content into your page you should always provide a fall-back link with a standard http request for search engines (and users with JavaScript disabled).

9. Use meta tags, but use them with care

   Meta tags in your documents head section can be helpful for search engines, browsers and screen readers. You should always use a meta tag for character encoding and usually a description tag is also a good idea.

   <head> <meta charset="UTF-8"> <meta name="description" content="A collection of articles, about pets, by John Doe"> <title>My Articles</title> </head>

   Optionally you can add meta tags for author and keywords but be careful not to provide too many keywords and make sure all keywords are covered in the page content. Search engines will consider too many keywords as spamdexing. And many search engines completely ignore the listed keywords.

10. Make your formatting consistent

    Internet users are impatient. When they first visit your page they will have to spend some time to get familiar with the formatting. Subconsciously they will be looking for design patterns to distinguish UI elements from content and to figure out what "design conventions" you are using for links, drop-down elements, forms etc. Once they are familiar with the pattern of the current page they will expect everything to work the same way on the rest of your pages.