Structure vs Semantics in HTML

Many web developers still use HTML as the best way for constructing to add CSS, javascript and some other enhancements to their web documents. However, more and more people start talking about semantic value of HTML.

Sometimes, we take the advice too literary and this may lead to various unnecessary problems with HTML. For example, when the developers had to switch from table-based layouts to div-based layouts, they turned everything into divs forgetting about the semantic purpose of the elements. It caused demonization of the div element. So, we should try to avoid such things and find the balance between structural and semantic elements.

In case you ignore structural elements such as divs and spans, you just forget about the original function of these elements and make HTML poorer language than it could be. Don’t forget that HTML is not only semantics. It also structures your document. The main difference between these types of elements is that semantic elements explain the purpose of an element, while structural elements explain the relation of its content to the content of other elements within a document.

For example, you can create two layouts. The first one made with four divs, preferred by minimalists while the second made with five divs. It is not all about structure, it is also about some sort of relationship. Thus, layout with four separate divs indicates that structurally all of them are on the same level. In case we use five divs where the main content and context area are grouped in a content div, we show that the relation between context and main content is a lot stronger or at least different than the relation to the other element. However, the content area shares a similar relation with header and footer.

In short, layout with five divs provides us with more information concerning the relationship between the separate areas and extra div that is used to group main content and context adds useful meaning to the document.

It is recommended to use divs and spans to bring structure to your document. Just separate elements from others that share a different relationship. You also can use them with a meaningful class or id in case you don’t have a valid semantic element to describe your content.

Of course, such elements as footer, header, article, section and aside also help us to define structures in HTML documents. And the main thing to consider is that these elements also hold semantic meaning to indicate the relationship of the elements. Try to use structural elements to reveal relations between elements to write better structured code and keep the document as semantic as possible.

Reference: www.onderhond.com/blog/work/html-foundation-of-the-web