Semantically correct HTML
You should create semantically correct HTML thinking on how applications interpret it more than how users view it. Machines cannot tell you that they misunderstood since they are not aware of it, so there's no automatic validation for semantic markup. Respecting Web standards (XHTML, WAI, XML, etc.) does not ensure semantically correct pages.
Markup guidelines
Good semantic HTML structure is based on logic, order, and using semantically correct markup. Those elements provide meaning to the content, making them semantically correct, in addition to being solid HTML structure.
- Use section headings (h1 - h6) to create structured documents and break up long stretches of text
- Put exactly one h1 tag in every page
- Use optgroup to organize long lists of menu options into smaller groups
- Use tables for tabular data and describe the table with caption
- Group table rows and columns with thead, tbody, tfoot, and colgroup
- Break up lines of text into paragraphs (with the p element)
- Don’t use two <br/> elements to create an empty line. You're not typing on a typewriter.
- Don’t make empty paragraphs (<p></p>) for separation
- Don’t use <br/> to separate ideas of the same type, use lists instead
- When making a citation to other sources, use the cite tag and not just “”
- Use blockquote for a quotation and explain it properly:
- Provide title and cite attributes
- The em and strong tags indicate “emphasis” and “stronger emphasis”, use styles for anything else
- Nest lists with ul, ol, and dl
- Use definition lists – dl – for terms and their corresponding description
- Group related links
- Use the code or pre tags to insert pieces of code in pages
- Use fieldset to group form controls into semantic units and describe the group with the legend element
- Never use the font, b or i tags again, they were used for presentation reasons and are now deprecated
Why?
- Longevity of the HTML code
- Search engines rank keyword weight based on semantic structure
- Your markup will make sense to anyone else, whether today or later
The benefit for EEA is that content that is tagged semantically is much easier to style consistently, and it is easier to change the style globally. Semantically correct XHTML is easier to repurpose. We can convert it to PDF and lists will remain lists. We can embed it in other XML formats and not have surprises.
