HTML 5 Sectioning
HTML5 Basics - Part 12
Forward: In this part of the series, we see how HTML 5 content can be arranged into sections.
By: Chrysanthus Date Published: 22 Jul 2012
Introduction
Note: If you cannot see the code or if you think anything is missing (broken link, image absent, etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.
What is a Section?
A section is a group of paragraphs. The philosophy of HTML 5 is to have text typed in an HTML element, typically the paragraph element. You should no longer type text directly into the body element. The text should go into some other element especially the p element. Sections can be nested (one inside another). HTML 5 comes with an element called the section element. This is a double tag element. The start tag is <section> and the end tag is </section>. The section element is used to group a number of paragraphs for the sake of consistency. Each section can have a header element just below its start tag. The header element has the heading for the section. The following is good coding in HTML 5.
<!DOCTYPE HTML>
<html>
<head>
<title>Dealing with Sections</title>
</head>
<body>
<h1>The Page Heading</h1>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
<section>
<h2>A Section Heading</h2>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
</section>
<section>
<h2>Another Section Heading</h2>
<p>some paragraph text of several lines</p>
<section>
<h3>A Subsection Heading</h3>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
</section>
<p>some paragraph text of several lines</p>
</section>
<p>some paragraph text of several lines</p>
</body>
</html>
Above you have a section with the heading, “A Section Heading”. You have another section with the heading, “Another Section Heading”. Inside this section, you have a nested section with the heading, “A Subsection Heading”.
Sections with other kind of Tags
In HTML 5, there are other sections, which do not have the section tags. A good example of this is the body element. The body element is a section, which has but the body tags. The body element has other nested sections. In the body section above, there are three paragraphs: two before the first section, which has the section tags and one just before the end tag for the body element. Notice that each section above, including the body section has a heading. We shall see other section elements, which have their own tags below.
At the browser, there are no displayed demarcations for sections.
The header element is an element that has introductory information and possibly navigation aids (hyperlinks) for a section. The header element is a double tag element. The tags are: <header> and </header>. For the body element (body section) the header element can have the h1 element, a logo, some hyperlinks and a search form (see later). The footer element is an element, which normally is at the end of a section. It is a double tag element. Its tags are: <footer> and </footer>. A footer element can have things like the copyright data, hyperlinks to related documents and the address element (see below). Both the header and the footer element can each have sections. Everything being equal, the user does not see the demarcation of the header or footer element at the browser.
The nav Element
The nav element is a section element. It is a double tag element. The tags are: <nav> and </nav>. A web page can have many hyperlinks. The ones that are important and exist in a group should be placed in the nav element. Everything being equal, the user does not see the demarcation of the nav element at the browser. Read and try the following code, which illustrates the use of the header, footer and the nav elements:
<!DOCTYPE HTML>
<html>
<head>
<title>Dealing with Sections</title>
</head>
<body>
<header>
<h1>The Page Heading</h1>
<nav>
<a href="produst.htm">Products</a> <a href="services.htm">services</a> <a href="about.htm">About Us</a>
</nav>
</header>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
<section>
<h2>A Section Heading</h2>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
</section>
<section>
<h2>Another Section Heading</h2>
<p>some paragraph text of several lines</p>
<section>
<h3>A Subsection Heading</h3>
<p>some paragraph text of several lines</p>
<p>some paragraph text of several lines</p>
</section>
<p>some paragraph text of several lines</p>
</section>
<p>some paragraph text of several lines</p>
<footer>
© Modern company.
<nav>
<a href="contact.htm">Contact Us</a> <a href="terms.html">Terms</a>
</nav>
</footer>
</body>
</html>
The article element is for sites that have blogs; that is, sites that are article orientated. The article element is a section element. It has two tags, which are: <article> and </article>. article elements can be nested. In a typical article page the main article would be enclosed by the start and end article tags. The user comments would be nested articles inside the main article. Everything being equal, the user does not see the demarcation of an article element at the browser. Read and try the following code:
<!DOCTYPE HTML>
<html>
<head>
<title>Dealing with Sections</title>
</head>
<body>
<h1>Article Heading</h1>
<nav>links for the site go here</nav>
<p>Some general information about the site and articles or ads can be here.</p>
<article>
<header>
<h2>Article Subheading</h2>
<img src="authorImageFile.jpg">
</header>
<section>
<h3>A Section Heading</h3>
<p>Paragraphs for the section</p>
</section>
<section>
<h3>Another Section Heading</h3>
<p>Paragraphs for the section</p>
</section>
<article>
<p>Comment by a User goes here</p>
</article>
<footer>
© The Blogger
<nav>
<a href="contact.htm">Contact Us</a> <a href="terms.html">Terms</a>
</nav>
</footer>
</body>
</html>
Note: the content of a nested article has to be related to the outer article.
The aside Element
The aside element is a section element. It is a double tag element. Its tags are: <aside> and </aside>. The content of the side element should have content of the main text around it. The content of the aside element is tangentially related (sidebar) to the content around it. The aside element can be used for something like quotation or even the nav element (that is, you can place the nav element inside the aside element). Everything being equal, the user does not see the demarcation of the aside element at the browser.
All the elements described above are new elements.
The address Element
Another element of interest is the address element. It is a double tag element. Its tags are: <address> and </address>. In HTML, the address element is not for geographical (postal) address. It is for links to the people whose knowledge are in the article or body element of interest. A good place for you to place the address element is in the footer element. The following is an example of an address element, copied from the HTML 5 draft specification:
<address>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
contact persons for the <A href="Activity">W3C HTML Activity</A>
</address>
Well, let us stop here. We continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT