1.5 Template Project

The Joomla! Documentation Working Group is running a project to develop detailed reference and tutorial material on Joomla! 1.5 templates.  There is a project page on the documentation wiki where you can see the work in progress and help us by contributing your knowledge.

Who's Online

We have 6 guests online

Help Site License

The Joomla! Help Site content is copyright © 2005 - 2008 by the individual contributors and can be used in accordance with the Creative Commons License, Attribution NonCommercial ShareAlike 2.5. Some parts of this website may be subject to other licenses.
Home arrow Developer Manual arrow 9. Usability and Standards arrow Semantic Ideas

Semantic Ideas PDF Print E-mail

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 )
< Prev