HTML Semântico

🧠

COMO FUNCIONA

Você vai aprender semântica fazendo

HTML Semântico não significa simplesmente trocar uma div por section. Significa escolher uma tag que descreva corretamente o papel daquele conteúdo dentro da página.

Nesta aula você vai aprender a diferença entre main, section, article e aside com exemplos concretos.

📌 Regra principal: escolha a tag pelo significado do conteúdo, e não apenas pela aparência que deseja obter na tela.

SEU PROGRESSO

Aprendendo HTML Semântico

1 Conceito

2 Estrutura

3 Header/Nav

4 Main

5 Section

6 Article

7 Aside/Footer

8 Outras Tags

9 Página Completa

10 Projeto

CONCEITO

O que é HTML Semântico?

Entendendo o significado das tags.

HTML Semântico é a utilização de elementos HTML que possuem um significado claro sobre o conteúdo que estão representando.

Por exemplo, quando escrevemos <nav>, estamos informando ao navegador, às tecnologias assistivas e aos mecanismos de busca que aquele bloco representa uma área de navegação.

Uma <div> poderia ser utilizada visualmente para criar a mesma área, mas ela não informa qual é a função daquele conteúdo.

exemplo.html HTML

<header>
    <h1>Meu Site</h1>
</header>

<nav>
    <ul>
        <li>
            <a href="#">Início</a>
        </li>

        <li>
            <a href="#">Sobre</a>
        </li>
    </ul>
</nav>

<main>

    <section>
        <h2>Sobre o site</h2>

        <p>
            Conteúdo principal da página.
        </p>
    </section>

</main>

<footer>
    Rodapé do site.
</footer>

🌐 RESULTADO

Meu Site

Sobre o site

Conteúdo principal da página.

💡 Pense assim: semântica é dar um nome e uma função clara para cada parte importante da página.

ESTRUTURA

Entendendo a estrutura de uma página

Como as partes da página se relacionam.

Uma página profissional normalmente possui uma estrutura organizada em grandes regiões.

Não existe uma única estrutura obrigatória para todos os sites. A organização depende do conteúdo.

Porém, uma estrutura muito comum é: header → nav → main → section/article/aside → footer .

<header> — Cabeçalho

<nav> — Navegação

<main> — Conteúdo principal

<section> — Seção temática

<article> — Conteúdo independente

<aside> — Conteúdo complementar

<header> Cabeçalho de uma página ou de uma seção.

<main> Conteúdo principal e único da página.

<footer> Informações finais da página ou seção.

NAVEGAÇÃO

header, nav, ul e li

Como construir corretamente a navegação.

A tag <header> representa um cabeçalho. Pode conter logotipo, título, apresentação e outros elementos introdutórios.

A tag <nav> representa um conjunto de links destinado à navegação.

É muito comum encontrarmos a estrutura: nav → ul → li → a .

O motivo é simples: <nav> identifica a área de navegação; <ul> cria uma lista; <li> representa cada item da lista; <a> representa o link que o usuário pode acessar.

Portanto, não é o nav que "precisa" obrigatoriamente de li. Essa é uma estrutura muito utilizada e recomendada quando a navegação é organizada como uma lista de links.

navegacao.html HTML

<nav aria-label="Navegação principal">

    <ul>

        <li>
            <a href="index.html">
                Início
            </a>
        </li>

        <li>
            <a href="sobre.html">
                Sobre
            </a>
        </li>

        <li>
            <a href="servicos.html">
                Serviços
            </a>
        </li>

        <li>
            <a href="contato.html">
                Contato
            </a>
        </li>

    </ul>

</nav>

🌐 RESULTADO

📌 Regra prática: use nav para blocos de navegação importantes, como menu principal, navegação de documentação ou navegação de uma área do site.

CONTEÚDO PRINCIPAL

A tag main

Onde fica o conteúdo principal da página?

A tag <main> representa o conteúdo principal da página.

Pense no main como aquilo que o visitante realmente veio consumir.

Em um site de notícias, por exemplo, o conteúdo principal pode ser a lista de notícias.

Em um site de cursos, o conteúdo principal pode ser a aula.

Em uma página de produto, o conteúdo principal pode ser o produto e suas informações.

⚠️ Atenção: normalmente utilizamos apenas um <main> por página.

main.html HTML

<body>

    <header>
        <h1>Portal de Notícias</h1>
    </header>

    <nav>
        <ul>
            <li>
                <a href="#">Início</a>
            </li>

            <li>
                <a href="#">Tecnologia</a>
            </li>
        </ul>
    </nav>

    <main>

        <h2>
            Notícias de Tecnologia
        </h2>

        <p>
            Este é o conteúdo principal da página.
        </p>

    </main>

    <footer>
        Portal de Notícias
    </footer>

