HTML5: content structuring

HTML-5-Logo-150x150In this post we want to go into the special tags that HTML5 offers for the structuring of the contents of a website.

The section element

General content areas of a document are represented by the section elements. According to the specification, there is a thematic grouping of content, typically opening with a heading. So they should be used when there are different topics on one site that can be summarized. So if you are considering whether you should distribute the content better in two different documents or leave it in one, the use of the section element is appropriate if you opt for the presentation in a single document.

Code Example

section was therefore intended for a rough thematic sub-division of a page into sections. This is precisely the meaning of the word “section”.

The article element

article elements represent self-contained sections of a document, similar to a newspaper article. It therefore makes sense to accommodate more structuring elements such as header or footer within article elements. A prominent example of such applications are weblogs. The article itself would be applied as an article element, the comments could also be structured in article elements. Therefore, the element got its name, it just indicates a journalistic matter, an article.

Code Example

Article as a child element of section

The comments, however, could be housed together in a section element, because they differ thematically from the article, they do not necessarily reflect the opinion of the author, and inded, can be completely opposite.

Code Example

As the examples show, it is not necessary to write article elements within section, because on every page, there could be different themes, mainly because web authors may be tempted to have their own custom pages for various thematic areas.

Also, the structure suggested here for a weblog can be seen only as one of several semantically correct proposals. Similarly, it would be possible to interpret the comments as an ordered and possibly nested list. For a page that contains a blog post, the following structure is suitable:

Code Example

div is better!

The section element could be replaced – without the page becoming unsemantic – by a div element, because the divs were invented just for this purpose: to group related content, that will receive no additional meaning solely by the grouping. Arguing that both blog posts and comments deal with the same subject, a div element would even be preferred to a section element, because section elements are not generic containers and therefore exclusively should be used to exclusively describe the structure of a page.

section as a child element of article

Someone who has an extensive article in mind, may now be rightly entitled to remark that in articles also there are typically thematic groupings of content with a header. In such cases, section elements are also the right choice:

Code Example

The aside element

In some textbooks the page layout is framed by differently wide margins. The wider of the two edges includes about one-fifth of the total width and thus makes a marginal column. “Marginal” also means “incidental”: what is more suitable to accommodate additional information, which although not irrelevant, has to do only marginally with the actual topic, but a side column? This can be tips, hints, alternative speech or writing or illustrative sketches. It was only logical that this design element found its way from the print medium to the Internet, especially when you consider that most people will look at websites in a horizontal format, even if their share is decreasing due to growing monitors.

Many websites nowadays have a multi-column layout, corresponding to the width of the output medium provided. A marginal column is represented by the aside element. The specification states that by analogy, the aside element encloses sections of a page, its content stands only in an indirect connection with the surrounding content. Thus, it is of course clear that aside elements do not necessarily have to stand in a side column, also name and origin of the name suggest this.

Although or because the content of an aside element is not directly related to the main content, the aside content should remain self-contained and understandable apart from the main content of the page.

Code Example

With the presented elements, the contents of a website can be structure semantically, but what are the benefits in doing so? As a visitor to a website, you will of course see nothing of the underlying code; today’s browsers display unsemantic HTML just as neatly; even erroneous source code is corrected. The semantics is therefore ostensibly catered to the search engines and this is exactly where you benefit as a user of semantically correctly implemented websites, because the search engines can recommend sites that match your search terms better. Semantics thus has an impact on the quality of results from search engines, and hopefully will help lower the frustration level of the visitors.

Speak Your Mind