HTML5 Moderno e Semântico

Base curricular do módulo:

estrutura de projetos;
workflow profissional;
organização de arquivos;
DevTools;
renderização do navegador;
uso de HTML semântico;
SEO técnico básico;
acessibilidade;
organização profissional do Front-end.

Objetivos do Módulo

Ao final deste módulo o estudante deverá ser capaz de:

construir páginas HTML5 modernas;
utilizar semântica corretamente;
estruturar documentos preparados para SEO;
produzir páginas acessíveis;
organizar navegação interna e externa;
utilizar imagens responsivas;
construir formulários modernos;
compreender boas práticas profissionais do HTML contemporâneo.

1. Estrutura Fundamental do HTML5

Fundamentação Teórica

O HTML5 é a linguagem de marcação responsável pela estrutura semântica das páginas Web.

O navegador interpreta o HTML e constrói o DOM (Document Object Model), conceito já estudado no Módulo 1.

Toda página HTML moderna deve possuir:

declaração DOCTYPE;
elemento <html>;
<head>;
<body>;
codificação UTF-8;
viewport responsiva;
título;
favicon.

Estrutura Básica Profissional

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Título da Página</title>

    <link rel="stylesheet" href="style.css">
    <link rel="icon" href="favicon.png">
</head>
<body>

</body>
</html>

Explicação dos Elementos

Elemento	Função
`<!DOCTYPE html>`	Informa HTML5 ao navegador
`<html>`	Elemento raiz
`<head>`	Metadados da página
`<meta charset>`	Define UTF-8
`<meta viewport>`	Responsividade
`<title>`	Título exibido na aba
`<body>`	Conteúdo visível
`favicon`	Ícone da aba

Exemplo 1 — Página Inicial Profissional

Estrutura de Pastas

projeto/
│
├── index.html
├── style.css
└── favicon.png

