Divs são jogados fora

Nós todos amamos nossas <div>tags. Eles já existem há décadas, e por décadas eles têm sido o elemento a ser usado quando você precisa envolver algumas coisas em um bloco para fins de estilo ou estruturais. Ainda é muito comum procurar em sites de produção e ver coisas como esta:

<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>
            <!-- cheesy content -->
        </div>
        <div class="article-section">
            <div class="article-header-level-2">
                Part 2: Cows are great
            </div>
            <!-- more cheesy content -->
        </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>

Hoo, isso é muito <div>s. E ei, funciona. Quero dizer, principalmente. Tem a estrutura que você precisa, e tenho certeza de que vai parecer do jeito que você pretende no momento em que você terminar de estilizá-la. Mas tem alguns grandes problemas:

• Acessibilidade – Muitas ferramentas são muito inteligentes e fazem o melhor para analisar a estrutura de uma página para ajudar a orientar os usuários na forma como o autor da página pretende e para dar aos usuários pontos de salto fáceis de navegar rapidamente para a seção da página eles se importam. Mas <div>não dá nenhuma informação útil sobre a estrutura de um documento. A ferramenta mais inteligente do mundo ainda não é humana, e não se pode esperar que ela analise classe idatribua e reconheça todas as maneiras estranhas e selvagens que os desenvolvedores de todo o mundo chamam de blocos. Eu posso reconhecer que class="article-header-level-2"é um subtítulo, mas um robô não pode. (E se puder, tire-o do meu computador, ainda não estou pronto para a revolução da AGI ).
• Legibilidade – Para ler este código, você precisa verificar cuidadosamente os nomes das classes, escolhendo-as entre o <div class="..."></div>texto padrão. E uma vez que você esteja a alguns níveis de profundidade, torna-se complicado controlar quais </div>tags de fechamento acompanham as <div...>tags de abertura. Você começa a confiar muito nos recursos do IDE, como colorir diferentes níveis de recuo ou realçar a tag correspondente para que você possa acompanhar onde você está e, em documentos maiores, pode exigir muita rolagem sobre esses recursos.
• Consistência e padrões – Pode ser frustrante começar um novo trabalho ou mudar para um novo projeto e ter que aprender do zero todas as convenções de marcação loucas usadas na base de código. Se todos tivessem uma maneira padronizada de marcar estruturas comuns em documentos da web, seria muito mais fácil examinar um arquivo HTML em uma base de código desconhecida e obter um controle rápido sobre o que ele deveria representar. Se ao menos houvesse tal padrão …

HTML5: esse padrão

HTML5 não é novo. Isso é um eufemismo; um esboço de trabalho inicial foi liberado para comentário público em janeiro de 2008 (11 anos atrás!) , e tornou-se uma recomendação completa do W3C em outubro de 2014, quatro anos e meio atrás. Então, tem estado por aí por um tempo.

Um dos principais avanços do HTML5 foi a introdução de um conjunto padronizado de elementos semânticos . O termo “semântica” refere-se ao significado de uma palavra ou uma coisa, por isso “elementos semânticos” são elementos concebidos para marcar a estrutura de um documento de uma forma mais significativa forma, uma forma que torna mais claro o que eles são para , qual finalidade eles servem no documento. E, mais importante, como eles são padronizados, esses elementos definem o documento de uma forma que todos podem usar e entender, incluindo robôs.

Eu acho que a própria especificação HTML5 resume bem a questão em uma nota sob a definição do <div>elemento:

NOTA: Os 
autores são fortemente encorajados a ver o elemento div como um elemento de último recurso, quando nenhum outro elemento é adequado. O uso de elementos mais apropriados, em vez do elemento div, leva a uma melhor acessibilidade para os leitores e facilidade de manutenção para os autores. 
– https://www.w3.org/TR/html5/grouping-content.html#the-div-element

