Semantically correct HTML

1
Semantically correct HTML

• Miruna Badescu
• Finsiel Romania

2
Overview

• 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, no automatic validation for this
• Respecting Web standards (XHTML, WAI, XML, etc.)
  does not insure semantically correct pages

3
Content and presentation

• CSS should have complete control over the
  appearance
• You should learn to choose (X)HTML tags because
  they fit in the structure and give it a certain
  meaning
• change the presentation with styles if needed
• Target when you strip the presentation HTML
  tags, the content must have the same meaning you
  intended to give it

4
Ad-hoc rules

• Use proper HTML tags for certain types of
  information
• Put meaningful metadata to describe the page and
  the content
• Use words and phrases from glossaries and
  thesauri for sensitive words in your area of
  interest
• Think of interoperability
• Properly mark definitions, addresses, acronyms
• Where possible, use context-aware URLs
• E.g. http//site.org/search.html?querywater
  should work for http//site.org/search.html?query
  air
• Group your content correctly and provide links to
  existing information instead of adding it again
  in a similar form
• Provide explanatory texts for elements harder to
  be spotted by machines
• Do not share or expose parts of the website that
  do not serve the sites purpose

5
Markup guidelines (1)

• 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

6
Markup guidelines (2)

• Break up lines of text into paragraphs (with the
  p element)
• Dont use br instead
• Dont make empty paragraphs (ltpgtlt/pgt) for
  separation
• Dont 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

7
Markup guidelines (3)

• 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

8
Markup guidelines (4)

• And finally,
• Never use the font, b or i tags again, they were
  used for presentation reasons and are now
  deprecated

9
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