</body>

🌐 RESULTADO

Portal de Notícias

Notícias de Tecnologia

Este é o conteúdo principal da página.

🧠 Pergunta que ajuda: "Qual é o conteúdo principal que justifica a existência desta página?" Esse conteúdo normalmente estará dentro de main.

ORGANIZAÇÃO

A tag section

Dividindo o conteúdo por assuntos.

A tag <section> representa uma seção temática de conteúdo.

Imagine uma página sobre uma empresa. Ela pode possuir: História , Serviços , Equipe e Contato .

Cada um desses assuntos pode ser uma section.

Uma boa regra didática é: se você consegue dar um nome ao assunto daquela região, provavelmente está diante de uma seção temática.

section.html HTML

<main>

    <section>

        <h2>
            Nossa História
        </h2>

        <p>
            A empresa foi fundada em 2020.
        </p>

    </section>


    <section>

        <h2>
            Nossos Serviços
        </h2>

        <p>
            Desenvolvimento de sites e sistemas.
        </p>

    </section>


    <section>

        <h2>
            Nossa Equipe
        </h2>

        <p>
            Conheça nossa equipe profissional.
        </p>

    </section>

</main>

🌐 RESULTADO

Nossa História

A empresa foi fundada em 2020.

Nossos Serviços

Desenvolvimento de sites e sistemas.

Nossa Equipe

Conheça nossa equipe profissional.

📌 Importante: section não significa simplesmente "uma caixa". Ela deve representar uma seção temática do conteúdo.

CONTEÚDO INDEPENDENTE

A tag article

Quando um conteúdo pode existir sozinho.

A tag <article> representa um conteúdo independente.

Pense em algo que poderia ser distribuído, compartilhado ou reutilizado independentemente do restante da página.

Exemplos:

uma notícia;
uma publicação de blog;
um comentário;
um produto;
uma postagem;
um artigo técnico.

Um dos melhores exemplos é um portal de notícias. Cada notícia pode ser um article.

article.html HTML

<main>

    <section>

        <h2>
            Notícias de Tecnologia
        </h2>


        <article>

            <h3>
                Nova tecnologia chega ao mercado
            </h3>

            <p>
                Uma nova tecnologia foi apresentada
                nesta semana.
            </p>

        </article>


        <article>

            <h3>
                Inteligência Artificial cresce
            </h3>

            <p>
                Empresas estão utilizando IA
                em novos projetos.
            </p>

        </article>

    </section>

</main>

🌐 RESULTADO

Notícias de Tecnologia

Nova tecnologia chega ao mercado

Uma nova tecnologia foi apresentada nesta semana.

Inteligência Artificial cresce

Empresas estão utilizando IA em novos projetos.

📰

Pense em notícia

Se o conteúdo pudesse ser publicado individualmente como uma notícia, article é um forte candidato.

📦

Conteúdo independente

O article deve possuir sentido próprio, mesmo quando separado do restante da página.

DIFERENÇA FUNDAMENTAL

main × section × article × aside

A dúvida que mais confunde quem está começando.

Agora vamos resolver definitivamente a diferença entre essas quatro tags.

<main> É o conteúdo principal da página. Normalmente existe um por página.

<section> Agrupa conteúdo relacionado a um determinado assunto.

<article> Representa um conteúdo independente que possui sentido próprio.

<aside> Contém conteúdo complementar ao conteúdo principal.

comparacao.html HTML

<main>

    <section>

        <h2>
            Notícias
        </h2>


        <article>

            <h3>
                Notícia 01
            </h3>

            <p>
                Conteúdo independente.
            </p>

        </article>


        <article>

            <h3>
                Notícia 02
            </h3>

            <p>
                Outro conteúdo independente.
            </p>

        </article>

    </section>


    <aside>

        <h2>
            Mais lidos
        </h2>

        <ul>

            <li>
                Tecnologia
            </li>

            <li>
                Programação
            </li>

        </ul>

    </aside>

</main>

🌐 COMO PENSAR

MAIN "Este é o assunto principal desta página."

SECTION "Dentro do conteúdo principal, estou tratando deste assunto."

ARTICLE "Este conteúdo pode ser entendido sozinho."

ASIDE "Este conteúdo ajuda ou complementa o assunto principal, mas não é essencial para entendê-lo."

🧠 Exemplo mental: imagine um jornal.

main = todo o conteúdo principal do jornal.
section = uma editoria, como Tecnologia.
article = cada notícia.
aside = "Mais lidos", publicidade ou conteúdo complementar.

OUTRAS TAGS SEMÂNTICAS

figure, figcaption, time e address

Mais elementos para enriquecer a estrutura.

HTML Semântico não se limita a header, main, section, article e footer.

Existem diversas outras tags que ajudam a explicar o significado do conteúdo.