Vou dividir os elementos do bloco semântico em duas categorias: estrutura primária e indicadores de conteúdo . Estes não são termos padrão ou nada; Eu apenas os inventei para este artigo. Mas acho que a distinção é bastante útil. 🤷‍♂️

Estruturas Primárias

Há um padrão super comum que pode ser encontrado em sites, tutoriais e até bibliotecas CSS em toda a Internet e por boas razões. Frequentemente, dividimos uma página em seu nível mais alto em três regiões: cabeçalho , principal e rodapé . Em seguida, dividimos essas regiões em seções,conforme necessário. Eu incluí isso no meu exemplo acima para provar o ponto:

<div class="container" id="header">...</div>
<div class="container" id="main">
    ...
    <div class="article-section">...</div>
    ...
</div>
<div class="container" id="footer">...</div>

Eu vi (e usei) esse padrão por décadas, e faz muito sentido estruturar um documento dessa maneira, tanto para a legibilidade do HTML quanto para facilitar o estilo da página no CSS. Os elementos de cabeçalho e rodapé também tornam modelos parciais em linguagens como PHP ou Rails / ERB muito mais fáceis de trabalhar, já que você pode incluir parciais comuns de cabeçalho e rodapé em todo o site:

<?php include 'header.php'; ?>

<div id="main">...</div>

<?php include 'header.php'; ?>

Então aqui está a coisa: todos concordam que este é um bom padrão a seguir. E isso inclui o pessoal da WHATWG e W3C, que padronizou o padrão em quatro novos elementos HTML5 com nomes muito claras: <header>, <main>, <footer>, e <section>.

Bookends: <header>e<footer>

Os elementos <header>e <footer>são basicamente gêmeos: são muito similarmente definidos na especificação e seguem o mesmo conjunto de regras sobre onde eles podem ser usados, com a única diferença sendo seus propósitos semânticos: cabeçalhos vão no começo das coisas, rodapés ir no final das coisas. E por “coisas”, quero dizer mais do que apenas o <body>da sua página: esse par de elementos é projetado para ser usado em qualquer parte do seu documento que represente uma parte do conteúdo com um início e um fim claros. Isso pode incluir itens como formulários, artigos, seções de artigos, postagens em um site de mídia social, cartões etc.

Cabeçalhos e rodapés são anexados semanticamente ao elemento mais próximo “raiz de seccionamento” ou “conteúdo de secionamento” . Estas são coisas como <body>, <blockquote>, <section>, <td>, <aside>, e muitos outros; clique nos links acima se quiser as listas completas. As tecnologias assistivas podem usar esses elementos e outros para gerar um esboço de um documento, o que pode ajudar os usuários a navegar com mais facilidade. Você não deve ter mais de um <header>ou <footer>por raiz / conteúdo de seção. (Um de cada é bom, mas não dois do mesmo.)

Como nota final, <header>é muito frequente manter o elemento de cabeçalho ( <h1>– <h6>) para o seu contexto. Isso não é necessário, mas pode ajudar a agrupar outros elementos relacionados com o título, como links, imagens ou subtítulos, e pode ajudar a manter uma estrutura consistente, mesmo quando o título é o único elemento no <header>.

As coisas boas: <main>

O terceiro elemento da região principal <main>é especial. A especificação diz duas coisas muito importantes sobre <main>:

A área de conteúdo principal de um documento inclui conteúdo exclusivo desse documento e exclui conteúdo que é repetido em um conjunto de documentos, como links de navegação no site, informações de direitos autorais, logotipos e banners e formulários de pesquisa (a menos que o documento ou a função principal do aplicativo é o de um formulário de pesquisa). 
– https://www.w3.org/TR/html5/grouping-content.html#elementdef-main

Então, <main>é onde você coloca as coisas boas, as partes importantes de uma página, o motivo pelo qual o usuário chegou a esta página em particular , e não o seu site em geral. Em outras palavras, o conteúdo principal . 😯😲🤯

Todas essas outras coisas, logotipos e formulários de busca e navegação e tal, podem ir em um <header>ou <footer>dentro do <body>mas fora dele <main>.

