Semantic Tags in HTML

Ethan Karla

 HTML <header> Element

The <header> element represents a container for introductory content or a set of navigational links.

A <header> element typically contains:

• one or more heading elements (<h1> - <h6>)
• logo or icon
• authorship information

HTML <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

Examples of where an <article> element can be used:

• Forum post
• Blog post
• Newspaper article

HTML <main> Element

The <main> tag specifies the main content of a document.

The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.

HTML <nav> Element

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

HTML <section> Element

The <section> tag defines a section in a document.

HTML <aside> Element

The <aside> tag defines some content aside from the content it is placed in.

The aside content should be indirectly related to the surrounding content.

HTML <footer> Element

The <footer> tag defines a footer for a document or section.

A <footer> element typically contains:

• authorship information
• copyright information
• contact information
• sitemap
• back to top links
• related documents

You can have several <footer> elements in one document.