When to Use the New HTML5 Section Element

When to Use the New HTML5 Section Element
Page content

With HTML5 supported by all new browsers, the time has come to get up to date with the new elements that the latest standard introduces.

One of these is the section element, something that appears to be nothing more than a standard tag wrapped in angled brackets. The truth, of course, is far more interesting, and over the next few minutes you will find out everything you need to know about this particular aspect of HTML5.

By introducing this new standard, the World Wide Web Consortium (W3C) is allowing the web to develop and grow alongside the various multimedia technologies that are now used regularly on the web. Whether you expect to be coding a website in traditional HTML or if you utilize dynamic scripting such as ASP or PHP, knowledge and understanding of HTML5 is absolutely vital for you to be able to continue development of your online property and avoid being left behind.

New Elements in HTML5

New Elements in HTML5There are several new elements introduced in HTML5, of which the section element is just one. HTML5 is the first full revision of the standard since 1997 brought us HTML 4.0, and as a result you will notice that many of the new elements reflect how the World Wide Web has evolved.

For instance, you can highlight text with the tag, or display text from an external source with the tag. The new standard also pushes HTML towards the eventual World Wide Web Consortium (W3C) dream of the semantic web, as demonstrated by the presence of the markup.

The section element (which appears like this: ) joins these new HTML tags in giving web designers and developers a new set of tools to play with, allowing websites to rise above and beyond the restrictions of HTML 4.0. As long as you’re using the most up-to-date browsers, you’ll be seeing some impressive new websites over the coming months, and there is every chance that in five years time the web will become largely unrecognizable by comparison.

The Section Element vs DIV

The section element is used to define chunks of text in a web page, or perhaps a header or footer.

You might use it as follows:

This passage would then appear in a web page like this:

The Section Element

The section element is new to HTML5.

As you can see, its use is not far removed from theway we used to use the tag. In HTML5, however, you can use both tags, although you need to understand the difference.

Use of the tag is now limited to the block level. As such, while you would still find a chunk of text within the tags, they would be also wrapped in the new tags. The section element would be used to markup a news section on a website home page, or perhaps a subsection of a longer piece of text (often within an ). The great benefit of HTML5 is that it finally frees us from wrapping every text block in a .

Using the Section Element

As with all HTML5 elements, use of is supported by the latest versions of the main browsers:

  • Internet Explorer 9 or later
  • Mozilla Firefox 4 or later
  • Opera
  • Chrome
  • Safari

You might use the section element in your HTML5 web page in several ways. For instance, there is the creation of a news section on your web page:

Alternatively, the section element can also present a list:

As with other HTML elements, of course, the section element can be styled using CSS, either inline, with a set of style sheet instructions embedded in the HTML file, or with an external stylesheet.

You might use the following example:

Using the #traffic property in the CSS you can then influence how the section appears on the web page, just as you would have done with a under HTML 4.0 rules.

Benefits of the Section Element

As explained earlier, the main benefit of the section element is that it plays a major role in the new way in which web pages are defined under HTML5.

One thing that you should have noticed from the examples above is that the section element always has a heading tag. This underlines its purpose as an element designed for use with text rather than anything image related or at the block level, and as such is described:

“The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a header, possibly with a footer.”

You should, therefore, expect to see the section element used in a structure such as this:

As you can see, this is a powerful new element that lets us define text sections in a whole new way!