It’s normal to encounter “div soup,” as some developers refer to it, when learning how to organize an HTML document. Want to add some material to your homepage? Put on a div! Constructing a sidebar? Divide it! a three-column format? “Div, div, div!”
Functionally speaking, this approach of producing HTML is fine. Your markup can still be rendered by browsers, and users can still see your content. The main problem with using div> tags frequently is that they don’t have any semantic value. Writing semantic HTML makes it simpler to debug code, helps with SEO, and gives your markup meaning for web browsers and screen readers.
As stated by the W3C:
“The div element has absolutely no special significance… The div element should only be used as a last resort by authors, in cases where no other element is appropriate. Better accessibility for readers and simpler maintenance for authors result from using more suitable elements instead of the div element.
The W3C mentions “more appropriate elements,” so what exactly are they? Web developers can leverage the new section and grouping elements that were added to HTML5 when it was launched in 2014 to improve the semantic meaning of their markup.
Let’s look at a handful of the more sensible div tag substitutes……
Main Element
The main element lets browsers and screen readers know which part of your markup on a particular page comprises the page’s primary content section. This can aid with access to keyboard commands, mobile browser zooming, and other things. Only one instance should be made per page.
Section Elements
The section element, which represents a portion of a page or application, is used to organize material by theme. There can be several section elements used on a single page, and each section can have its own header and footer elements.
Aside Element
aside elements is to represent a portion of a page that contains content that is relevant to a specific area. Usually, sidebars are used for asides.
Article Element
For sections of text that may stand alone, the article element can be utilized. The article element may be used in blog entries, newspaper articles, and user comments, among other things.
Blockquote Element
An external source’s content is represented through the blockquote element (a person, document, newspaper, case study, etc.). The cite element is frequently used to identify the source of the quote.
Nav Element
The navigation portion of a document is represented by nav elements, as the name suggests. The principal navigation links for a given page, application, etc. should be included in the nav element.
Footer Element
The “footer” section of a document or section is represented by the footer element. The footer section of many websites will include contact and copyright details, a succinct “about” paragraph, social media logos and links, etc.
How do we choose which of the semantically enhanced div element substitutes to utilize when now that we are aware of them? And if at all, when is it OK to continue using div elements in our markup? This incredibly helpful flowchart from html5doctor.com can assist with the solution.