Semantic tags¶

With the introduction of HTML5, a lot of new semantic tags were added to the language. Their role is to indicate by their name, the content they represent. Thanks to this, it gets a better, as the code becomes "self-commenting".

These tags are e.g:

• <header> - means a page or section header, e.g:

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

• <nav> - indicates the area where the page 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 of 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> - which means an article, usually one that can be independently moved to another place. This element may represent, for example, the content of a blog.

• <footer> - used as a page footer, 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 used for thematic grouping of contents
• <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 elements in a particular way we can use CSS.