Arquivo: `index.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 IFPE</title>

    <link rel="stylesheet" href="style.css">

    <link rel="icon" href="favicon.png">

</head>
<body>

    <header>
        <h1>Portal Acadêmico</h1>
    </header>

    <main>
        <p>Bem-vindo ao portal institucional.</p>
    </main>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

header {
    background-color: #004b8d;
    color: white;
    padding: 20px;
}

main {
    padding: 20px;
}

Exemplo 2 — Página Responsiva Base

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

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

    <title>Layout Responsivo</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main class="container">

        <h1>HTML5 Moderno</h1>

        <p>
            Estrutura preparada para dispositivos móveis.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: sans-serif;
}

.container {
    width: min(90%, 900px);
    margin: auto;
    padding: 20px;
}

Discussão Técnica

A meta viewport:

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

é obrigatória em aplicações modernas porque:

adapta a largura ao dispositivo;
evita zoom automático;
melhora responsividade;
melhora SEO mobile.

Referências

Livros

HTML & CSS: Design and Build Websites
Learning Web Design

Sites

2. Texto e Conteúdo

Fundamentação Teórica

HTML não é apenas apresentação visual.

O HTML moderno possui:

significado semântico;
hierarquia de conteúdo;
estrutura lógica;
impacto direto em:
- SEO;
- acessibilidade;
- leitores de tela;
- indexação.

Headings

Os headings (h1 até h6) criam a hierarquia da página.

Boa prática:

apenas um h1 principal;
headings organizados em ordem lógica.

Exemplo 1 — Estrutura Semântica de Conteúdo

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Artigo HTML5</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>Introdução ao HTML5</h1>

        <h2>O que é HTML?</h2>

        <p>
            HTML é a linguagem responsável
            pela estrutura das páginas Web.
        </p>

        <h2>Principais Recursos</h2>

        <ul>
            <li>Semântica</li>
            <li>Acessibilidade</li>
            <li>SEO</li>
        </ul>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
}

h1 {
    color: #003366;
}

ul {
    background-color: #f0f0f0;
    padding: 20px;
}

Exemplo 2 — Citações e Marcações Semânticas

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Citações HTML</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <article>

        <h1>Tim Berners-Lee</h1>

        <blockquote>
            A Web foi criada para ser universal.
        </blockquote>

        <p>
            O <strong>HTML5</strong> trouxe
            recursos modernos para a Web.
        </p>

        <p>
            A linguagem utiliza entidades como:
            &copy; &lt; &gt;
        </p>

    </article>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Georgia, serif;
    padding: 40px;
}

blockquote {
    border-left: 5px solid #999;
    padding-left: 20px;
    font-style: italic;
    color: #555;
}

Entidades HTML Comuns

Entidade	Resultado
`©`	©
`<`	<
`>`	>
`&`	&

Referências

Livros

HTML5: The Missing Manual

Sites

3. Links e Navegação

Fundamentação Teórica

Links são a base estrutural da Web.

O elemento <a> permite:

navegação entre páginas;
navegação interna;
acesso a recursos externos;
criação de menus.

Exemplo 1 — Links Relativos e Absolutos

Estrutura

site/
│
├── index.html
├── sobre.html
└── style.css

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Navegação</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <nav>

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

        <a href="https://developer.mozilla.org/pt-BR/"
           target="_blank">
            MDN
        </a>

    </nav>

</body>
</html>

Arquivo: `style.css`

nav {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: #222;
}

a {
    color: white;
    text-decoration: none;
}

Exemplo 2 — Navegação Interna com Âncoras

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Âncoras</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <nav>
        <a href="#secao1">Seção 1</a>
        <a href="#secao2">Seção 2</a>
    </nav>

    <main>

        <section id="secao1">
            <h2>Seção 1</h2>
            <p>Conteúdo inicial.</p>
        </section>

        <section id="secao2">
            <h2>Seção 2</h2>
            <p>Conteúdo final.</p>
        </section>

    </main>

</body>
</html>

Arquivo: `style.css`

section {
    min-height: 100vh;
    padding: 40px;
}

nav {
    position: sticky;
    top: 0;
    background-color: #333;
    padding: 20px;
}

a {
    color: white;
    margin-right: 20px;
}

Referências

Sites

MDN Links Guide

Livros

Learning Web Design

4. Imagens e Multimídia

Fundamentação Teórica

A Web moderna exige:

imagens responsivas;
carregamento eficiente;
acessibilidade;
adaptação a múltiplas telas.

Conceitos fundamentais:

srcset;
picture;
figure;
figcaption.

Exemplo 1 — Imagem Responsiva

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Imagem Responsiva</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <figure>

        <img
            src="imagem.jpg"
            srcset="
                imagem-480.jpg 480w,
                imagem-800.jpg 800w,
                imagem-1200.jpg 1200w
            "
            sizes="
                (max-width: 600px) 100vw,
                800px
            "
            alt="Paisagem natural">

        <figcaption>
            Exemplo de imagem responsiva.
        </figcaption>

    </figure>

</body>
</html>

Arquivo: `style.css`

img {
    width: 100%;
    display: block;
}

figure {
    max-width: 800px;
    margin: auto;
}

Exemplo 2 — Uso de Vídeo e Áudio

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Multimídia</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <video controls width="600">

            <source src="video.mp4"
                    type="video/mp4">

        </video>

        <audio controls>

            <source src="audio.mp3"
                    type="audio/mpeg">

        </audio>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: sans-serif;
    padding: 40px;
}

video,
audio {
    display: block;
    margin-bottom: 30px;
}

Discussão Técnica

O atributo alt:

alt="Paisagem natural"

é obrigatório para:

acessibilidade;
leitores de tela;
SEO;
fallback de carregamento.

Referências

Sites

Livros

Responsive Web Design with HTML5 and CSS

5. HTML Semântico Moderno

Fundamentação Teórica

O HTML5 introduziu elementos semânticos para melhorar:

acessibilidade;
SEO;
legibilidade;
manutenção;
interpretação por mecanismos de busca.

Estrutura Semântica Moderna

header
nav
main
section
article
aside
footer

Exemplo 1 — Estrutura Institucional

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Semântica</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <header>
        <h1>Portal Acadêmico</h1>
    </header>

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

    <main>

        <section>

            <h2>Notícias</h2>

            <article>
                <h3>Evento de Tecnologia</h3>
                <p>Evento acontecerá em junho.</p>
            </article>

        </section>

    </main>

    <aside>
        Publicidade institucional.
    </aside>

    <footer>
        © 2026 IFPE
    </footer>

</body>
</html>

Arquivo: `style.css`

body {
    margin: 0;
    font-family: Arial;
}

header,
nav,
footer {
    background-color: #003366;
    color: white;
    padding: 20px;
}

main,
aside {
    padding: 20px;
}

Exemplo 2 — Blog Semântico

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Blog</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <article>

            <header>
                <h1>HTML5 Moderno</h1>
            </header>

            <section>
                <p>Conteúdo principal.</p>
            </section>

            <footer>
                Publicado em maio de 2026.
            </footer>

        </article>

    </main>

</body>
</html>

Arquivo: `style.css`

article {
    max-width: 700px;
    margin: auto;
    padding: 30px;
    border: 1px solid #ddd;
}

Referências

Sites

MDN HTML Semantics

Livros

HTML5 for Web Designers

6. Formulários Modernos

Fundamentação Teórica

Formulários HTML5 modernos oferecem:

validação nativa;
novos tipos de input;
melhor experiência do usuário;
maior acessibilidade.

Exemplo 1 — Formulário Profissional

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Formulário</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <form>

        <label for="nome">
            Nome
        </label>

        <input
            type="text"
            id="nome"
            required
            placeholder="Digite seu nome">

        <label for="email">
            E-mail
        </label>

        <input
            type="email"
            id="email"
            required
            placeholder="usuario@email.com">

        <button type="submit">
            Enviar
        </button>

    </form>

</body>
</html>

Arquivo: `style.css`

form {
    max-width: 400px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

input,
button {
    padding: 12px;
}

Exemplo 2 — Inputs HTML5

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <title>Inputs HTML5</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <form>

        <input type="date">

        <input type="color">

        <input type="range">

        <input type="number"
               min="0"
               max="10">

    </form>

</body>
</html>

Arquivo: `style.css`

body {
    padding: 40px;
}

form {
    display: grid;
    gap: 20px;
}

Discussão Técnica

Boas práticas:

sempre utilizar label;
evitar placeholders como substitutos de labels;
utilizar required;
utilizar tipos corretos;
melhorar acessibilidade.

Referências

Sites

MDN HTML Forms Guide

Livros

Forms that Work

7. SEO Técnico Básico

Fundamentação Teórica

SEO (Search Engine Optimization) é o conjunto de práticas utilizadas para melhorar:

indexação;
relevância;
compreensão da página pelos mecanismos de busca.

O HTML semântico influencia diretamente o SEO.

Exemplo 1 — Estrutura SEO Básica

Arquivo: `index.html`

<!DOCTYPE html>
<html lang="pt-BR">
<head>

    <meta charset="UTF-8">

    <meta name="description"
          content="Curso moderno de HTML5 e CSS3">

    <title>Curso HTML5</title>

    <link rel="stylesheet" href="style.css">

</head>
<body>

    <main>

        <h1>Curso de HTML5 Moderno</h1>

        <p>
            Aprenda HTML5 semântico e CSS3 moderno.
        </p>

    </main>

</body>
</html>

Arquivo: `style.css`

body {
    font-family: Arial;
    padding: 40px;
}

Exemplo 2 — Hierarquia Correta de Headings

Arquivo: `index.html`

<main>

    <h1>Portal de Tecnologia</h1>

    <section>

        <h2>Desenvolvimento Web</h2>

        <article>

            <h3>HTML5 Moderno</h3>

        </article>

    </section>

</main>

Arquivo: `style.css`

h1 {
    color: #003366;
}

h2 {
    color: #005599;
}

Discussão Técnica

Evitar:

múltiplos h1 sem necessidade;
headings fora de ordem;
excesso de divs sem semântica;
ausência de alt em imagens.

Ferramentas Profissionais

Estratégia Pedagógica Recomendada

Sequência Recomendada

Estrutura fundamental;
Texto e semântica;
Navegação;
Multimídia;
HTML semântico;
Formulários;
SEO básico;
Mini projeto integrador.

Mini Projeto Sugerido

Construir:

página institucional;
responsiva;
semântica;
contendo:
- menu;
- imagens;
- formulário;
- estrutura SEO;
- HTML5 moderno.

Bibliografia Geral do Módulo

Livros Fundamentais

HTML & CSS: Design and Build Websites
Learning Web Design
Responsive Web Design with HTML5 and CSS
HTML5 for Web Designers

Plataformas e Documentação

Fim da Aula 03

Linguagem e Técnica de Programação I – Aula 03

HTML5 Moderno e Semântico

Objetivos do Módulo

1. Estrutura Fundamental do HTML5

Fundamentação Teórica

Estrutura Básica Profissional

Explicação dos Elementos

Exemplo 1 — Página Inicial Profissional

Estrutura de Pastas

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Página Responsiva Base

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Livros

Sites

2. Texto e Conteúdo

Fundamentação Teórica

Headings

Exemplo 1 — Estrutura Semântica de Conteúdo

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Citações e Marcações Semânticas

Arquivo: index.html

Arquivo: style.css

Entidades HTML Comuns

Referências

Livros

Sites

3. Links e Navegação

Fundamentação Teórica

Exemplo 1 — Links Relativos e Absolutos

Estrutura

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Navegação Interna com Âncoras

Arquivo: index.html

Arquivo: style.css

Referências

Sites

Livros

4. Imagens e Multimídia

Fundamentação Teórica

Exemplo 1 — Imagem Responsiva

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Uso de Vídeo e Áudio

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Sites

5. HTML Semântico Moderno

Fundamentação Teórica

Estrutura Semântica Moderna

Exemplo 1 — Estrutura Institucional

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Blog Semântico

Arquivo: index.html

Arquivo: style.css

Referências

Sites

Livros

6. Formulários Modernos

Fundamentação Teórica

Exemplo 1 — Formulário Profissional

Arquivo: index.html

Arquivo: style.css

Exemplo 2 — Inputs HTML5

Arquivo: index.html

Arquivo: style.css

Discussão Técnica

Referências

Sites

Livros

7. SEO Técnico Básico

Fundamentação Teórica

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`

Arquivo: `index.html`

Arquivo: `style.css`