Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

(singke) #1
ptg16476052

HTML5 Structural Tags 375

13


HTML5 Structural Tags


Now that you’ve seen a full page built using HTML5, let’s look at the individual struc-
tural tags and which semantics they represent. The new tags don’t provide an advantage
in terms of styling your pages; you can provide the structure you need for styling using


tags, IDs, and classes. The advantage of the new tags is that they provide a stan-
dard vocabulary for describing the structure of a page. This vocabulary makes it easier to
build software that extracts information from structured pages so that it can be presented
in alternate ways. The key, though, is for developers who are using these tags to use them
in the manner consistent with that vocabulary.

Sections


It’s helpful to think of the structure of a web page as an outline. The top-level structural
element of a page is the element. The next level is represented by the
and elements. In HTML4, the only element available for dividing the page into
further sections is the

element. HTML5 provides a number of other others, starting
with the
element.


As you might expect, the

element is used to define a generic section of the
document. The other structural tags in HTML5 are used to define document sections with
more specific semantic meaning. A
tag is expected to include a heading tag
for that section. You’ll learn in more detail how headings and document sections interact
a little further on.


Here’s an example of a section:



Board Members


The board members for 2014 to 2016 term are as follows.



  • Lis a Smith, Chairman

  • Joe Brown, President

  • Sheila Robinso n, Vice President

  • Wanda Nichols, Treasurer

  • Ronald Jones, Secretary



While styles can be applied to the

element, it does not alter the appearance
of a page on its own. You can also nest
elements on the page to create
subsections. That said, you should use more specific elements when possible to avoid the


tag becoming the new
tag.