Páginas semânticas

Como organizar elementos em caixas semânticas

Identificar as principais caixas semânticas para cada contexto

Agenda

Caixas com sentido

Caixas com sentido

<nav>
  <ul>
    <li>início</li>
    <li>sobre</li>
    <li>contato</li>
  </ul>
</nav>

nav

header

<header>
  <img src="" alt="Malala">
  <h1>Malala Yousafzai</h1>
  <nav>
    <ul>
      <li>início</li>
      <li>sobre</li>
      <li>contato</li>
    </ul>
  </nav>
</header>

section

<section>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</section>

main

<main>
  <section>...</section>
  <section>...</section>
</main>

footer

<footer>
  <p>...</p>
</footer>

Vamos praticar?

Até a próxima!

Páginas semânticas

By Vai Na Web

Páginas semânticas

Entenda o que são e como criar páginas com sentido semântico. WIP

  • 974