Layout di pagina

E’ importante utilizzare il più possibile i tag HTML5 che favoriscono una corretta semantica e automaticamente suggeriscono al lettore vocale la funzione e importanza di ciò che stanno per leggere.

Approfondimento e condizioni con i landmark WAI-ARIA

Un esempio di layout con tag semantici:

<header>
    <h1>Header</h1>
</header>

<nav>
    <!-- main navigation in here -->
</nav>

<!-- Here is our page's main content -->
<main>
    <!-- It contains an article -->
    <article>
        <h2>Article heading</h2>
        ```
        <!-- article content in here -->
        ```
    </article>
    <aside>
        <h2>Related</h2>
        ```
        <!-- aside content in here -->
        ```
    </aside>
</main>

<!-- And here is our main footer that is used across all the pages of our website -->
<footer>
    <!-- footer content in here -->
</footer>

Per avere un’idea della bontà della struttura HTML della nostra pagina provare a disabilitare i CSS.