Sectioning in HTML5
Basics of HTML 5 - Part 12
Foreword: In this part of the series, I explain how HTML viewable content can be placed in sections.
By: Chrysanthus Date Published: 3 Apr 2015
Introduction
What is a Section?
The viewable content of a web page can have, paragraphs, images, videos, tables, and other objects. These have to be placed in sections. There are different kinds of sections in HTML today. Glance through the following code and try it:
<!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 Nested Section 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 Nested Section Heading”.
In HTML today, there are other sections, which do not have the section tags (start and end). 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.
At the browser, there are no displayed demarcations for sections.
The header and footer Elements
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). Everything being equal, the user does not see the demarcation of the header or footer element at the browser, or the demarcation of any other section element.
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. 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 Nested Section 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 an element with complete information. It normally contains other sections. It goes inside the body element. It can be used 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. A user comment can be an article element. 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>
</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 aside 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.
The main Element
The main element is a grouping element (see later), and not a section element. After the start tag of the body element, you can have some elements and then the main element. The main element typically contains, the article, aside, footer, header and nav elements. The main element should not be inside any of these elements. The main element can have the header element above it and the footer element below it; but it cannot be inside the header or footer element. The main element is a double tag element, that is, <main> </main>.
Well, let us stop here. We continue in the next part of the series.
Chrys
Related Links
Basics of HTML 5Basics of ECMAScript
HTML DOM Basics
CSS Basics
Text Elements in HTML
Grouping Content
Microsyntax Dates and Times in HTML
Sectioning Content
Common Idioms without Dedicated Elements
HTML Embedded Content
HTML Insecurities and Prevention
Presentation Mathematical Markup Language
More Related Links
PurePerl MySQL API
Major in Website Design
Perl Course - Optimized
Web Development Course
BACK NEXT