HTML5 Semantics: New Elements to Replace Div

Perfect semantics was and will always be the Golden Fleece for web developers. HTML5 has come a long way to become a "messiah" that gives hope for a better future to HTML technology. This language has indisputably evolved unveiling 30 new elements that brought semantics to higher level.

New tags were developed to help us create more semantic structure. As you may know, the previous version of this Hyper Text Markup Language - HTML4 has the universal tag div which was widely used to complete various tasks in the HTML structure. This HTML veteran has one important drawback – unskilled users get lost in a code difficulty as it often looks like a wild div mosaic.

With the release of new HTML5 tags, such as article, section, header, footer, nav and figure, many web developers decided that these elements are meant to fully replace our old buddy div. This point of view is not quite right, and it's too early to retire the div tag. This tag remain to be a fully functional element of the fifth generation of HTML. According to W3C, the div tag defines a division or a section in an HTML document and it can be used to group block-elements and format them with CSS.

Almost 20 new HTML5 elements were created to be used in Document outline, which is the structure of a document including headings, form titles, table titles and other. Today we want to make things clear and tell you about the most popular HTML5 tags that can be used in the Document outline alternatively to the div element. Once again we want to pay your attention that these elements cannot be called div-killers, they only partially replace the usage of div in the markup code, as you can still use the div element while coding new page. Here's a short guide to help you use HTML5 new semantic elements.

Article and Section

Tag article is an independent fragment of the content. Blog post, news article or other types of text content clearly illustrate the right area to use tag article. Basically, you can use this element to markup the page component which is meant to be widely used and distributed.

Tag section is the most misleading element that is widely deployed by web developers as an alternative to div. You should know that this tag is tightly connected with article and is used for grouping content that differs from other content groupings on the page. The example of a chapter in a book is the perfect one to illustrate the main function of a section. In other words, this element is used for making several thematically different areas on a single page or for making logical chapters in the articles.

Header and Footer

The element header was created for a more semantic presentation of navigation tools and other important data placed in the header of the web page. You can use this element as many times as you want by adding some additional tags like nav to add some navigation menu elements, headings, tables of contents and other things. Tag footer is similar to header and it is used to create the footer for the content structure placed above. You can also use this element multiple times on one page for various blocks. This tag can be used not only for marking up classical "footer" of the web page with all required information about Copyright, Terms of Use and the like, but also for marking up some information about the author of the article, for example.

Nav

This element is used to create navigation menus with links that allow you to navigate through the page and website. Although, not all the links on the web page must be wrapped with the nav element. You can have, for example, a block with Sponsored links or links with the search results. Don't forget that nav element can be also used for multiple times. Often this tag helps mark up unordered list of links and ordered ones with our old buddies ul and li.

Figure and Figcaption

According to W3C reference, the current element is used to present a block of content with a caption, which is typically referenced as a single unit from the main flow of the document. In other words, you can use it to mark up various media types of content like illustrations, photos, code examples and diagrams.

Aside

Aside element is used for secondary content when not nested within an article element. The most appropriate example of using aside element is the typography insert. We can use this element for nav elements, typographic inserts, advertising banners and simply for content that must be placed separately from the primary content.

* * *

There's no doubt that all those new elements featured above will make you think twice before using the div tag. Well yes, they are all super-cool and add way more semantic value to your code than div does. But don't forget that officially the div element remains in the HTML5 team and you can always use it if you can't find any other tag. We believe it's a wise decision not to forget about this tag due to its versatility and long-term flexibility. So, code wisely, enjoy superb HTML5 semantic code and don't forget to smile more often.