Computação & Engenharia de Software

🌐 Capítulo 01: Introdução ao HTML5 Semântico e Estrutura de Documentos Web

Leitura de 3 min

🌐 Capítulo 01: Introdução ao HTML5 Semântico e Estrutura de Documentos Web

🎯 Objetivos da Aula

Ao final desta aula, você será capaz de:

  1. Compreender a papel da linguagem HTML5 na definição da estrutura e semântica de páginas web.
  2. Identificar a diferença fundamental entre Estrutura (HTML), Apresentação (CSS) e Comportamento (JavaScript).
  3. Escrever a estrutura mínima obrigatória de um documento HTML5 válido conforme os padrões do W3C.
  4. Utilizar as tags essenciais de metadados (<head>, <meta charset="UTF-8">, <title>) e conteúdo (<body>, <h1>, <p>).

🧠 1. As Três Camadas da Engenharia Web

Toda aplicação web moderna é construída através da separação clara de três responsabilidades:

flowchart TD
    subgraph WebApp ["Aplicação Web"]
        HTML["🌐 HTML5 (Estrutura Semântica)\nDefine os elementos, textos, formulários e imagens."]
        CSS["🎨 CSS3 (Apresentação Visual)\nDefine cores, tipografia, layout Flexbox e Grid."]
        JS["⚡ JavaScript (Comportamento Interativo)\nTrata eventos, altera o DOM e consome APIs."]
    end
    
    HTML --> CSS
    HTML --> JS
  • HTML5 (HyperText Markup Language): Não é uma linguagem de programação, mas sim uma linguagem de marcação de texto que utiliza marcadores chamados tags (<tag>conteúdo</tag>) para estruturar a informação.

💻 2. A Estrutura Mínima de um Documento HTML5

Todo arquivo HTML deve possuir a extensão .html e iniciar com a declaração do tipo de documento <!DOCTYPE html>.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- 1. Metadados do Documento (Nao visiveis no corpo da pagina) -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portal de Gestao Escolar - Início</title>
</head>
<body>
 
    <!-- 2. Conteudo Visivel da Pagina -->
    <h1>Sistema de Gestão de Alunos</h1>
    <p>Bem-vindo ao portal de cadastro e acompanhamento acadêmico.</p>
 
</body>
</html>

Explicação dos Elementos Principais:

  • <!DOCTYPE html>: Informa ao navegador web que o documento segue o padrão moderno HTML5.
  • <html lang="pt-br">: Elemento raiz do documento indicando o idioma principal para leitores de tela e motores de busca.
  • <head>: Contém metadados, codificação de caracteres (UTF-8), títulos e links para folhas de estilo CSS.
  • <body>: Contém todos os elementos visíveis na janela do navegador.

⚔️ 3. Desafios Práticos (Exercícios 30/50/20)

🥉 Nível Bronze (Fixação)

  1. Para que serve a tag <meta charset="UTF-8"> contida na seção <head> de um arquivo HTML?
  2. Qual a diferença entre a função da tag <title> e a tag <h1>?

🥈 Nível Prata (Aplicação)

  1. Escreva um arquivo HTML chamado pagina_inicial.html contendo a estrutura básica completa, um título principal <h1> com o nome do seu projeto, um subtítulo <h2> “Módulo de Acompanhamento” e um parágrafo <p> com uma breve descrição.

🥇 Nível Ouro (Desafio)

  1. Crie um arquivo HTML ficha_aluno.html que utilize tags de título <h1>, <h2>, parágrafos <p> e a tag de linha horizontal <hr> para exibir uma ficha cadastral formatada contendo Nome, Matrícula e Curso do aluno.

💡 Gabaritos Sanfonados de Resposta

💡 Ver Gabarito do Nível Bronze
  1. A tag <meta charset="UTF-8"> define a codificação de caracteres do documento, garantindo a exibição correta de acentos (á, é, ã) e caracteres especiais da língua portuguesa.
  2. A tag <title> define o título que aparece na aba/guia do navegador ou nos resultados do Google. A tag <h1> define o título principal visível dentro do corpo da página web.
💡 Ver Gabarito do Nível Prata & Ouro (Código HTML) 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ficha do Aluno - Portal</title>
</head>
<body>
    <h1>Portal de Cadastro de Alunos</h1>
    <hr>
    <h2>Dados Acadêmicos</h2>
    <p><strong>Nome:</strong> Carlos Silva</p>
    <p><strong>Matrícula:</strong> 20261001</p>
    <p><strong>Curso:</strong> Engenharia de Software</p>
</body>
</html>

📚 Referências Teóricas Oficiais

  • W3C RECOMMENDATION. HTML5 Specification — A vocabulary and associated APIs for HTML and XHTML (https://www.w3.org/TR/html52/).
  • MDN WEB DOCS. HTML: HyperText Markup Language Basics (Mozilla Developer Network).

⬅️ Voltar ao Sumário da Fase 03 | Próximo Capítulo (Estrutura e Tags Semânticas) ➡️

Visão de gráfico

Backlinks