Using Sectioning Content Elements in HTML

Sectioning Content – Part 5

Foreword: In this part of the series I give you a summary of sectioning content elements and the elements that go with them; I then indicate how they are used.

By: Chrysanthus Date Published: 30 Jul 2015

Introduction

This is part 5 of my series, Grouping Content. In this part of the series I give you a summary of sectioning content elements and the elements that go with them; I then indicate how they are used. You should have read the previous parts of the series before reaching here, as this is a continuation.

Sectioning Content Elements Summary
Sectioning elements are elements that group grouping elements into a portion in a web page. Sectioning elements are: body, section, article, nav and aside. Another category of elements similar to sectioning elements is sectioning root elements; they are: body, blockquote, fieldset, figure and td. The body element is both a sectioning content element and a sectioning root element. One main difference between a sectioning content element and a sectioning root element is that, a sectioning content element should have a heading element (h1 – h6), while a sectioning root element should not have a heading element.

The section element (<section>) represents a generic section of a document or application.

The body element represents the content of the document. It has all what is seen in the web page below the horizontal top bars of the browser.

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable. A composition here is likened to a short or long essay. A user comment typically goes into an article element (short).

The nav element represents a section of a web page that links to other pages or to parts within the page: a section with navigation links.

The aside element represents a section of a web page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content.

All sectioning content elements are block level elements. However, you can float the nav and aside elements, with an attribute like,

style="float:left"

Elements that go with Sectioning Content Elements
The elements that work with the sectioning content elements are: the heading elements (h1-h6), the header element, the footer element and the address element.

The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element.

The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element.

The address element represents the contact information for its nearest article or body element ancestor. This element is for email addresses and URLs in hyperlinks; it is not for the postal address. The postal address should be typed in a paragraph element with br elements to create lines inside the p element.

All these elements including the heading elements are block level elements.

Using the Sectioning Content Elements
The meanings of the elements above indicate their uses; for more details, read the previous parts of the series. Also bear in mind the following:

The article element cannot have the main element as descendant.

The nav element cannot have the main element as descendant.

The aside element cannot have the main element as descendant.

The header element cannot have the header or footer or main element as descendant.

The footer element cannot have the header or footer or main element as descendant.

The address element cannot have a heading element (h1-h6) or sectioning content element or header element or footer element or address element as descendant.

article or main Element
From time to time you will have to decide whether to use the article element or the main element for the main content of your web document (page). If the main content is an article, then use the article element. If the main content is not an article, then use the main element. The main element can contain zero, one or more small articles elements. If the document is short, then you can omit the main element.

Fat Footer
At the bottom of some web pages, you might have seen footers that contain a lot of material, including images, links to other articles, links to pages for sending feedback, special offers... in some ways, a whole "front page" in the footer. Such a footer is called a fat footer. The ones I have seen are in short vertical columns. To achieve such columns, you can use a table of one row, and each cell will form a column.

Outline
Here is a quotation from the HTML5 specification: “The outline for a sectioning content element or a sectioning root element consists of a list of one or more potentially nested sections. A section is a container that corresponds to some nodes in the original DOM tree. Each section can have one heading associated with it, and can contain any number of further nested sections.”.

Note on Sectioning Root Elements
Here is a quotation from the HTML5 specification: “Certain elements are said to be sectioning roots, including blockquote and td elements. These elements can have their own outlines, but the sections and headings inside these elements do not contribute to the outlines of their ancestors.” Sectioning root elements are: body, blockquote, fieldset, figure and td.

Book-like Websites
Before I explain how to produce a website that looks like a book, you have to know the meaning of the following: table of content, preface, acknowledgement, appendix, indexes, long colophons, and verbose license agreement.

Table of Content: This is a list of headings with associated page numbers, at the beginning of a book.

Preface: This may consists of 1, 2 or 3 pages that explains the purpose of the book (why the book was written).

Acknowledgement: This is a few paragraphs thanking the people who helped produce the book.

Appendix: This is a section giving extra information at the end of a book or document.

Index: This is a list of names (topics) that are referred to in a book, usually arranged at the end of the book in alphabetical order. A list item (name) here, may have page numbers to show where the item occurs in the book.

Colophon: This is the name or symbol of a publisher that is printed on a book.

License Agreement: This refers to the terms under which the reader should read the book or article. This is usually written as text. Verbose License Agreement means an unnecessarily long license agreement.

HTML5 has a recommendation to write a book in one long web page. HTML5 does not have any recommendation yet, to write a book in many short web pages. Below, I explain the recommendation to write a book in one long web page:

The whole book goes into an article element.

The first element in the article element is the header element. This has the title of the book, writer of the book, edition of the book, year published and publisher of the book. If there is any colophon and it is short, it goes into the header element.

The table of content goes into a section element.

The preface goes into a section element.

The acknowledgement goes into a section element.

Each chapter goes into a section element, which may have nested sections.

Bibliography goes into a footer element.

License Agreement goes into a footer element. Depending on the writer of the book, this footer element can be here or just below the header element, up.

Each appendix goes into a footer element, which can have sectioning content elements (a long footer).

The index goes into a footer element, which can have sectioning content elements (a long footer).

A long colophon goes into a footer element.

Here is a quotation about the <section> element from the HTML5 specification: “Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.” A lot of this has already been elaborated in this series.

And that is the end of this part of the series.

Chrys

Broad Network

Related Articles

Using Sectioning Content Elements in HTML

Sectioning Content – Part 5

Introduction

Related Links

Comments