Pin Me

Using the HTML5 Section Element in Web Pages

written by: •edited by: Michele McDonough•updated: 8/8/2011

Getting to grips with a new standard can be tricky, but the W3C has done fantastic work in delivering new HTML elements that seem logical and very useful - such as the new section element.

  • slide 1 of 5

    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.

  • slide 2 of 5

    New Elements in HTML5

    There 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 <mark> tag, or display text from an external source with the <article> 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 <details> markup.

    The section element (which appears like this: <section></section>) 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.

  • slide 3 of 5

    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:

    <section>

    <h1>The Section Element</h1>

    <p>The section element is new to HTML5.</p>

    </section>

    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 <div> tag. In HTML5, however, you can use both tags, although you need to understand the difference.

    Use of the <div> tag is now limited to the block level. As such, while you would still find a chunk of text within the <div></div> tags, they would be also wrapped in the new <section></section> 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 <article>). The great benefit of HTML5 is that it finally frees us from wrapping every text block in a <div>.

  • slide 4 of 5

    Using the Section Element

    As with all HTML5 elements, use of <section> 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:

    <!DOCTYPE HTML>

    <html>

    <body>

    <section>

    <h1>Latest News</h1>

    <p>What's been going on at Bright Hub this week?.</p>

    </section>

    </body>

    </html>

    Alternatively, the section element can also present a list:

    <!DOCTYPE HTML>

    <html>

    <body>

    <section>

    <h1>List of Articles</h1>

    <p>List of top articles by Christian Cawley:

    <ol>

    <li>Article 1</li>

    <li>Article 2</li>

    <li>Article 3</li>

    </ol>

    </p>

    </section>

    </body>

    </html>

    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:

    <section id="traffic">

    <h2>Too Busy?</h2>

    <p>Are the roads too busy in your neck of the woods? </p>

    </section>

    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 <div> under HTML 4.0 rules.

  • slide 5 of 5

    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 <h1> 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:

    <html>

    <div>

    <article>

    <section>

    <h1>title</h1>

    <p>Paragraph text</p>

    </section>

    </article>

    </div>

    </html>

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

References