Rafaela Ferro - Nest SI 20

HTML é fácil

e Indulgente

HTML é a parte mais importante de uma página Web

HTML é…

Estrutura.

SIGNIFICADO.

HIERARQUIA.

Estrutura.

<header>

<main>

<footer>

<section>

<aside>

<nav>

!=  <div>

<button>

<a>

<input>

<select>

<textarea>

!=  <div>

    <span>

SIGNIFICADO.

<h1 - 6>

<p>

<ul>

<ol>

<label>

!=  <div>

    <span>

HIERARQUIA.

<div class="container" id="header">
    <div class="header header-main">Super duper best blog ever</div>
    <div class="site-navigation">
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </div>
</div>
<div class="container" id="main">
    <div class="article-header-level-1">
        Why you should buy more cheeses than you currently do
    </div>
    <div class="article-content">
        <div class="article-section">
            <div class="article-header-level-2">
                Part 1: Variety is spicy
            </div>
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
        </div>
    </div>
</div>
<div class="container" id="footer">
    Contact us!
    <div class="contact-info">
        <p class="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </p>
        <div class="street-address">
            <p>123 Main St., Suite 404</p>
            <p>Yourtown, AK, 12345</p>
            <p>United States of America</p>
        </div>
    </div>
</div>

<header>
    <h1>Super duper best blog ever</h1>
    <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
        <a href="/archive">Archive</a>
    </nav>
</header>
<main>
    <article>
    <header>
        <h1>Why you should buy more cheeses than you currently do</h1>
    </header>
    <section>
        <header>
            <h2>Part 1: Variety is spicy</h2>
        </header>
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
    </section>
</article>
</main>
<footer>
    <section class="contact" vocab="http://schema.org/" typeof="LocalBusiness">
        <h2>Contact us!</h2>
        <address property="email">
            <a href="mailto:us@example.com">us@example.com</a>
        </address>
        <address property="address" typeof="PostalAddress">
            <p property="streetAddress">123 Main St., Suite 404</p>
            <p>
                <span property="addressLocality">Yourtown</span>,
                <span property="addressRegion">AK</span>,
                <span property="postalCode">12345</span>   
            </p>
            <p property="addressCountry">United States of America</p>
        </address>
    </section>
</footer>

Erros comuns

Usar <div> e <span> para elementos interativos

Não adicionar o atributo alt nas imagens

Usar <h> em elementos por terem um elevado font-size

Escrever maiúsculas no HTML sem ser em siglas/acrónimos

🙅‍♀️👎

Adicionar elementos desnecessários

Vantagens práticas

Acessibilidade.

"Using HTML as intended helps create webpages that are understood by a wide range technologies for a wide range of people in a wide range of circumstances."

@ Mandy Kerr

Performance.

Elementos nativos vêm com muita funcionalidade gratuita. Precisam de menos HTML, CSS e JS.

Atributos
Interação com teclado
Validações
…

Performance.

Recomendações da Google:

Menos de 1500 nodes.
Max depth de 32 nodes.
Cada parent node não ter mais de 60 child nodes.

Manutenção.

Um código com boas práticas é mais fácil de ler e manter, de introduzir a novos membros.