Como Escrever HTML Semântico

Escrever HTML semântico é uma prática essencial para criar páginas web mais acessíveis e organizadas. Neste artigo, vamos explorar o que é HTML semântico, por que ele é importante e como utilizá-lo em seus projetos.

O que é HTML Semântico?

HTML semântico refere-se ao uso de tags HTML que transmitem claramente o significado do conteúdo contido nelas. Em vez de usar tags genéricas como <div> e <span> para tudo, o HTML semântico utiliza tags específicas como <header>, <article>, <nav>, entre outras. Essas tags ajudam a descrever a estrutura e o propósito do conteúdo de uma página web.

Por que Usar HTML Semântico?

Melhor Acessibilidade

O HTML semântico melhora a acessibilidade das páginas web para pessoas com deficiência. Leitores de tela e outros dispositivos assistivos podem interpretar melhor o conteúdo quando as tags semânticas são usadas corretamente.

SEO (Otimização para Motores de Busca)

Os motores de busca, como o Google, valorizam páginas que utilizam HTML semântico, pois essas páginas são mais fáceis de entender e indexar. Isso pode resultar em melhores classificações nos resultados de pesquisa.

Manutenção Facilitada

Utilizar HTML semântico torna o código mais fácil de ler e manter. Desenvolvedores que trabalham em equipe ou que revisitam seu próprio código depois de algum tempo podem entender rapidamente a estrutura e o propósito do conteúdo.

Principais Tags Semânticas

<header>

A tag <header> é usada para definir a seção de cabeçalho de uma página ou de uma seção da página. Ela geralmente contém títulos, logotipos, menus de navegação e outros elementos introdutórios.

<header>
    <h1>Meu Site</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">Sobre</a></li>
            <li><a href="#contact">Contato</a></li>
        </ul>
    </nav>
</header>

<nav>

A tag <nav> é usada para definir um conjunto de links de navegação. Isso ajuda os motores de busca e os leitores de tela a identificar áreas de navegação da página.

<nav>
    <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#services">Serviços</a></li>
        <li><a href="#contact">Contato</a></li>
    </ul>
</nav>

<main>

A tag <main> especifica o conteúdo principal da página. Deve haver apenas um elemento <main> por página e ele deve conter o conteúdo exclusivo e essencial.

<main>
    <h2>Bem-vindo ao Nosso Site</h2>
    <p>Este é o conteúdo principal da página.</p>
</main>

<section>

A tag <section> é usada para agrupar conteúdo relacionado. Cada seção deve ter um título que descreva seu propósito.

<section>
    <h2>Seção de Notícias</h2>
    <article>
        <h3>Notícia 1</h3>
        <p>Conteúdo da notícia 1.</p>
    </article>
    <article>
        <h3>Notícia 2</h3>
        <p>Conteúdo da notícia 2.</p>
    </article>
</section>

<article>

A tag <article> é usada para conteúdo independente que faz sentido por si só, como postagens de blog, artigos de notícias ou entradas de fórum.

<article>
    <h2>Título do Artigo</h2>
    <p>Conteúdo do artigo.</p>
</article>

<aside>

A tag <aside> é usada para conteúdo relacionado que não faz parte do fluxo principal, como barras laterais, caixas de informações e anúncios.

<aside>
    <h2>Informações Adicionais</h2>
    <p>Este é um conteúdo relacionado, mas separado do conteúdo principal.</p>
</aside>

<footer>

A tag <footer> define o rodapé de uma página ou de uma seção da página. Ele geralmente contém informações sobre o autor, links de navegação adicionais e informações de contato.

<footer>
    <p>&copy; 2024 Meu Site. Todos os direitos reservados.</p>
</footer>

Conclusão

Escrever HTML semântico é uma prática fundamental para criar páginas web acessíveis, bem-organizadas e otimizadas para motores de busca. Utilizando tags semânticas, você melhora a experiência do usuário e a manutenção do código. Comece a aplicar essas práticas em seus projetos e veja a diferença que o HTML semântico pode fazer. Este artigo faz parte da nossa serie de Roadmap para se tornar um desenvolvedor web, confira o Roadmap.sh completo.

Você também pode ler mais artigos como este em nosso blog.