Semantic tags¶

With the advent of HTML5, quite a few new semantic tags have been added to the language. Their role is to indicate by their name what content they represent. Thanks to this, it obtains a better, "self-commenting" code.

These headlines include:

• <header> - stands for the page or section header, e.g.:

<article>
  <header>
    <h1>SDA</h1>
    <p>The best courses online</p>
  </header>
  <p>SDA will teach you JAVA but also some frontend!</p>
</article>

• <nav> - indicates the area where the website navigation is located, e.g .:

<nav>
  <a href="/index">Main Page</a> |
  <a href="/courses">Available Courses</a> |
  <a href="/java">Java</a> |
  <a href="/html">HTML</a>
</nav>

• <main> - indicates the main content on the page, e.g .:

<main>
    <h2>SDA Courses</h2>
    <p>This is the main HTML section, where you learn about semantic tags</p>
</main>

• <article> - meaning the article, usually one that can be independently moved to another place. This element can represent, for example, the content of a blog.

• <footer> - used as a footer on the page, e.g .:

<footer>
  <p>Careers</p>
  <p>
    <a href="mailto:some@email.com">some@email.com</a>
  </p>
</footer>

Other popular ones are:

• <section> - is for thematic grouping of content
• <aside> - side content area, e.g .:

<aside>
    <h3>Some Aside Title</h3>
    <p>Some Aside Content here</p>
</aside>

NOTE: Most of the semantic tags do not cause the page to be displayed in a different way. To display these items in a specific way we can use CSS.