outras-tags.html HTML

<figure>

    <img src="imagens/equipe.jpg" alt="Equipe de desenvolvimento reunida">

    <figcaption>
        Equipe de Desenvolvimento Web
    </figcaption>

</figure>


<p>

    Publicado em

    <time datetime="2026-08-16">
        16 de agosto de 2026
    </time>

</p>


<address>

    SENAI
    <br>
    São Paulo - SP
    <br>
    contato@exemplo.com

</address>

🌐 RESULTADO

🖼️ Imagem da equipe

Equipe de Desenvolvimento Web

Publicado em 16 de agosto de 2026

SENAI
São Paulo - SP
contato@exemplo.com

<figure> Agrupa conteúdo ilustrativo, como imagem, gráfico ou diagrama.

<figcaption> Cria uma legenda para o conteúdo de figure.

<time> Representa uma data ou horário.

<address> Informações de contato relacionadas ao conteúdo.

LABORATÓRIO

Construindo uma página semântica completa

Agora vamos juntar tudo.

Nesta etapa vamos montar uma estrutura completa de página.

Observe principalmente a relação entre main, section, article e aside.

A ideia é que você consiga copiar este código para seu próprio index.html e começar a construir a partir dele.

index.html HTML

<!DOCTYPE html>

<html lang="pt-BR">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>
        Portal de Tecnologia
    </title>

</head>


<body>


    <header>

        <h1>
            Portal de Tecnologia
        </h1>

        <p>
            Informação e conhecimento.
        </p>

    </header>


    <nav aria-label="Navegação principal">

        <ul>

            <li>
                <a href="#">
                    Início
                </a>
            </li>

            <li>
                <a href="#">
                    Programação
                </a>
            </li>

            <li>
                <a href="#">
                    Segurança
                </a>
            </li>

            <li>
                <a href="#">
                    Contato
                </a>
            </li>

        </ul>

    </nav>


    <main>


        <section>

            <h2>
                Últimas Notícias
            </h2>


            <article>

                <h3>
                    HTML Semântico
                </h3>

                <p>
                    Aprenda a estruturar páginas
                    corretamente.
                </p>

                <time datetime="2026-08-16">
                    16 de agosto de 2026
                </time>

            </article>


            <article>

                <h3>
                    Segurança Web
                </h3>

                <p>
                    Conheça os principais riscos
                    de aplicações web.
                </p>

                <time datetime="2026-08-15">
                    15 de agosto de 2026
                </time>

            </article>

        </section>


        <aside>

            <h2>
                Conteúdo complementar
            </h2>


            <ul>

                <li>
                    Cursos recomendados
                </li>

                <li>
                    Artigos mais lidos
                </li>

                <li>
                    Materiais para estudo
                </li>

            </ul>

        </aside>


    </main>


    <footer>

        <p>
            &copy; 2026 Portal de Tecnologia.
        </p>


        <address>

            contato@exemplo.com

        </address>

    </footer>


</body>

</html>

🌐 SIMULAÇÃO DA PÁGINA

Portal de Tecnologia
Informação e conhecimento.

Últimas Notícias

Aprenda a estruturar páginas corretamente.

Segurança Web

Conheça os principais riscos de aplicações web.

🚀 Agora observe: cada tag possui uma responsabilidade.

Isso torna o HTML mais fácil de entender, manter e interpretar.

DESAFIO FINAL

🚀 Crie uma página HTML Semântica

Agora você deverá criar uma página completa utilizando as tags semânticas estudadas. O objetivo não é simplesmente fazer a página "ficar bonita". O objetivo é organizar corretamente o significado de cada conteúdo.

01 Estrutura html, head e body

02 Cabeçalho header

03 Navegação nav, ul, li e a

04 Conteúdo main e section

05 Conteúdo independente article

06 Complemento aside

🎯 Objetivo: crie um site sobre tecnologia, sua profissão, seu curso, uma empresa, um hobby ou qualquer outro assunto.

O site deverá utilizar corretamente: header, nav, main, section, article, aside e footer.

O aluno deverá criar

Um cabeçalho.
Um menu de navegação.
Um conteúdo principal.
Pelo menos duas sections.

Também deverá utilizar

Pelo menos dois articles.
Um aside.
Um footer.
Listas e links.

📚 O que você aprendeu

✅ HTML Semântico

✅ header

✅ nav

✅ ul e li

✅ main

✅ section

✅ article

✅ aside

✅ footer

✅ figure

✅ figcaption

✅ time

✅ address

✅ Estrutura profissional

✅ Acessibilidade

🚀 Projeto final

🎓

Aula concluída!

Você aprendeu como estruturar uma página HTML utilizando elementos semânticos.

O mais importante agora é praticar e escolher cada tag de acordo com o significado do conteúdo.