Semantic Elements

In addition to the individual HTML elements that display content, such as <p>, <h1>, etc., there are HTML elements that are used to describe the content contained within a larger section of HTML elements. These elements are called semantic elements, because they give meaning to group of descendant elements contained within them.

Some of the most important semantic elements are those that allow us to divide our page into sections.

Wireframe of a web page with <header> at the top, <main> at the middle, <footer> at the bottom, and <aside> at the right

The image above shows a common layout of a web page. We can use specific HTML elements for each of these sections.

• We can use a <header> tag for the header content

• We can use a <footer> tag for the footer content

• We can use a <main> tag for the main content of the page

• Sidebar content can go in an <aside> tag

• If there is a list of links, such as in the <header>, they can go in a <nav> tag

Additionally, we can use <article> and <section> to divide these sections into more sections.

Use these sectioning HTML elements in every website you build. This lets screen reader users jump to these sections of the website quickly.