Não deve haver mais do que um elemento principal visível em um documento. Se mais de um elemento principal estiver presente em um documento, todas as outras instâncias deverão ser ocultadas usando o atributo oculto . 
– https://www.w3.org/TR/html5/grouping-content.html#elementdef-main

Isso é bem único. Ao contrário de <header>e <footer>(e da maioria dos outros elementos de bloco), <main>não pode ser usado em toda a página dentro do conteúdo de seção arbitrário; deve ser usado uma vez e somente uma vez. Ou melhor, pode ser usado várias vezes em um documento, mas apenas um <main>elemento deve estar visível por vez; todos os outros devem estar ocultos com o hiddenatributo, que basicamente age como display: none;no CSS. Se você pensar sobre isso, isso sugere um padrão bastante útil para pré-carregar visualizações em um aplicativo: criar um novo <main hidden>conteúdo que o usuário provavelmente verá em seguida (por exemplo, o próximo artigo de uma série, o próximo slide em uma apresentação de slides , etc.), e quando o usuário clicar no link / botão para carregar essa visualização, troque a corrente <main>com a pré-carregada, alternandohidden atributo em ambos.

Antes de continuar, vamos pausar e revisar o exemplo acima. Veja como seria se nós usamos <header>, <main>e <footer>para a estrutura principal do artigo:

<header>
    <h1>Super duper best blog ever</h1>
    ...
</header>
<main>
    <h2>Why you should buy more cheeses than you currently do</h2>
    ...
</main>
<footer>
    Contact us!
    <div class="contact-info">this.is.us@example.com</div>
</footer>

Isso é muito melhor já! Mas ainda há muito trabalho a fazer.

Divida: <section>

Portanto, temos um esboço básico para nossa página: um cabeçalho, um rodapé e uma região de conteúdo principal. Agora é hora de adicionar um pouco desse conteúdo doce e doce.

Normalmente você vai querer dividir seu conteúdo em seções , especialmente para conteúdo de texto em massa como este artigo, porque ninguém gosta de ler paredes de texto impenetráveis.

Ninguém gosta de uma parede de texto

É aí que <section>entra. Este é o mais simples em termos de regras: estruturalmente falando, é basicamente apenas um <div>com significado semântico especial. A <section>começa uma nova região de “conteúdo de secionamento”, para que possa ter sua própria <header>e / ou <footer>.

Qual é a diferença, então, entre um <section>e um regular <div>, e quando você deve usar cada um? Bem, permita-me citar a especificação mais uma vez:

NOTA: 
O <section>elemento não é um elemento de contêiner genérico. Quando um elemento é necessário apenas para fins de estilo ou como uma conveniência para o script, os autores são encorajados a usar o <div>elemento. Uma regra geral é que o <section>elemento é apropriado apenas se o conteúdo do elemento fosse listado explicitamente no esboço do documento . 
– https://www.w3.org/TR/html5/sections.html#the-section-element

Você sabe, rapidamente, as especificações do HTML5 são realmente legíveis. É uma das especificações mais legíveis por aí. Toda vez que eu olho para uma resposta rápida, eu inevitavelmente aprendo algo inesperado e útil, especialmente se eu começar a clicar em links. Experimenta algum tempo!

Portanto, resumindo, se você listar essa parte do documento no índice, use a <section>. Se não, use um <div>ou outra coisa.

Indicadores de Conteúdo

Ok, então temos uma estrutura sólida para a nossa página. Em vez de apenas lançar <div>todo o conteúdo, marcamos explicitamente a região de conteúdo principal da página e anunciamos cabeçalhos, rodapés e seções. Mas definitivamente há mais semântica do que isso em nosso documento.

Vamos falar sobre alguns dos elementos adicionados em HTML5 que comunicam semântica de conteúdo em vez de estrutura .

A coisa toda: <article>

