HTML is hot again. Some time ago the HTML5 promo machine got up to speed, causing a little mini-fuss. In a parallel universe, others are still putting a lot of time and effort into the development of xHTML2. This (public) renewal of interest in HTML caused plenty of discussion, revealing several blank spots in the general knowledge of HTML. This article will hopefully plug one of the most notorious holes shut.
For many front-end developers, HTML remains mostly an excuse. It is viewed as a language of hooks, constructed for adding javascript, css and other enhancements to web documents. In recent events, this kick-started a small semantics debate again, where people were reminded about the semantic value of HTML. A reminder voiced by raging standardista, still fired up from previously fought debates and awareness battles.
HTML != Semantics
Everyone with a passion for front-end development will recognize the importance of the standardista when it comes to HTML awareness. Yet this doesn’t mean that their methods should go totally uncriticized. With all the attention they raised for the semantic function of HTML, some people have started to see HTML as a purely semantic language. Which it is not.
Evidence of this can be seen in the “divitis” issue that followed the early rise of web standards. When front-end developers were urged to switch from table-based layouts to div-based layouts, some took the advice a bit too literally. They turned everything into divs, ignoring the semantic purpose of the elements at hand. This triggered an ever bigger reaction of the standardistas and led to demonization of the div element. Divitis was considered the AIDS of front-end development and using divs became almost taboo. Only when absolutely necessary were they allowed.
Enter Minimal HTML
The fear of purely structural elements (divs and spans) branched off a new movement. A group of people that didn’t believe in the absolute need for structural elements and tried to build pages with purely semantic elements as much as possible. They banished extra divs when used for styling but forgot about the original function of the div and span along the way. In the end, they made HTML a poorer language than it was supposed to be.
Consider the following two basic page layouts. A simple layout consisting of four main areas. The context area gives contextual information on the main content area. A layout like this (not considering any graphical design enhancements) could easily be made with four divs. This is setup A, preferred by minimalists. Setup B shows a situation where the layout is build using five divs. Take a moment to think which setup you prefer, purely on a structural basis.
HTML = Semantics + Structure
HTML is more than just semantics, it’s also about structuring your document. The main difference between both type 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.
In setup A we have four separate divs, structurally all on the same level. This tells us all divs are related in the same way, only the order of appearance will indicate some sort of relationship. In setup B the main content and context area are grouped in a content div. This is an indication that the relation between context and main content is a lot stronger or at least different than the relation to the other element. And on the other hand, the content area shares a similar relation with header and footer.
Structurally, setup B not only holds more information about the relationship between the separate areas, it’s also more correct. This makes it the better implementation of the two. The extra div used to group main content and context is not useless, but adds useful meaning to the document.
The Future of Structuring
Luckily, the people working on HTML5 have understood this and added a couple of extra structural elements to the language. Instead of leaving us with a simple div and span, two elements with a simple structural meaning, they added elements like footer, header, article, section and aside to help us better define structures in HTML documents.
The fun thing about these elements is that they not only hold structural meaning but also semantic meaning. Instead of simply structuring a document they hint at the relationship elements bear to other elements or the page in general. Tags like footer and header not only contain a section of a document, they also hint at the function of the contained elements and the relation to the other elements on the page.
Hopefully this will give the opportunity to those suffering from divitis or minimalitis to write better structured code while keeping the document as semantic as possible. Until then, just know that a div has more power than simply adding a rounded corner or border to the graphical design. Structural elements are there to reveal relations between elements, a sometimes forgotten power of HTML.
HTML is hot again. Some time ago the HTML5 promo machine got up to speed, causing a little mini-fuss. In a parallel universe, others are still putting a lot of time and effort into the development of xHTML2. This (public) renewal of interest in HTML caused plenty of discussion, revealing several blank spots in the general knowledge of HTML. This article will hopefully plug one of the most notorious holes shut.
For many front-end developers, HTML remains mostly an excuse. It is viewed as a language of hooks, constructed for adding javascript, css and other enhancements to web documents. In recent events, this kick-started a small semantics debate again, where people were reminded about the semantic value of HTML. A reminder voiced by raging standardista, still fired up from previously fought debates and awareness battles.
HTML != SemanticsEveryone with a passion for front-end development will recognize the importance of the standardista when it comes to HTML awareness. Yet this doesn’t mean that their methods should go totally uncriticized. With all the attention they raised for the semantic function of HTML, some people have started to see HTML as a purely semantic language. Which it is not.
Evidence of this can be seen in the “divitis” issue that followed the early rise of web standards. When front-end developers were urged to switch from table-based layouts to div-based layouts, some took the advice a bit too literally. They turned everything into divs, ignoring the semantic purpose of the elements at hand. This triggered an ever bigger reaction of the standardistas and led to demonization of the div element. Divitis was considered the AIDS of front-end development and using divs became almost taboo. Only when absolutely necessary were they allowed.
Enter Minimal HTMLThe fear of purely structural elements (divs and spans) branched off a new movement. A group of people that didn’t believe in the absolute need for structural elements and tried to build pages with purely semantic elements as much as possible. They banished extra divs when used for styling but forgot about the original function of the div and span along the way. In the end, they made HTML a poorer language than it was supposed to be.
Consider the following two basic page layouts. A simple layout consisting of four main areas. The context area gives contextual information on the main content area. A layout like this (not considering any graphical design enhancements) could easily be made with four divs. This is setup A, preferred by minimalists. Setup B shows a situation where the layout is build using five divs. Take a moment to think which setup you prefer, purely on a structural basis.
HTML = Semantics + StructureHTML is more than just semantics, it’s also about structuring your document. The main difference between both type 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.
In setup A we have four separate divs, structurally all on the same level. This tells us all divs are related in the same way, only the order of appearance will indicate some sort of relationship. In setup B the main content and context area are grouped in a content div. This is an indication that the relation between context and main content is a lot stronger or at least different than the relation to the other element. And on the other hand, the content area shares a similar relation with header and footer.
Structurally, setup B not only holds more information about the relationship between the separate areas, it’s also more correct. This makes it the better implementation of the two. The extra div used to group main content and context is not useless, but adds useful meaning to the document.
The Future of StructuringLuckily, the people working on HTML5 have understood this and added a couple of extra structural elements to the language. Instead of leaving us with a simple div and span, two elements with a simple structural meaning, they added elements like footer, header, article, section and aside to help us better define
structures in HTML documents.
The fun thing about these elements is that they not only hold structural meaning but also semantic meaning. Instead of simply structuring a document they hint at the relationship elements bear to other elements or the page in general. Tags like footer and header not only contain a section of a document, they also hint at the function of the contained elements and the relation to the other elements on the page.
Hopefully this will give the opportunity to those suffering from divitis or minimalitis to write better structured code while keeping the document as semantic as possible. Until then, just know that a div has more power than simply adding a rounded corner or border to the graphical design. Structural elements are there to reveal relations between elements, a sometimes forgotten power of HTML.
Share on Facebook
