Semantic Ideas

The following article describes the best approach to properly structure your side through semantic markup.

Written by Lawrence Meckan - Absalom Media. Re-used with permission from: http://www.absalom.biz/Services/News/Mambo/Semantic_Ideas.html.

Creating a readable document on the web requires skill and precision. Creating a document that matches the intent of the publisher should mean that when a search engine browses the website and finds the relevant article, that article is able to be searched and archived correctly. This is why semantically correct and well-formed code matter.

Merely having article titles as <h1> and <h2> tags for content does not allow a definitive site structure as they do not reflect a semantic, 'webified' document, especially when the document is linearized. This may also influence accessibility considerations as a definitive site structure may not be built if all content and article titles remain major headings inside the web structure.

Here is the methodology I recommend:

  • <h1> should be used for the site name.
  • <h2> for branding / alias / related titling
  • <h3> is the Joomla standard for module headings, and since 'content' is by design, a component, modules and components of any nature should have the same heading format.
  • <h4> to <h7> should be used inside components, modules and content as sub-headings on various levels.

Furthermore, the methodology I am using for Orange (currently) is that the heading will not need to be styled independently. People should not need to rewrite the methodology to get a semantic header structure.

Through this, the style sheet defines a global h3 tag. Joomla default CSS calls of .contentheading and .componentheading can then be used by a designer to style the content and components independently (if they wish) to the global tag due to CSS being a cascading architecture.

This minimises markup and allows the CMS to deliver greater flexibility in a simpler format. It also makes allowance for pre-existing templates that already define .contentheading and .componentheading independent of a <h1> or <h2>. It means that those templates, irrespective of when they were released in comparison to the semantic extensions to Joomla, receive the benefit of semantic structure without having to needlessly redeclare styles.

Furthermore, by having <h3> as the standard Joomla class for all headings, irrespective of component, content or module, that leaves the <h1> and <h2> calls to be styled independently by a designer to end up with the effects seen in websites like the CSS Zen Garden.

Last Updated ( Wednesday, 14 September 2005 )