What is a header in HTML

HTML article, section, header, footer, nav

Distribution and structure: Sectioning

So far we have structured web pages with countless div tags and at the same time controlled the layout of the page. For CSS and Javascript, the div tags were assigned a meaning through class and id attributes, so that in the end a flood of classes sat in a flood of div tags. CSS and Javascript became more and more obscure.

For the visitor, the structure of the HTML page emerges clearly through the graphic layout, but for screen readers, speech output and the search engines there is only a flood of div tags without any information about the structure of the page.

article, section and nav map the structure of a website into hierarchical chapters similar to the table of contents of a non-fiction book.

Stand for the semantics of the HTML page header, Main and footer to disposal.

< article >

Content that could stand on its own - e.g. a post in a blog - can be packed in article tags.

a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable

article tells the search engines where the actual content of the document begins while header, nav and footer provide the framework for the content.

< section >

HTML5 section stands for sections of the content. Sections usually have a heading (the validator explicitly requests headings: Section lacks heading) and can be a chapter or the description of a product. If an HTML object is needed for CSS and Javascript, a div tag is still appropriate.

A good guide to where HTML5 section and where to use a div tag is to summarize the content of the web page: If content in a list has its own item, a section tag is a better choice than a div tag.

Or even simpler: If you can put a heading over it, as the validator wishes, then an area can be set in a section tag.

Different to article is section an area that could not necessarily stand alone. The standard has the border between article and section only delicately identified on the “self-contained”: That explains why we keep getting stuck with these two terms. Theoretically, article tags can be placed inside section tags. This structure is also recognized as correct by the validator.

<HTML header >

HTML5 header is intended to introduce the content and will usually contain the typical header elements such as headings, time and author. header and section go hand in hand, so to speak.

< nav >

The nav tag is reserved for links to other pages and to areas within the same page. The nav element should only be used for the main navigation of the page and not for casual links on a page.

< footer >

HTML5 footer records what the name suggests: the information in the footer of an article or post and the information in the footer of the page. Just like header, footer can also be used in every section object.

In addition to important links such as imprint and data protection, which are often repeated in the footer, the footer element is a good place for the address element with the contact information about the author or publisher of the document.

< main >

The main tag represents the main content of the page or application and should only be used once within a page or application. Many websites use a wrapper

- the HTML5 tag main replaces this construction.

In this sense, may Main cannot be set within tags such as section, header, footer, aside, nav or article. Content that is repeated on many pages, such as logos, search fields and navigation links, should not sit within the main element.

More on HTML main


The address tag is an old HTML tag, but has changed its meaning with HTML5 and is also counted among the sectioning elements with HTML5.

Examples for article and section

The structure of section, header and article looks puffed up at first. They are ideal for the table of contents of eBooks. For example, the table of contents of an eBook on photography could look like this:

Photography from practice to the basics ........ 1 The camera The structure of the camera ....................... 15 SLR cameras ... ..................... 29 System cameras without mirrors .................. 35 Basics of exposure time and aperture ... ................ 67 PSAM The Creative Programs .................. 82 How to assert yourself against your camera Exposure corrections. .................... 104 Manual focus ....................... 127

article, aside, section, nav and h1… h6 form the beginning of a new section. The first heading in each paragraph is the heading of a section. For example, the overview page of a blog can be structured as follows:

<body> <header> <h1>Video in Webseiten</h1> </header> <article> <h2>Dateiformate für Video</h2> <section> <h3>MP4-Video</h3> <p> Teaser </p> </section> <section> <h3>OGG-Video</h3> <p> Teaser </p> </section> </article> <article> <h2>Video-Codecs</h2> <section> <h3>H.264</h3> <p> Teaser </p> </section> <section> <h3>Theora OGG</h3> <p> Teaser </p> </section> </article> </body>

section tags don't have to be inside article sitting - it would work just as well the other way round. The validator recognizes both structures as correct. Can just as well article in article be nested. As mentioned earlier, the difference between article and section only basically consists of the "self-containing" for article.

Even if more than one heading h1 should be allowed: The validator warns that tools such as screen readers cannot yet cope with this.

External sources