Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
HTML5 introduces a number of block-level semantic elements for organizing the content of a webpage. These are block-level elements with no inherent presentation properties, just like div. It's how they are designed to be used that makes them distinct. These elements are designed to create structure for your document so that it makes sense not only to the reader, but to other processes that may need to understand the structure of your document, like search engines, archival processes, non-visual browsers for the blind, or even future AI processes that we haven't even thought of yet.
The point is that it should be possible for a relatively unsophisticated machine to create an outline of your document so it knows which parts are relevant for a particular purpose. Take this hypothetical document structure for example. From this diagram, it should be easy to see that we have a fairly typical web page. It had a header, a footer, a section with a couple of articles, and a sidebar. We can see that clearly because it's all labeled for us. That's the point of semantic markup; you're creating labels that make it obvious what parts of your page serve what purpose.
Of course, each of these semantic segments may also have its own semantic segments. This is common and encouraged. If an article has a header, a footer, its own navigation, it's entirely appropriate to indicate them with their own semantic elements. It's helpful to think of these elements in terms of how they affect the document outline. HTML5 defines a specific algorithm for creating an outline, and these elements are defined in terms of how they affect that outline. The major sectioning elements are listed here.
This is the list of elements that are intended to be used where you would otherwise use a div. The section element represents a generic section of the document. It's not a generic container for styling purposes like div; rather, it's intended to indicate a semantic section of the document that is not otherwise covered by another sectioning element. The article element represents a self-contained composition within a document. The HTML5 specification says this could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
The nav element represents a section of the page that contains a set of links to other pages or other resources. Don't think that you need to put all links or groups of links in a nav element. Keep in mind that this is about the document outline and nav elements are excluded from a document outline. The aside element represents a part of the page that is tangentially related to the content around it, like a sidebar or pull quotes, or other semi-related content. This set of semantic elements are not sections, but are used within sections.
These elements are designed to describe parts of a section for the benefit of document outlines, summaries, and other tools. The header element is for the header part of the section. This is very different from the head element. The header element contains content that is displayed. The specification says the header element represents a group of introductory or navigational aids. In practice, you'll want to use this where there's a group of elements in the header of a section. If your section has a single h1 tag or an h group with nothing else in the header, there's no need for a header container.
A footer element typically contains information about its section, like author information, links to related content, copyright, things like that. It's typically at the end of a section, but it doesn't have to be. hgroup is used to group heading tags together. When a number of heading tags are grouped in an hgroup element, the first example of the highest-ranking heading will be used as the text for the entire group. For example, the outline text for this hgroup would be Dr. Strangelove; the subtitle would be displayed on the page but ignored for the purposes of the outline.
These semantic elements make it possible to create a consistent outline of your document. This can help automated processes like search engines or browsers for the visually impaired make better sense of your websites.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 92632 Viewers
82 Video lessons · 104169 Viewers
71 Video lessons · 75746 Viewers
56 Video lessons · 107126 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.