O <article>elemento é usado para representar uma região de conteúdo totalmente independente, algo que pode ser extraído da sua página e colocado em outro e ainda assim fazer sentido por conta própria. Isso pode ser um artigo literal ou uma postagem de blog, mas também pode ser usado em uma postagem de mídia social como um tweet ou uma postagem no mural do Facebook.

A especificação HTML5 recomenda que os artigos sempre tenham um título que identifique o que é, idealmente usando um elemento de título ( <h1>– <h6>). Um <article>também pode ter <header>, <footer>e <section>elementos, para que você realmente possa usá-lo para incorporar um fragmento de documento completo com toda a estrutura necessária dentro de outra página.

Para voltar ao exemplo do modo acima, vamos reescrever os class="article-*"elementos usando um <article>e alguns dos outros elementos que discutimos.

<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>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </section>
</article>

Não é uma tonelada mais legível do que a original? E mais uma vez, não é apenas mais fácil de ler, é muito mais útil para a tecnologia assistencial; robôs nem sempre conseguem descobrir seu padrão de nome de classe específico, mas eles podem seguir essa estrutura.

Como se locomover: <nav>

Este elemento é um pouco mais conhecido que outros. <nav>foi projetado para identificar claramente os principais blocos de navegação na página, os grupos de links que ajudam o usuário a encontrar o caminho do restante do site (por exemplo, um mapa do site ou lista de links no cabeçalho) ou a página atual índice).

Em nosso exemplo, vamos aplicar um <nav>a esse grupo de links no cabeçalho.

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/archive">Archive</a>
</nav>

Não altera a estrutura, mas você sabe o que é, em vez de precisar ler e processar o nome da classe <div>para descobrir, e mais importante, os robôs também podem encontrá-lo.

Entrando em contato: <address>

O último elemento que discutiremos é <address>. Este elemento destina-se a chamar informações de contato, e é frequentemente usado na página principal <footer>para marcar o endereço de correspondência, número de telefone, endereço de e-mail de atendimento ao cliente, etc. para uma empresa.

Curiosamente, as regras sobre como marcar o conteúdo dentro de um <address>elemento são deixadas em aberto. A especificação menciona que há várias outras especificações que lidam com isso e provavelmente está fora do escopo do próprio HTML para fornecer esse nível de granularidade.

Uma solução comum é o RDFa , também uma especificação do W3C , que usa atributos em tags para rotular os diferentes componentes dos dados. Veja o que o rodapé do nosso exemplo pode parecer quando marcado com <address>elementos e RDFa:

<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>

RDFa é reconhecidamente um pouco detalhado, mas é bastante útil para marcar dados. Se você estiver interessado em aprender mais sobre o RDFa, aqui estão alguns links:

• O primer RDFa do W3C
• Uma descrição de esquemas e links para vários deles no schema.org
• O LocalBusinessesquema usado acima

Conclusão

Ok, nós cobrimos muito, e vimos muito disso aplicado ao nosso exemplo em pedaços. Mas vamos juntar tudo e ver como é.

<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>
        <!-- cheesy content -->
    </section>
    <section>
        <header>
            <h2>Part 2: Cows are great</h2>
        </header>
        <!-- more cheesy content -->
    </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>

Se você me perguntar, isso é 100 vezes mais legível do que o exemplo original, e será 100 vezes mais eficaz para fins de SEO e acessibilidade também.

Estes não são de forma alguma os únicos elementos semânticos em HTML. Há muitos elementos adicionais que ajudam a marcar e estruturar seu conteúdo de texto, mídia incorporada, etc. Aqui estão alguns para verificar se você está gostando disso e se quer aprofundar mais. Você pode reconhecer alguns:

• <aside>
• <blockquote>
• <cite>
• <code>
• <data>
• <del>
• <figure>
• <ins>
• <time>
• <var>

E isso é só um começo! Como eu disse, quando você começa a ler as especificações do HTML, é difícil parar. É uma linguagem incrivelmente rica, e acho que as pessoas a subestimam com muita frequência.