New structural tags
Video: New structural tagsHTML 4 provided us with a number of tags that helped to give our content meaning. However, other than the heading elements, none of the elements in HTML 4 helped to define a document's structure. Although it is a common practice to use a div element to section content and identify it through a class or ID attribute, in reality, this adds no additional meaning to your page structure at all. To help give authors more control over the structure of their HTML documents, HTML5 introduces several new structural tags to help identify and section content.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
New structural tags
HTML 4 provided us with a number of tags that helped to give our content meaning. However, other than the heading elements, none of the elements in HTML 4 helped to define a document's structure. Although it is a common practice to use a div element to section content and identify it through a class or ID attribute, in reality, this adds no additional meaning to your page structure at all. To help give authors more control over the structure of their HTML documents, HTML5 introduces several new structural tags to help identify and section content.
In many places, these tags will allow you to replace container div tags with meaningful semantic markup. In this movie, I want to take a moment to introduce you to these tags and give you a brief introduction regarding their use. We'll start with the section element. According to the HTML5 specification, the section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading. Note the emphasis on the grouping of thematic content and the typical need for a heading.
Sections could be chapters, introductions, product descriptions, or any other distinct section of content. I've seen plenty of demos where the section tag is used as simply a replacement for the div tag. Well, that's not always correct. If you need a container tag to specifically assist with styling or scripting, use the div tag. Sections should be distinct regions with distinct titles within your document. Now, look at it this way. If you were creating an outline of your document, any element identified as a section would be listed as a bullet point in that outline.
That's a great way to help determine whether content belongs in a section or not. Next up, I want to talk about the article element. There seems to be a great deal of confusion about the section and article tags, so let's take a look at what the specification has to say about articles. The article element represents a self- contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication. 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 point of emphasis here is on the independent nature of the content. If the content can be syndicated through a feed or republished on its own, an article tag is warranted. The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography. The biggest concern with the aside tag is the location in which it is used.
It should be nested within the section of content that it relates to. An aside located at the top level of the document would relate to the entire page, whereas an aside within an article itself should relate to that article's content. Asides are perfect for pull quotes, adds, related navigational groupings, or yes, even sidebar content. The header element, while not by definition a sectional tag, can assist greatly with the structure of your sites. The specification defines the header element as follows.
The header element represents a group of introductory or navigational aids. A header element is intended to usually contain the section's heading,an h1-h6 element or an hgroup elemen, t but that is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos. Headers and sections go hand-in-hand. Although not required, a document can contain multiple headers. You might use one header to identify the overall page content and then use another heading within each new section or article.
The hgroup element is related to the header element, but is not reliant on the header element for its functionality. According to the specification, the hgroup element represents the heading of a section. The element is used to group a set of h1-h6 elements when the heading tag has multiple levels, such as subheadings, alternate titles, or taglines. If you place any heading tag, h1-h6, at the top of the section, the HTML5 specification states that the content is used as a heading for that section. However, if you have taglines, subheadings, or subtitles, the hgroup element can group those elements together, so that they are identified as relating to each other, instead of acting as individual headings for separate sections.
The footer element allows you to create footers for content sections. Like the header element, a page can contain multiple footers if sections within the page require them. The specification for the footer element has this to say. The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like. Now, that's actually pretty straightforward if you think about it. The final new structural element is the nav element.
The specification's definition reads, "The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links." The specification goes on to discuss two very important points on the use of the nav element. First, the nav element is only to be used for major navigational blocks within your content. It's not designed to wrap every grouping of links. Second, the specification also intends for the nav element to be used by assistive technology in determining when navigation should be skipped or immediately available for user agents like screen readers.
These new elements will help add structure and meaning to your markup. Later in this title, we'll examine each of these new elements in more detail and discuss the outline algorithm that drives how to properly structure pages with these new tags.
There are currently no FAQs about HTML5 First Look.