Web Development Tutorials


Document Structure Tags

HTML 5 includes a new set of semantic document structural tags to define different parts or structure of a web page. A semantic element clearly describes its meaning to both the browser and the web developer.

Simple Structure of a Page

Figure 2-5.

A simple template

Some of the most common HTML 5 structural elements are described below.

The <header> tag

The <header> element is used as a container for page heading content. The tag typically contains heading tags (<h1> - <h6>), a logo image, or other content that introduces the content. It is possible to have more than one <header> tag per page; however, the <header> cannot be coded within a <footer> or another <header> tag.

The <nav> tag

The <nav> tag is a block level element used to define major blocks of navigation links or navigation menus.

The <main> tag

The <main> tag is used to serve a container for major page content that is not repeated in other parts of the page. A web page can include only one <main> element. Additionally, it cannot be included as a child element within a <header>, <nav>, footer>, <article>, or <aside> tag.

The <section> tag

The <section> tag defines generic sections in a web page such as headers, footers, or any other sections of the document. In this context, a section is a thematic grouping of content.

The <article> tag

The <article> element represents a complete, or self-contained, composition in a document, page, application, or site that is, in principle, independently distributable or reusable.

The <aside> tag

The <aside> tag is a block level element that defines content aside from the content it is placed in. The aside content should be related to the surrounding content.

The <footer> tag

The <footer> tag is a block level element that defines footer information for an entire web page or section of the document. The content of the <footer> typically consists of contact information, copyright, links, or logos. In some cases, a web page may contain multiple <footer> tags.

The <figure> tag

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, or code sections. By default, this is a block level element with 40px right and left margin settings.

The <figcaption> tag

The <figcaption> is a block level tag that defines a caption for a <figure> element discussed in the previous section. The <figcaption> tag is normally coded as the first or last child element of the <figure> tag.

TOP | NEXT: Paragraphs