Dostępność i semantyka

<div>Główna treść dokumentu</div>
<div>Artykuł</div>
<div>Okno dialogowe</div>
<div>Akapit</div>
<span>Fragment ważnego zaznaczonego tekstu</span>

<main>Główna treść dokumentu</main>
<article>Artykuł</article>
<dialog>Okno dialogowe</dialog>
<p>Akapit</p>
<strong>Fragment ważnego zaznaczonego tekstu</strong>

Znaczniki strukturalne i dostępność

<header>
  <nav>
    <a href="/">
      &lt;!-- markup logo --&gt;
    </a>
    <menu>
      <li><a href="/">Strona główna</a></li>
      <li><a href="/team">Zespół</a></li>
      <li><a href="/portfolio">Projekty</a></li>
      <li><a href="/contact">Kontakt</a></li>
    </menu>
  </nav>
</header>
<main>
  <article>
    <h1>Tytuł artykułu</h1>
    <section>
      <h2>Tytuł sekcji</h2>
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, maxime minima voluptate praesentium suscipit deleniti voluptatem nesciunt culpa pariatur consequuntur eaque odio similique reprehenderit ex vel. Accusantium vitae suscipit dicta.</p>
      <p>Fugiat, ducimus voluptates quam nam eveniet aperiam incidunt, corporis suscipit modi quos ea accusamus reprehenderit temporibus vitae nesciunt. Culpa neque animi voluptatem ad voluptate odit fugiat illum libero aspernatur soluta.</p>
      <p>Ipsam recusandae officia a dignissimos expedita voluptas asperiores dolore, repudiandae quae saepe ut et. Natus voluptatibus consectetur excepturi possimus adipisci fugit autem aperiam. Pariatur amet, cumque tenetur non laboriosam labore?</p>
    </section>
    <section>
      <h2>Kolejna sekcja</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat molestiae corrupti sed veritatis. Veniam totam exercitationem dignissimos molestiae iusto repudiandae magni voluptatem impedit minima. Voluptatibus cumque saepe nisi ratione pariatur.</p>
      <p>Quasi iure repudiandae nesciunt. Minima exercitationem doloribus et repellendus laboriosam cum, eligendi modi ex debitis, obcaecati nihil incidunt. Fugiat sunt aut hic recusandae error quo iure voluptatem facere quasi placeat.</p>
      <p>Architecto ut animi vitae est. Magni reprehenderit, at omnis quidem sed eos minus ab perferendis, molestiae repellat sequi similique, odit animi natus rem voluptatibus culpa officia asperiores? Tempora, dignissimos accusamus?</p>
    </section>
  </article>
</main>
<footer>
  <a href="/">Strona główna</a>
  <address>
    Lorem ipsum,
    dolor sit amet consectetur,
    adipisicing elit. Fugit,
    23-666 Łódź
    <a href="mailto:contact@foo.bar">Napisz do nas</a>
  </address>
</footer>
        
<div>
  <div>
    <a href="/">
      &lt;!-- SVG z logo --&gt;
    </a>
    <div>
      <div><a href="/">Strona główna</a></div>
      <div><a href="/team">Zespół</a></div>
      <div><a href="/portfolio">Projekty</a></div>
      <div><a href="/contact">Kontakt</a></div>
    </div>
  </div>
</div>
<div>
  <div>
    <h1>Tytuł artykułu</h1>
    <div>
      <h2>Tytuł sekcji</h2>
      <div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Perspiciatis, maxime minima voluptate praesentium suscipit deleniti voluptatem nesciunt culpa pariatur consequuntur eaque odio similique reprehenderit ex vel. Accusantium vitae suscipit dicta.</div>
      <div>Fugiat, ducimus voluptates quam nam eveniet aperiam incidunt, corporis suscipit modi quos ea accusamus reprehenderit temporibus vitae nesciunt. Culpa neque animi voluptatem ad voluptate odit fugiat illum libero aspernatur soluta.</div>
      <div>Ipsam recusandae officia a dignissimos expedita voluptas asperiores dolore, repudiandae quae saepe ut et. Natus voluptatibus consectetur excepturi possimus adipisci fugit autem aperiam. Pariatur amet, cumque tenetur non laboriosam labore?</div>
    </div>
    <div>
      <h2>Kolejna sekcja</h2>
      <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Placeat molestiae corrupti sed veritatis. Veniam totam exercitationem dignissimos molestiae iusto repudiandae magni voluptatem impedit minima. Voluptatibus cumque saepe nisi ratione pariatur.</div>
      <div>Quasi iure repudiandae nesciunt. Minima exercitationem doloribus et repellendus laboriosam cum, eligendi modi ex debitis, obcaecati nihil incidunt. Fugiat sunt aut hic recusandae error quo iure voluptatem facere quasi placeat.</div>
      <div>Architecto ut animi vitae est. Magni reprehenderit, at omnis quidem sed eos minus ab perferendis, molestiae repellat sequi similique, odit animi natus rem voluptatibus culpa officia asperiores? Tempora, dignissimos accusamus?</div>
    </div>
  </div>
</div>
<div>
  <a href="/">Strona główna</a>
  <div>
    Lorem ipsum,
    dolor sit amet consectetur,
    adipisicing elit. Fugit,
    23-666 Łódź
    <a href="mailto:contact@foo.bar">Napisz do nas</a>
  </div>
</div>