When HTML5 was released in 2014, it introduced some new section and grouping elements that web developers could use to enhance the semantic meaning of their markup.
Let’s explore a few of the more semantic alternatives to the <div> tag.
The Main ElementThe main element indicates to browsers and screen readers which portion of your markup contains the main section of content on a given page.
This can help with keyboard command access, zooming on mobile browsers, and more.
It should be used only once per page.
The Section ElementThe section element is used to group content by theme and represents a section of a document or application.
Sections can have their own header and footer elements, and there can be multiple section elements used on a single page.
The Aside Elementaside elements are mainly used to represent part of a page containing related content to a given section.
Asides are typically used as sidebars.
The Article ElementThe article element can be used for portions of content that could stand on their own.
Blog posts, newspaper articles, and user comments are some possible use cases the the article element.
The Blockquote ElementThe blockquote element represents content that is being quoted from an external source (a person, document, newspaper, case study, etc.
).
It is often accompanied by the cite element to attribute the quote to its source.
The Nav ElementAs the name implies, nav elements represent the navigation section of a document.
The nav element should include the primary navigation links for a give page, application, etc.
The Footer ElementThe footer element represents the “footer” section of a document or section.
In many websites, the footer element will contain contact and copyright information, a brief “about” blurb, social media logos and links, etc.
Now that we know about some semantically optimized alternatives to the div element, how do we know when to use each of them?.And when (if ever) is it ok to still use div elements in our markup?.HTML5 Doctor has a really handy flowchart to help answer that question:Thanks for reading!.If you’re interested in learning more about the fundamentals of HTML, CSS, and JavaScript, follow my Medium publication, Web Dev Basics.
Ready to write some code?.Sweet!.Sign up for course and learn the basics of web development.
.. More details