HTML semantic elements

Made by Antonija with

bordersnone

Why semantic?

more meaning to the HTML
cleaner code
better for search engines
overuse of divs => divitis (https://csscreator.com/divitis)
greater accessibility

<header>
  <nav>Nav</nav>
</header>

<main>
  <section>
      <aside>
      Aside content
    </aside>

    <article>
      Article content
    </article>
  </section>
</main>

<footer>
  Footer content
</footer>

Header

contains branding, navigation elements, search forms

Nav

contains navigational links

Footer

contains copyright, authorship information or navigation
defines the footer of a page, article, or section

Section

groups together related elements
includes one or more heading

Article

self-contained piece of content
stand-alone unit.

Aside

identifies content that is related to the primary content of the webpage
does not constitute the primary content

Main

only one <main> per page
top-level element (in most cases)
header/menu/footer must be outside of footer

Figure

self-contained content
contains an image, table, or chart
<figcaption> element is often nested within

Figcaption

child of a parent <figure>
adds a caption to the content contained in the <figure>

<figure>
  <img src="http://placekitten.com/200/300" alt="Kitten" />
  <figcaption>
    A cute little adorable 
    <a href=http://placekitten.com/200/300"">kitten</a>
  </figcaption>
</figure>

http://html5doctor.com/element-index/

Learn more!

https://html.com/