Introdução ao HTML

Olá, futuro desenvolvedor web! Você já se perguntou sobre os bastidores da criação de uma página que
você visita diariamente? Existe, sim, uma linguagem fundamental em que todo o design e conteúdo
ganham forma. Neste vídeo, você iniciará uma jornada fascinante para desvendar esse universo.
Exploraremos a arquitetura essencial de uma página web e detalharemos os elementos cruciais que a
compõem, construindo a base para o seu conhecimento digital. Prepare-se para entender como a magia
da internet acontece!

Faça o download do arquivo

Ponto de Partida
Nesta aula, você embarcará em uma jornada de aprendizado focada em três pilares essenciais para a
construção de páginas web: o Conceito de Marcação, a Estrutura Básica do Documento e os
Elementos Fundamentais. Esses tópicos são a base para qualquer pessoa que deseja compreender e
criar conteúdo para a internet.

Ao explorar o Conceito de Marcação, você desvendará a natureza das linguagens de marcação,

distinguindo-as de outras linguagens de programação e compreendendo o seu papel crucial na
organização e apresentação da informação na web. Você entenderá como a marcação atua nos
bastidores para dar significado e estrutura ao conteúdo que você visualiza diariamente.

Em seguida, você mergulhará na Estrutura Básica do Documento. Aqui, você descobrirá os elementos
absolutamente essenciais que formam o esqueleto de qualquer página HTML. Mais do que isso, você
terá a oportunidade de colocar a mão na massa e criar o seu primeiro documento HTML, um passo
fundamental para solidificar seu aprendizado e começar a dar vida às suas ideias na web.

Finalmente, em Elementos Fundamentais, você expandirá seu conhecimento com a introdução de

mais elementos que permitirão enriquecer significativamente o documento que você criou. Aprenderá a
inserir e formatar textos, a organizar o conteúdo em parágrafos coesos e a apresentar informações de
forma clara e estruturada por meio de listas.

Você já parou para refletir sobre o funcionamento prático de uma página web? Ao navegar pelo
Facebook, Instagram ou qualquer outro site, você já se questionou sobre a engrenagem por trás
daquela experiência visual e interativa?

No cenário atual, para os profissionais de programação, compreender o funcionamento interno de uma

página na web é mais do que um diferencial – é uma necessidade fundamental. Mesmo que em projetos
futuros você conte com a expertise de um designer para auxiliar na escolha de cores e tipografias, o
domínio de como aplicar esse design na construção da página é imprescindível.
Hoje, você tem a chance de dar o primeiro passo para desvendar esse universo fascinante. Você
começará a entender a arquitetura de uma página web, aprenderá a inserir e formatar textos de maneira
adequada e a organizar informações de forma lógica utilizando listas. Prepare-se para adquirir
conhecimentos que abrirão portas para um mundo de possibilidades na criação digital!

Vamos Começar!
Introdução ao HTML
Conceito de Marcação

Primeiro vamos entender o que é essa sopa de letrinhas chamada HTML.

HTML vem de HyperText Markup Language (Linguagem de Marcação de HiperTexto). Esta linguagem
nasceu no início da década de 1990 pelas mãos de Tim Berners-Lee enquanto trabalhava no CERN. A
ideia inicial era criar uma linguagem simples para estruturar documentos acadêmicos e facilitar o
compartilhamento de informações entre pesquisadores.

As primeiras versões do HTML eram bastante básicas, focadas em formatação de texto e criação de
links, mas ao longo dos anos, com a colaboração de diversos desenvolvedores e a padronização pelo
World Wide Web Consortium (W3C), o HTML incorporou recursos para incluir imagens, tabelas,
formulários e, mais recentemente com o HTML5, funcionalidades multimídia e semântica avançada,
tornando-se a espinha dorsal da vasta e complexa web que conhecemos hoje.

A HTML5 é o resultado da quinta maior revisão da linguagem HTML, considerada o novo padrão para Web,
que une o que há de melhor na HTML versão 4, XHTML e HTML DOM, e adicionará um conjunto de novos
recursos. Ela está a poucos passos de ser considerada um padrão oficial, apesar de nenhum dos
navegadores existentes darem suporte completo aos novos recursos. Estima-se que, em alguns anos, a
especificação do HTML5 estará completa e os navegadores darão suporte total a essa versão da linguagem.
Um fato curioso é que, antes mesmo de a HTML5 se tornar um padrão oficial, a W3C já trabalhava na HTML
5.1, o que nos permite crer que, talvez, a HTML5 não se torne um padrão oficial, mas sim a HTML5.1. (Teruel,
2013, p. 18.)

A principal diferença entre uma linguagem de marcação e uma linguagem de programação está no seu
propósito fundamental. Uma linguagem de marcação, como o HTML, é utilizada para estruturar e
apresentar informações. Ela usa um sistema de "tags" para descrever a função e a formatação do
conteúdo, indicando como ele deve ser exibido. O foco principal é na organização e na semântica do
documento, não em executar lógica ou algoritmos complexos.

Por outro lado, uma linguagem de programação, como Python, Java ou JavaScript, é projetada para
criar programas de computador que executam tarefas específicas. Linguagens de programação
possuem sintaxe e semântica bem definidas para construir algoritmos e implementar a lógica de
software.
Em resumo, a linguagem de marcação descreve como a informação deve ser apresentada, enquanto a
linguagem de programação define como processar esta informação.

Estrutura Básica do Documento

O alicerce de qualquer página web reside em sua estrutura básica HTML, um esqueleto essencial que
organiza e define o conteúdo a ser exibido.

Para construir essa estrutura fundamental, utilizamos um conjunto de elementos cruciais, cada um com
um papel bem definido na arquitetura do documento.

Entre esses elementos essenciais, destacam-se: <html>, <head>, <title> e <body>. Cada um desses
componentes desempenha uma função vital na forma como o navegador interpreta e apresenta a sua
página.

O elemento <html> representa a raiz de todo o documento HTML. Pense nele como o contêiner principa
que abraça todo o conteúdo da sua página, informando ao navegador que o arquivo em questão é um
documento HTML. Consequentemente, todos os demais elementos estruturais, como o <head> e o
<body>, devem estar aninhados dentro desta tag primordial.

Dentro do elemento <head>, encontramos as metainformações sobre o documento HTML. Essas

informações, embora não sejam renderizadas diretamente na tela para o usuário, são cruciais para o
correto funcionamento e interpretação da página. É aqui que especificamos o título que aparece na aba
do navegador com a tag <title>, estabelecemos vínculos com arquivos de estilo CSS que controlam a
aparência visual, definimos metadados importantes como a codificação de caracteres (garantindo a
correta exibição de diferentes alfabetos e símbolos) e a descrição da página (útil para mecanismos de
busca), além de podermos referenciar arquivos JavaScript que adicionam interatividade e dinamismo.

O elemento <title>, inserido obrigatoriamente dentro do <head>, tem a responsabilidade de definir o

título do seu documento. Este título é exibido na barra superior do navegador ou na aba em que a
página está aberta. Além disso, ele desempenha um papel significativo na otimização para mecanismos
de busca, sendo frequentemente utilizado como título principal nos resultados de pesquisa. Portanto,
escolher um título claro e conciso é fundamental.

Finalmente, o elemento <body> abriga todo o conteúdo visível da sua página HTML. É dentro desta
seção que você insere os textos que os usuários lerão, as imagens e vídeos que enriquecerão a
experiência visual, os links que permitirão a navegação entre páginas, as tabelas que organizarão
dados, os formulários que possibilitarão a interação e todos os outros elementos com os quais os
visitantes da sua página irão interagir diretamente. Em essência, o <body> é o palco onde a estrutura e
o conteúdo principal da sua presença online ganham vida.

Para ilustrar como esses elementos se unem na prática e formam a base de um documento HTML
funcional, veja um exemplo a seguir:

<html>
 <head>

<title>Minha Primeira Página</title>

</head>

<body>

</body>

</html>

Na nossa próxima aula, dedicaremos nossa atenção a um conceito fundamental na linguagem HTML:
definição de tags. Ao compreendermos a natureza e a função das tags, muitas das dúvidas que possam
ter surgido até agora começarão a se dissipar, e a lógica por trás da estruturação de um documento
HTML se tornará muito mais clara para você.

Se você já teve a oportunidade de visualizar o código-fonte de um documento HTML, talvez tenha

notado que, em nossos exemplos introdutórios, omitimos algumas informações e detalhes. É importante
ressaltar que, nesse estágio inicial do nosso aprendizado, o foco está em estabelecer definições
simplificadas e os pilares conceituais básicos. Contudo, à medida que avançarmos no curso,
expandiremos progressivamente seu conhecimento, explorando nuances e recursos mais avançados da
linguagem HTML. Tenha em mente que este é apenas o começo de uma jornada de descoberta, e
muitos aspectos fascinantes ainda serão explorados em detalhes.

Outra coisa importante de se notar é que os elementos que vimos acima têm início e fim:

<html>

...

</html>

Veja que usamos a / (barra) para “terminar” um elemento.

Siga em Frente...
Elementos Fundamentais
Quando estudamos HTML devemos prestar atenção na “semântica” do documento, mas o que é isso?

No início do uso do HTML, para se criar um design mais avançado utilizava-se tabelas. Obviamente as
tabelas deveriam ser usadas somente para exibição de dados tabulares, não para fazer design.
 Criava-se uma enorme tabela e agrupava-se o conteúdo em suas células, que eram formatadas diretamente
nos atributos dos elementos da tabela ou utilizando CSS. O resultado obtido era satisfatório, porém, o
problema com tabelas era que o navegador lia todos os elementos para depois renderizar o conteúdo, criando
um certo atraso na exibição (Teruel, 2013. p. 312).

No contexto do HTML, semântica se refere ao significado que cada elemento carrega, além da sua
função de apresentação visual. Um elemento semântico claramente descreve o seu conteúdo para o
navegador e para outros desenvolvedores. Em outras palavras, a semântica busca dar sentido à
estrutura do seu documento, utilizando elementos que representam o tipo de informação que eles
contêm.

De acordo com Elliotte Harold (2010, p. 174), “usar a semântica apropriada para cada elemento torna as
páginas mais inteligíveis para leitores de tela, e faz com que elas sejam mostradas apropriadamente em
diferentes plataformas”.

A importância da semântica na escolha dos elementos é crucial por diversas razões:

1. Melhora a acessibilidade: leitores de tela utilizados por pessoas com deficiência visual dependem da
semântica para interpretar o conteúdo da página de forma lógica. Elementos semânticos como
<nav>, <article>, <aside>, <header>, <footer> e os elementos de cabeçalho (<h1> a <h6>) fornecem
informações estruturais claras, facilitando a navegação e a compreensão do conteúdo.
2. Otimização para mecanismos de busca: os mecanismos de busca, como o Google, utilizam a
estrutura semântica para entender a relevância e o contexto do conteúdo de uma página. Ao utilizar
elementos semânticos apropriados, você ajuda os buscadores a identificar as partes importantes do
seu conteúdo, o que pode contribuir para um melhor posicionamento nos resultados de pesquisa.
Por exemplo, usar a tag <article> para o conteúdo principal de um artigo e <h1> para o título principa
indica claramente a hierarquia e a importância dessas informações.
3. Melhora a manutenção e a organização do código: um código HTML semântico é mais fácil de ler,
entender e manter. Os nomes das tags semânticas já indicam o propósito do conteúdo, tornando o
código mais intuitivo para outros desenvolvedores que precisarem trabalhar nele e para você mesmo
no futuro. Isso reduz a necessidade de comentários extensivos e facilita a identificação da estrutura
do documento.
4. Benefícios para o desenvolvimento: frameworks e ferramentas de desenvolvimento muitas vezes se
baseiam na estrutura semântica do HTML para aplicar estilos CSS e comportamentos JavaScript de
forma mais eficiente.

Em resumo, a escolha de elementos HTML com base em seu significado semântico, em vez de apenas
em sua aparência visual padrão, é fundamental para criar páginas web acessíveis, otimizadas para
busca, fáceis de manter e que proporcionam uma melhor experiência para todos os usuários. É sobre
construir uma web com significado, na qual a estrutura do código reflete o significado do conteúdo.

Com base nisso, vamos te apresentar alguns outros elementos fundamentais para se criar páginas
semânticas:
 Tags de Cabeçalho (<h1> a <h6>): as tags de cabeçalho são utilizadas para definir títulos e
subtítulos dentro de uma página HTML. Elas seguem uma hierarquia de importância, em que a tag
<h1> representa o título principal e mais significativo da página (geralmente usados uma vez por
página), enquanto as tags subsequentes (<h2>, <h3>, <h4>, <h5>, <h6>) indicam subtítulos de
diferentes níveis de importância. Essa hierarquia não é apenas para formatação visual (onde <h1>
geralmente é maior e mais destacado), mas também crucial para a estrutura semântica do
documento, auxiliando mecanismos de busca e leitores de tela a entenderem a organização do
conteúdo.
Parágrafos (<p>): a tag <p> é usada para agrupar blocos de texto que formam um parágrafo. Ela
define uma unidade de conteúdo textual que possui um significado completo e distinto dentro do
documento. Os navegadores geralmente adicionam um espaçamento automático antes e depois de
cada parágrafo, separando-os visualmente. Utilizar a tag <p> corretamente contribui para a
legibilidade e a organização do texto na página.
Quebras de Linha (<br>): a tag <br> (de "break rule") insere uma quebra de linha forçada no texto,
movendo o conteúdo seguinte para uma nova linha sem criar outro parágrafo. Diferentemente da tag
<p>, <br> não adiciona espaçamento semântico entre os elementos. É importante utilizá-la com
moderação, geralmente para situações em que a quebra de linha é parte do conteúdo em si, como
em poemas ou endereços, e não para criar espaçamento visual entre parágrafos (para isso, utilize
CSS).
Listas (<ol>, <ul>, <dl>): as listas em HTML são usadas para apresentar informações de forma
organizada e estruturada. Existem três tipos principais:

Listas Ordenadas (<ol>): representam uma sequência de itens onde a ordem é importante. Os
itens dentro de uma lista ordenada são numerados por padrão (1, 2, 3...). Cada item da lista é
definido pela tag <li> (list item).
Listas Não Ordenadas (<ul>): representam um conjunto de itens onde a ordem não é significativa.
Os itens dentro de uma lista não ordenada são marcados com um símbolo (como um ponto ou
um disco) por padrão. Cada item da lista também é definido pela tag <li>.
Listas de Definição (<dl>): são usadas para apresentar termos e suas respectivas definições.
Uma lista de definição consiste em grupos de termos (<dt> - definition term) e suas descrições
(<dd> - definition description).

Veja um exemplo:

<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Tags HTML</title>
</head>
<body>

<h1>Título Principal</h1>
<p>Este é um parágrafo de texto. Ele serve para apresentar informações de forma corrida.</p>
<br>
<p>Esta linha está após uma quebra de linha utilizando a tag &lt;br&gt;.</p>
 <h2>Lista Ordenada (ol)</h2>
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>

<h2>Lista Não Ordenada (ul)</h2>

<ul>
<li>Item 1 da lista</li>
<li>Item 2 da lista</li>
<li>Item 3 da lista</li>
</ul>

<h2>Lista de Definições (dl)</h2>

<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação para criar páginas web.</dd>
<dt>CSS</dt>
<dd>Linguagem de estilo para definir a aparência de documentos HTML.</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação para adicionar interatividade a páginas web.</dd>
</dl>

</body>
</html>

Para testar este código, você deve fazer os seguintes passos:

1. Abra um editor de texto: pode ser o Bloco de Notas (Windows), TextEdit (Mac), Sublime Text, VS
Code, ou qualquer outro editor de sua preferência.
2. Copie e cole o código acima dentro do editor.
3. Salve o arquivo: escolha a opção "Salvar como" e dê um nome ao arquivo com a extensão .html (por
exemplo, [Link]). Certifique-se de que a opção "Tipo" ou "Salvar como tipo" esteja definida
como "Todos os arquivos (*.*)".
4. Abra no navegador: localize o arquivo [Link] que você salvou e clique duas vezes nele. Ele
será aberto no seu navegador padrão, e você poderá ver o resultado das tags HTML.

Veja uma imagem com o resultado esperado no navegador Google Chrome:

Figura 1 – Exemplo de renderização HTML. Fonte: elaborada pelo autor (2025)

Vamos Exercitar?
Você se lembra que no Ponto de Partida dissemos que é importante você entender como funciona um
arquivo HTML e que você iria iniciar seu entendimento sobre as páginas?

Pois bem. Agora você já conhece a estrutura básica de um arquivo HTML, sabe o que é semântica e
sua importância e viu algumas tags essenciais.

Logicamente ainda temos muito a seguir, mas já podemos comemorar até onde chegamos.

Saiba mais
Para ampliar os seus conhecimentos sobre os temas desta aula, recomendamos a leitura do capítulo 1:
HTML5, textos, listas e imagens do livro “HTML & CSS – Aprenda como construir páginas web”, de
William Pereira Alves. O capítulo reforça o que vimos na aula e expande seu conhecimento em outros
elementos HTML.

Referências
ALVES, William Pereira. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa,
2021. [Minha Biblioteca]

TERUEL, Evandro C. HTML 5 - Guia Prático. 2. ed. Rio de Janeiro: Érica, 2013. [Minha Biblioteca]

HAROLD, Elliotte R. Refatorando HTML. Porto Alegre: Bookman, 2010. [Minha Biblioteca]
Imagens, Tabelas e Formulários
Que ótimo que você está avançando para a segunda aula! Prepare-se para desvendar os segredos por
trás da construção de qualquer página da web. Nesta aula, mergulharemos no universo das tags HTML,
os blocos de construção fundamentais que dão vida ao conteúdo online. Você vai descobrir como
organizar suas ideias de forma lógica com a hierarquia e o aninhamento, e o mais importante, como
tornar seu HTML significativo para navegadores e ferramentas de busca com a semântica. Quer dar um
salto na sua jornada de desenvolvimento web?

Faça o download do arquivo

Ponto de Partida
Vamos começar a construir a base do seu conhecimento em HTML.

Imagine que você está escrevendo um livro. Você não joga as palavras aleatoriamente na página, certo?
Você organiza seus pensamentos em capítulos, seções, parágrafos e usa títulos para guiar o leitor. No
mundo da web, o HTML funciona de maneira similar. Ele fornece a estrutura fundamental para o seu
conteúdo online, dizendo aos navegadores o que é um título, o que é um parágrafo, onde estão as
imagens e assim por diante.

Nesta aula, você vai explorar os três pilares que sustentam essa estrutura: as tags, a hierarquia de um
documento e como as tags podem ser aninhadas, e como isso é aplicado para construir a
semântica de um documento.

Lembre-se que na aula passada você já viu o que é semântica, mas ainda não teve a oportunidade de
colocar esta ideia em prática.

Pense nas tags como as palavras-chave ou os rótulos que definem cada parte do seu conteúdo. Uma
tag pode indicar que um texto é um título importante (<h1>), outra pode marcar um parágrafo (<p>), ou
ainda pode inserir uma imagem (<img>). Aprender a usar as tags corretas é o primeiro passo para
construir qualquer página web.

Mas não basta apenas colocar tags aleatoriamente. A forma como essas tags são organizadas – a
hierarquia e o aninhamento delas – é crucial para dar sentido ao seu documento. Assim como em um
livro, onde os capítulos contêm seções e as seções contêm parágrafos, no HTML, alguns elementos
podem conter outros. Essa estrutura lógica ajuda os navegadores a entender a importância relativa de
cada parte do seu conteúdo e como elas se relacionam.

Por fim, a semântica vai além da simples formatação visual. Trata-se de usar as tags HTML com o
significado correto. Por exemplo, usar a tag <article> para um artigo de blog e a tag <aside> para
informações complementares. Isso torna seu código mais claro não apenas para outros
desenvolvedores, mas também para os navegadores e ferramentas de busca, o que pode impactar
positivamente a acessibilidade e o SEO (Search Engine Optimization) do seu site.
Mas aqui está o problema: imagine que você construiu uma página web inteira usando apenas tags
genéricas, como se tudo fosse a mesma coisa. Como um navegador saberia qual é o título principal?
Como um leitor de tela para pessoas com deficiência visual entenderia a estrutura do seu conteúdo?
Como o Google saberia quais partes da sua página são mais importantes para indexar?

Ao final desta aula, você será capaz de responder a essa pergunta crucial. Você terá o conhecimento
para estruturar seus documentos HTML de forma clara, organizada e significativa, construindo a base
sólida para qualquer projeto web que você imaginar. Prepare-se para dar o primeiro passo rumo à
criação de páginas web profissionais e acessíveis!

Vamos Começar!
DEFINIÇÃO DE TAGS
Você agora vai entrar no coração do HTML: as tags. Pense nas tags como os blocos de construção
fundamentais que dão significado e estrutura ao seu conteúdo na web. Elas são como "etiquetas" que
informam ao navegador como exibir cada parte da sua página.

Basicamente, uma tag HTML é uma palavra-chave (ou abreviação) envolta por sinais de menor que (<)
e maior que (>). Essa palavra-chave indica o tipo de conteúdo que ela delimita. Por exemplo, a tag <p>
indica um parágrafo de texto, e a tag <h1> define um título de nível mais alto (o título principal).

A maioria das tags HTML funciona em pares: uma tag de abertura e uma tag de fechamento. A tag de
abertura marca o início de um elemento HTML e a tag de fechamento marca o fim desse elemento. A tag
de fechamento é idêntica à tag de abertura, mas com uma barra (/) antes da palavra-chave. Por
exemplo, um parágrafo seria estruturado assim: <p>Este é um parágrafo de texto.</p>. Tudo o que
estiver entre a tag de abertura <p> e a tag de fechamento </p> é interpretado pelo navegador como um
parágrafo .

Veja o exemplo abaixo:

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="UTF-8">

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

<title>Exemplo de Tags HTML</title>

</head>
<body>

<h1>Entendendo as Tags HTML</h1>

<p>A maioria das **tags HTML** funciona em pares</p>
<h2>Exemplo de Parágrafo em HTML:</h2>
<p>Este é um parágrafo de texto dentro de um documento HTML.</p>
</body>

</html>

Crie um arquivo chamado [Link] da mesma forma que fizemos na primeira aula. Veja o resultado:

Figura 1 – Exemplo de tags.

É importante notar que nem todas as tags seguem esse modelo de "liga" e "desliga". Algumas tags são
chamadas de tags vazias ou self-closing tags (autofechamento). Essas tags realizam uma única ação e
não envolvem nenhum conteúdo. Um exemplo comum é a tag <img>, utilizada para inserir imagens. Ela
não precisa de uma tag de fechamento separada; a própria tag de abertura já contém todas as
informações necessárias, geralmente através de atributos.

E você chegou a outro conceito crucial: os atributos. Os atributos fornecem informações adicionais sobre
os elementos HTML. Eles são especificados dentro da tag de abertura, após o nome da tag, e
geralmente consistem em um nome e um valor, separados por um sinal de igual (=) e o valor geralmente
é colocado entre aspas.

Pense na tag <img> novamente. Para que o navegador saiba qual imagem exibir, precisamos
especificar o caminho para o arquivo da imagem. Fazemos isso usando o atributo src (source): <img
src="caminho/para/sua/[Link]">. Aqui, src é o nome do atributo e "caminho/para/sua/[Link]" é
o seu valor. Outro atributo comum para imagens é o alt (alternative text), que fornece uma descrição
textual da imagem para casos em que a imagem não pode ser carregada ou para leitores de tela: <img
src="[Link]" alt="Uma descrição da imagem">.

Olhe este exemplo:

<!DOCTYPE html>

<html lang="pt-br">
<head>

<meta charset="UTF-8">

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

<title>Exemplo de Imagens em HTML</title>

</head>

<body>

<h2>Imagens em Ação:</h2>
<img src="[Link]" alt="Uma paisagem exuberante com montanhas e um lago azul."
width="400">
<p>Esta é uma imagem de uma paisagem,</p>
<img src="[Link]" alt="Uma imagem de um gato fofo (não carregada)." width="250">
<p>Se a imagem acima não carregar, você verá o texto alternativo "Uma imagem de um gato fofo
(não carregada)".</p>
</body>

</html>

Veja o resultado:

Figura 2 – Exemplo de imagens.

As tags podem ter diversos atributos, cada um com uma finalidade específica, permitindo personalizar o
comportamento e a aparência dos elementos HTML. Por exemplo, a tag <a>, utilizada para criar links,
possui o atributo href que especifica o endereço da página para a qual o link aponta: <a
href="[Link] aqui</a>.

Dominar a sintaxe das tags – entender quais precisam de fechamento, quais são vazias e como utilizar
os atributos – é fundamental para construir uma estrutura HTML válida e funcional. Ao usar as tags
corretamente, você está dizendo ao navegador exatamente o que cada parte do seu conteúdo significa
e como ele deve ser apresentado ao usuário. Nos próximos tópicos, veremos como organizar essas tags
de forma lógica e como escolher as tags com o significado semântico adequado.

HIERARQUIA E ANINHAMENTO
Você vai entender agora a importância da hierarquia e do aninhamento dentro da estrutura HTML.
Imagine que as tags são como peças de Lego. Cada peça tem sua função, mas é a forma como você as
encaixa que cria uma estrutura coesa e significativa. No HTML, a hierarquia e o aninhamento ditam essa
organização, estabelecendo relações entre os diferentes elementos da sua página web.

A hierarquia em HTML refere-se à forma como os elementos se relacionam em termos de importância e

subordinação. Assim como em um documento de texto, onde você tem um título principal, subtítulos e
parágrafos, no HTML, alguns elementos contêm outros, criando uma estrutura em árvore. O elemento
<html> é a raiz de todo documento HTML, e dentro dele residem outros elementos de nível superior,
como <head> (que contém informações sobre o documento, como o título e metadados) e <body> (que
contém o conteúdo visível da página).

Dentro do <body>, você pode ter elementos como <h1> (título principal), <p> (parágrafo), <div> (divisão
genérica de conteúdo), <ul> (lista não ordenada), <ol> (lista ordenada) e muitos outros. A ordem em que
esses elementos aparecem no código HTML geralmente reflete a ordem em que o conteúdo é
apresentado na página.

O aninhamento ocorre quando colocamos uma tag dentro de outra. Essa é uma prática fundamental
para estruturar o conteúdo de forma lógica e semântica. Pense em uma lista não ordenada (<ul>).
Dentro dela, você terá itens de lista (<li>). Nesse caso, a tag <li> está aninhada dentro da tag <ul>. Essa
relação de "pai" (o elemento que contém) e "filho" (o elemento contido) é essencial para definir a
estrutura do seu documento.

A profundidade do aninhamento pode variar. Você pode ter elementos aninhados dentro de outros
elementos, que por sua vez podem conter outros, e assim por diante. Por exemplo, dentro de um item
de lista (<li>), você pode ter um parágrafo (<p>) ou até mesmo outro elemento de lista (<ul> ou <ol>),
criando sublistas.

É crucial entender que o aninhamento deve seguir uma lógica e ser feito corretamente. As tags devem
ser fechadas na ordem inversa em que foram abertas. Imagine caixas dentro de caixas. A última caixa
que você abriu deve ser a primeira a ser fechada. No HTML, se você abre um <div> e dentro dele abre
um <p>, você deve fechar o <p> antes de fechar o <div>.
 O <div> se tornou um dos principais elementos da linguagem HTML quando os desenvoledores deixaram de
criar layout de páginas utilizando tabelas. Esse elemento define um contêiner que permite agrupar conteúdo,
formatá-lo e posicioná-lo na tela utilizando estilos CSS. Assim, você pode definir um elemento <div> e colocar
outros elementos em seu interior, como parágrafos, imagens, links, outros elementos <div> etc. Em seguida,
você define por meio de estilos CSS o tamanho do contêiner, a posição, cor de fundo, borda etc (Teruel, 2013,
p. 265).

Por exemplo:

<div>
<p>Este é um parágrafo dentro de uma div.</p>
</div>

Aninhar as tags incorretamente pode levar a comportamentos inesperados na renderização da página e

dificultar a interpretação do código pelos navegadores e por outros desenvolvedores. Além disso, uma
estrutura hierárquica clara e um aninhamento correto são fundamentais para a acessibilidade. Leitores
de tela utilizam essa estrutura para navegar pelo conteúdo, e uma hierarquia bem definida garante que a
informação seja apresentada de forma lógica para todos os usuários.

A semântica, que veremos no próximo tópico, também está intimamente ligada à hierarquia e ao
aninhamento. Ao escolher as tags corretas para cada tipo de conteúdo e organizá-las de forma
hierárquica, você está dando significado ao seu HTML, tornando-o mais compreensível para máquinas e
pessoas.

Pense na construção de um artigo de blog. Você teria um <h1> para o título principal, seguido por <p>
para os parágrafos introdutórios. Se houver subtítulos, você usaria <h2>, <h3>, e assim por diante,
mantendo uma hierarquia lógica (um <h2> é um subtópico de <h1>, e um <h3> é um subtópico de
<h2>).

Em resumo, a hierarquia e o aninhamento são os pilares que organizam o seu conteúdo HTML,
estabelecendo relações de importância e pertencimento entre os diferentes elementos. Ao dominar
esses conceitos, você construirá a espinha dorsal de suas páginas web de forma estruturada, lógica e
acessível.

Veja este exemplo:

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">
 <title>Exemplo de Hierarquia e Aninhamento</title>

</head>

<body>

<h1>Título Principal da Página</h1>

<p>Este é o primeiro parágrafo da nossa página. Ele introduz o tema principal.</p>

<h2>Subtítulo de Nível 2</h2>

<p>Aqui, exploramos um aspecto específico do tema principal.</p>

<h3>Subtítulo de Nível 3</h3>

<p>Este é um detalhe ainda mais específico dentro do subtítulo anterior.</p>

<ul>

<li>Item 1 da lista não ordenada</li>

<li>

Item 2 da lista com um parágrafo dentro:

<p>Este é um parágrafo aninhado dentro do segundo item da lista.</p>

</li>

<li>Item 3 da lista</li>

</ul>

<ol>

<li>Primeiro passo</li>

<li>Segundo passo

<ul>
 <li>Sub-passo A</li>

<li>Sub-passo B</li>

</ul>

</li>

<li>Terceiro passo</li>

</ol>

<div>

<p>Esta é uma seção genérica de conteúdo (div) que contém um parágrafo.</p>

</div>

</body>

</html>

Você consegue entender o exemplo?

Dica: copie este exemplo em um arquivo com a extensão .html e abra no navegador para ver o
resultado.

Siga em Frente...
Como já vimos na última aula, a semântica vai além da apresentação visual; trata-se do significado que
cada tag confere ao conteúdo. A escolha de elementos semânticos adequados não apenas descreve o
conteúdo, mas também estabelece a importância e a relação entre as diferentes partes da sua página. É
aqui que a hierarquia entra em jogo de forma poderosa.

Cada elemento deve ser usado com seu propósito pretendido: <ul> para listas não ordenadas, <ol> para listas
numeradas, table para dados de tabelas, blockquote para citações, <h1-h6> para cabeçalhos, e assim por
diante. Usar a semântica apropriada para cada elemento torna as páginas mais inteligíveis para leitores de
tela, e faz com que elas sejam mostradas apropriadamente em diferentes plataformas (Harold, 2010, p. 174)

Imagine que você está construindo a página de um blog. Você tem o título principal do post, subtítulos
para as seções, o corpo do texto, informações sobre o autor e talvez uma seção de comentários. A
semântica nos oferece tags específicas para cada um desses elementos: <article> para o conteúdo
principal do post, <h1> para o título principal, <h2> e <h3> para os subtítulos, <p> para os parágrafos,
<aside> para informações relacionadas (como a biografia do autor), e assim por diante.

Agora, vamos comparar uma abordagem com má semântica e uma com boa semântica, considerando
também a hierarquia:

Má Semântica (e Hierarquia Confusa):

Imagine um desenvolvedor que se preocupa apenas com a aparência e usa elementos <div> para tudo,
aplicando estilos CSS para fazê-los parecer títulos, parágrafos etc. O HTML poderia se parecer com
algo assim:

<div style="font-size: 2em; font-weight: bold;">Título do Artigo</div>

<div style="font-size: 1.5em; font-weight: bold;">Subtítulo</div>
<div>Este é o conteúdo principal do artigo.</div>
<div style="font-style: italic; font-size: 0.9em;">Sobre o Autor</div>
<div>Nome do Autor</div>
<div>Este é um comentário.</div>

Neste exemplo, embora visualmente possa se assemelhar a um artigo, a estrutura HTML não carrega
nenhum significado semântico. Os navegadores, leitores de tela e mecanismos de busca não têm como
identificar o título principal, os subtítulos, o conteúdo principal ou as informações do autor de forma
programática. A hierarquia também é implícita apenas pelo tamanho da fonte, o que não é uma forma
confiável de comunicação para máquinas.

Boa Semântica (e Hierarquia Clara):

Agora, veja como a mesma estrutura pode ser construída utilizando elementos semânticos e uma
hierarquia clara:

<article>
<h1>Título do Artigo</h1>
<section>
<h2>Subtítulo</h2>
<p>Este é o conteúdo principal do artigo, organizado em parágrafos dentro de uma seção.</p>
<h3>Um Sub-tópico Dentro da Seção</h3>
<p>Mais detalhes sobre o assunto.</p>
</section>
<aside>
<h3>Sobre o Autor</h3>
<p>Nome do Autor</p>
</aside>
<section id="comments">
<h2>Comentários</h2>
<p>Este é um comentário.</p>
 </section>
</article>

Neste caso, a tag <article> claramente define o conteúdo principal do post. O <h1> estabelece o título
mais importante. As tags <section> agrupam conteúdo relacionado sob um subtítulo (<h2>), e dentro
dessas seções, podemos ter parágrafos (<p>) e até mesmo subtítulos de nível inferior (<h3>), criando
uma hierarquia lógica. A tag <aside> é utilizada para informações relacionadas, mas secundárias ao
conteúdo principal. A seção de comentários também é demarcada semanticamente.

A diferença é gritante. No segundo exemplo, a estrutura HTML comunica claramente o significado e a

hierarquia do conteúdo. Um leitor de tela pode navegar facilmente pelos títulos e seções. O Google pode
identificar o conteúdo principal do artigo e seus subtítulos para indexação. O código é mais legível e de
boa manutenção para outros desenvolvedores.

A escolha das tags semânticas corretas, combinada com um aninhamento lógico que reflete a hierarquia
do conteúdo, é fundamental para construir uma web acessível, otimizada e semanticamente rica. Não se
trata apenas de fazer a página parecer correta visualmente, mas de dar significado à sua estrutura para
que máquinas e pessoas possam entender e interagir com o seu conteúdo da melhor forma possível. Ao
priorizar a semântica, você está construindo uma base sólida para o seu projeto web, que trará
benefícios a longo prazo em termos de acessibilidade, SEO e manutenção.

Vamos Exercitar?
A questão levantada no início da aula nos confrontava com um cenário de caos informacional: uma
página web construída unicamente com tags genéricas. Agora, com o conhecimento adquirido sobre a
definição de tags, hierarquia, aninhamento e, principalmente, semântica, podemos responder com
clareza.

Um navegador, diante de uma sopa de <div> sem significado, teria extrema dificuldade em discernir a
importância relativa do conteúdo. Não saberia identificar o título principal, os subtítulos ou o conteúdo
principal. A estrutura do documento seria opaca, impossibilitando uma renderização inteligente e
adaptada.

Para um leitor de tela, a situação seria ainda mais desafiadora. Sem as pistas semânticas fornecidas por
tags como <header>, <article>, e <aside>, a navegação e a compreensão do conteúdo se tornariam
labirínticas e frustrantes. A ausência de uma hierarquia clara, expressa por elementos de cabeçalho,
impediria a identificação da estrutura lógica do documento.

Os mecanismos de busca, como o Google, também seriam prejudicados. A incapacidade de identificar

semanticamente as partes cruciais do conteúdo dificultaria a compreensão do tema da página, a
identificação de palavras-chave relevantes e a determinação da sua importância dentro do contexto da
web. Isso impactaria negativamente o ranqueamento nos resultados de pesquisa.

Em suma, construir páginas web sem considerar a semântica e a hierarquia é como escrever um livro
sem capítulos, títulos ou parágrafos. A informação está lá, mas sua organização e significado se
perdem. Ao empregar as tags HTML com seu devido significado semântico e organizá-las
hierarquicamente, aninhando-as de forma lógica, nós capacitamos os navegadores a interpretarem o
conteúdo corretamente, os leitores de tela a guiarem os usuários com eficiência e os mecanismos de
busca a indexarem e compreenderem nossas páginas de maneira otimizada. A semântica é, portanto, a
chave para construir uma web acessível, funcional e significativa para todos.

Saiba mais
Para ampliar os seus conhecimentos sobre os temas desta aula, recomendamos a leitura do capítulo 1:
HTML5, textos, listas e imagens do livro “HTML & CSS – Aprenda como construir páginas web”. O
capítulo reforça o que vimos na aula e expande seu conhecimento em outros elementos HTML.

Referências
ALVES, William Pereira. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa,
2021. [Minha Biblioteca]

TERUEL, Evandro C. HTML 5 - Guia Prático. 2. ed. Rio de Janeiro: Érica, 2013. [Minha Biblioteca]

HAROLD, Elliotte R. Refatorando HTML. Porto Alegre: Bookman, 2010. [Minha Biblioteca]

Semântica e Organização de Conteúdo

Prepare-se para interagir com a web! Nesta aula, vamos dominar a arte de criar formulários que coletam
dados dos usuários e construir tabelas que organizam informações de forma clara e eficiente. Vamos
explorar as tags essenciais para cada um, aprender a estruturar seus elementos corretamente e
descobrir como validar os dados inseridos nos formulários para garantir a qualidade da informação.
Domine a interação e a organização na web – esta aula é o seu próximo passo para se tornar um
desenvolvedor web completo!

Faça o download do arquivo

Ponto de Partida
Nesta aula você mergulhará em dois componentes cruciais para a interatividade e organização de dados
na web: formulários e tabelas.

Os formulários são a porta de entrada para a interação entre os usuários e os sites. Eles permitem
coletar informações como nome, e-mail, comentários, pesquisas e muito mais. Imagine um formulário de
login, um formulário de contato ou um formulário de pesquisa. Todos eles utilizam tags HTML
específicas para criar campos de entrada de texto, caixas de seleção, botões e outros elementos que
permitem ao usuário fornecer dados. Aprender a construir formulários é essencial para criar aplicações
web dinâmicas e que respondam às necessidades dos usuários.

As tabelas, por sua vez, são fundamentais para apresentar dados de forma organizada e estruturada.
Pense em uma tabela de preços, uma tabela de horários ou uma tabela comparativa de produtos. As
tabelas HTML utilizam tags para definir linhas, colunas e células, permitindo a exibição clara de
informações tabulares. Dominar a estruturação de tabelas é crucial para apresentar dados complexos de
maneira acessível e fácil de entender.

Além de criar formulários, também abordaremos a validação de dados. Validar os dados inseridos pelos
usuários é essencial para garantir a qualidade da informação coletada. Isso envolve verificar se os
campos obrigatórios foram preenchidos, se os dados estão no formato correto (por exemplo, um
endereço de e-mail válido) e se atendem a outros critérios específicos. A validação pode ser feita tanto
no lado do cliente (no navegador, usando HTML5 e JavaScript) quanto no lado do servidor (no servidor
web, usando linguagens como PHP ou Python). Nesta aula, focaremos na validação do lado do cliente
usando HTML5.

Imagine que você precisa criar um formulário de cadastro de usuários para um site. Como garantir que
os usuários preencham todos os campos obrigatórios? Como verificar se o endereço de e-mail inserido
é válido? Como apresentar os dados cadastrados em uma tabela organizada? Sem o conhecimento
adequado, você pode criar um formulário que aceita dados incorretos ou uma tabela difícil de ler.

Ao final desta aula, você será capaz de resolver esses problemas. Você aprenderá a criar formulários
completos e funcionais, estruturar tabelas de forma eficaz e implementar validação de dados usando
HTML5, construindo a base para aplicações web interativas e amigáveis.

Vamos Começar!
Os formulários HTML são um conjunto de elementos que permitem aos usuários inserir dados em uma
página web. O elemento principal de um formulário é a tag <form>. Ela atua como um contêiner para
todos os outros elementos do formulário. Os formulários podem conter diversos tipos de elementos,
como campos de texto (<input type="text">), caixas de seleção (<input type="checkbox">), botões de
rádio (<input type="radio">), botões de envio (<button type="submit">), áreas de texto (<textarea>) e
menus de seleção (<select>).

Cada elemento de entrada de dados possui atributos importantes. O atributo name é essencial, pois
atribui um nome ao elemento, que será usado para identificar os dados quando o formulário for enviado.
O atributo type especifica o tipo de dado que o elemento aceita (texto, e-mail, número etc.). O atributo
value define o valor inicial do elemento ou o valor selecionado. O atributo placeholder exibe um texto de
exemplo dentro do campo de entrada. O atributo required torna o campo obrigatório.

Ao criar um formulário, é importante considerar a acessibilidade. As tags <label> são usadas para
associar um texto descritivo a cada elemento de entrada, o que facilita a compreensão do formulário por
usuários com deficiência visual que utilizam leitores de tela.

Os formulários também possuem atributos na tag <form> que controlam como os dados são enviados. O
atributo action especifica a URL para onde os dados serão enviados quando o formulário for submetido.
O atributo method define o método HTTP usado para enviar os dados (geralmente get ou post).

Veja este exemplo de código HTML:

<form action="/enviar-contato" method="post">

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

<input type="text" id="nome" name="nome" required placeholder="Seu nome"><br><br>

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

<input type="email" id="email" name="email" required placeholder="Seu e-mail"><br><br>

<label for="mensagem">Mensagem:</label><br>

<textarea id="mensagem" name="mensagem" rows="4" cols="50"></textarea><br><br>

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

</form>

O resultado deste código é o seguinte:

Figura 1 – Renderização do formulário.

O trecho de código HTML acima cria um formulário de contato básico. Vamos entender cada parte:

<form action="/enviar-contato" method="post">: Esta é a tag que define o início do formulário. O atributo
action="/enviar-contato" indica para qual endereço da web os dados do formulário serão enviados
quando o usuário clicar no botão de enviar. O atributo method="post" diz como os dados serão enviados
para o servidor (neste caso, usando o método "post", que é comum para enviar informações de
formulários). A questão de métodos de envio ficará clara na Unidade 4, aula 14.

<label for="nome">Nome:</label><br>: A tag <label> cria um rótulo de texto associado a um campo de

entrada. O atributo for="nome" conecta este rótulo ao elemento com o id="nome". O texto "Nome:" é o
que o usuário verá. A tag <br> insere uma quebra de linha, colocando o próximo elemento em uma nova
linha.

<input type="text" id="nome" name="nome" required placeholder="Seu nome"><br><br>: A tag <input>

cria um campo de entrada de dados. O atributo type="text" define que este é um campo para entrada de
texto simples. O atributo id="nome" dá um identificador único a este elemento dentro do formulário,
permitindo que o rótulo <label> se conecte a ele. O atributo name="nome" atribui um nome a este
campo, que será usado para identificar os dados enviados ao servidor. O atributo required indica que
este campo precisa ser preenchido pelo usuário antes que o formulário possa ser enviado. O atributo
placeholder="Seu nome" exibe o texto "Seu nome" dentro do campo quando ele está vazio, como uma
dica para o usuário. As tags <br><br> inserem duas quebras de linha para criar um espaço entre este
campo e o próximo.

<label for="email">E-mail:</label><br>: Similar ao rótulo para o nome, cria um rótulo "E-mail:" associado
ao campo com id="email".

<input type="email" id="email" name="email" required placeholder="Seu e-mail"><br><br>: Este é outro

campo de entrada, mas desta vez com type="email". Isso indica ao navegador que o usuário deve inseri
um endereço de e-mail válido. Os outros atributos (id, name, required, placeholder) funcionam da
mesma forma que no campo de nome.

<label for="mensagem">Mensagem:</label><br>: Cria um rótulo "Mensagem:" associado à área de

texto com id="mensagem".

<textarea id="mensagem" name="mensagem" rows="4" cols="50"></textarea><br><br>: A tag

<textarea> cria uma área de texto de múltiplas linhas para que o usuário possa digitar mensagens mais
longas. Os atributos id e name funcionam como nos campos <input>. O atributo rows="4" define que a
área de texto terá inicialmente 4 linhas de altura, e cols="50" define que terá 50 colunas de largura.

<button type="submit">Enviar</button>: A tag <button> cria um botão clicável. O atributo type="submit"

indica que, ao clicar neste botão, o formulário será enviado para o endereço especificado no atributo
action da tag <form>. O texto "Enviar" é o que aparecerá no botão.

Em resumo, este código cria um formulário simples com campos para nome, e-mail e uma mensagem,
além de um botão para enviar as informações. Os atributos garantem que os campos obrigatórios sejam
preenchidos e fornecem dicas aos usuários sobre o tipo de informação esperada.

ESTRUTURAÇÃO DE TABELAS
As tabelas HTML são usadas para apresentar dados em formato de grade, com linhas e colunas.

A tag principal para criar uma tabela é <table>.

Dentro da tabela, as tags <tr> definem as linhas, as tags <th> definem as células de cabeçalho
(geralmente na primeira linha) e as tags <td> definem as células de dados.
A estrutura básica de uma tabela HTML é a seguinte:

<table>

<tr>

<th>Cabeçalho 1</th>

<th>Cabeçalho 2</th>

</tr>

<tr>

<td>Dado 1</td>

<td>Dado 2</td>

</tr>

<tr>

<td>Dado 3</td>

<td>Dado 4</td>

</tr>

</table>

Além do que você viu, a tag <caption> pode ser usada para adicionar um título à tabela. As tags
<thead>, <tbody> e <tfoot> podem ser usadas para estruturar semanticamente a tabela, separando o
cabeçalho, o corpo e o rodapé da tabela.

As tabelas possuem atributos que permitem controlar sua aparência e comportamento. O atributo border
(embora obsoleto em HTML5 e controlado preferencialmente por CSS) define a borda da tabela. Os
atributos colspan e rowspan permitem que as células se estendam por várias colunas ou linhas.

É importante usar tabelas apenas para dados tabulares e não para layout da página (prática que
também é obsoleta). O CSS é a ferramenta adequada para controlar o layout.

Veja um exemplo de código HTML para uma tabela de preços:

<table>

<caption>Tabela de Preços</caption>

<thead>

<tr>

<th>Produto</th>

<th>Preço</th>

</tr>

</thead>

<tbody>

<tr>

<td>Produto A</td>

<td>R$ 10,00</td>

</tr>

<tr>

<td>Produto B</td>

<td>R$ 20,00</td>

</tr>

</tbody>

<tfoot>

<tr>

<td>Total</td>
 <td>R$ 30,00</td>

</tr>

</tfoot>

</table>

Veja o resultado desta tabela renderizada:

Siga em Frente...
A validação de dados é o processo de verificar se os dados inseridos pelos usuários em um formulário
são válidos e atendem a determinados critérios. A validação é crucial para garantir a qualidade dos
dados coletados, prevenir erros e proteger o sistema contra entradas maliciosas.

O HTML5 oferece alguns atributos que permitem realizar validação básica do lado do cliente, ou seja, no
navegador. O atributo required torna um campo obrigatório. O atributo type (em tags <input>) restringe o
tipo de dado aceito (por exemplo, type="email" para endereços de e-mail, type="number" para números)
Os atributos minlength e maxlength definem o número mínimo e máximo de caracteres permitidos. Os
atributos min e max definem o valor mínimo e máximo para campos numéricos. O atributo pattern
permite definir um padrão de validação usando expressões regulares.

Expressões regulares fazem uso de caracteres especiais para representar generalizações. Por exemplo, a
combinação dos caracteres [a-z] indica que se trata de uma letra (qualquer uma de A a Z); já o padrão {1,4}
indica que o padrão anterior [a-z] deve se repetir de uma a quatro vezes (Martins; Lenz; Silva et al. p. 70)

Quando um formulário é submetido, o navegador verifica se os campos atendem aos critérios de

validação. Se algum campo for inválido, o navegador exibe uma mensagem de erro e impede o envio do
formulário.

É importante ressaltar que a validação do lado do cliente é uma primeira linha de defesa, mas não é
suficiente por si só. A validação do lado do servidor é essencial para garantir a segurança e a
integridade dos dados, pois a validação do lado do cliente pode ser facilmente ignorada ou desabilitada
pelo usuário.

A validação automática de campos de entrada de e-mail, valores numéricos, datas, URL etc. é sem dúvida a
principal inovação da HTML5 no que diz respeito à criação de formulários (Teruel, 2013, p. 34).

Veja este exemplo de validação com HTML5:

<form action="/processar-formulario" method="post">

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

<input type="text" id="nome" name="nome" required minlength="3" maxlength="50">

<br><br>

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

<input type="email" id="email" name="email" required><br><br>

<label for="idade">Idade:</label><br>

<input type="number" id="idade" name="idade" min="18" max="120"><br><br>

<label for="senha">Senha:</label><br>

<input type="password" id="senha" name="senha" required

pattern=" (?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,} "><br><br>

</form>

Neste exemplo, o campo "Nome" é obrigatório e deve ter entre 3 e 50 caracteres. O campo "E-mail" é
obrigatório e deve ser um endereço de e-mail válido. O campo "Idade" deve ser um número entre 18 e
120. O campo "Senha" é obrigatório e deve conter pelo menos 8 caracteres, uma letra maiúscula, uma
letra minúscula e um número."

Vamos Exercitar?
A problematização inicial nos confrontava com os desafios de criar um formulário de cadastro de
usuários e apresentar os dados cadastrados de forma organizada. Agora, com o conhecimento adquirido
nesta aula, você enfrentará esses desafios com confiança.
Para garantir que os usuários preencham todos os campos obrigatórios, você utiliza o atributo required
nos elementos de entrada do formulário. Para verificar se o endereço de e-mail inserido é válido, você
utiliza o atributo type="email". Para apresentar os dados cadastrados em uma tabela organizada, você
pode utilizar as tags <table>, <tr>, <th> e <td>, estruturando as informações em linhas e colunas.

Além disso, você aprendeu a usar outros atributos de validação do HTML5, como minlength, maxlength,
min, max e pattern, para garantir a qualidade dos dados coletados.

Com essas ferramentas, você pode criar formulários robustos e tabelas claras, proporcionando uma
experiência de usuário mais eficiente e agradável. A validação de dados permite coletar informações
precisas e confiáveis, enquanto as tabelas permitem apresentar essas informações de forma organizada
e acessível.

Saiba mais
Para ampliar os seus conhecimentos sobre os temas desta aula, recomendamos a leitura dos capítulos
2 e 3 do livro “HTML & CSS – Aprenda como construir páginas web”, de William Pereira Alves. Os
capítulos reforçam e complementam o que vimos na aula.

Referências
ALVES, William Pereira. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa,
2021. [Minha Biblioteca]

MARTINS, Júlio S.; LENZ, Maikon L.; SILVA, Michel Bernardo Fernandes da; et al. Processamentos de
Linguagem Natural. Porto Alegre: SAGAH, 2020. [Minha Biblioteca]

TERUEL, Evandro C. HTML 5 - Guia Prático. 2. ed. Rio de Janeiro: Érica, 2013. [Minha Biblioteca]

Exercícios Práticos com HTML

Agora você pode dar vida às suas páginas! Nesta aula prática, vamos mergulhar no mundo das mídias e
dos links. Você aprenderá a inserir imagens e vídeos de forma eficiente e dominará a criação de
hiperlinks, conectando páginas e recursos da web. Além disso, exploraremos as melhores práticas de
acessibilidade para garantir que seu conteúdo multimídia seja utilizável por todos. Eleve suas
habilidades de desenvolvimento web e crie experiências online ricas e inclusivas!!

Faça o download do arquivo

Ponto de Partida
Na aula de hoje, o foco está na aplicação prática de dois elementos fundamentais para a criação de
páginas web dinâmicas e interativas: mídias e links.
A inserção de imagens e vídeos é essencial para tornar o conteúdo mais atraente e informativo.
Imagens podem ilustrar conceitos, demonstrar produtos e criar impacto visual. Vídeos podem fornecer
tutoriais, apresentar demonstrações e contar histórias. O HTML oferece tags específicas para incorporar
esses tipos de mídia em suas páginas, permitindo controlar sua exibição e comportamento. Nesta aula,
vamos explorar as tags <img> para imagens e <video> para vídeos, aprendendo a usar seus atributos
para otimizar a experiência do usuário.

A criação de hiperlinks é o que torna a web uma rede interconectada. Links permitem que os usuários
naveguem entre páginas do seu site, acessem recursos externos e baixem arquivos. A tag <a> (âncora)
é a base para a criação de links em HTML. Vamos aprender a usar seus atributos para definir o destino
do link, abrir links em novas abas e criar diferentes tipos de links, como links para e-mail e âncoras
dentro da mesma página.

A acessibilidade em conteúdo multimídia é um aspecto crucial que muitas vezes é negligenciado. É

fundamental garantir que pessoas com deficiência possam acessar e compreender o conteúdo de
imagens e vídeos. Isso envolve fornecer alternativas textuais para imagens (usando o atributo alt),
adicionar legendas e transcrições para vídeos e garantir que os controles de vídeo sejam acessíveis por
teclado. Nesta aula, vamos explorar as melhores práticas e as tags HTML que auxiliam na criação de
conteúdo multimídia acessível.

Imagine que você está criando um site para um portfólio online. Como exibir seus projetos de forma
visualmente atraente usando imagens e vídeos? Como criar um sistema de navegação intuitivo que
permita aos visitantes explorarem diferentes seções do seu portfólio? Como garantir que pessoas com
deficiência visual ou auditiva possam acessar todo o conteúdo?

Ao final desta aula, você será capaz de responder a essas perguntas. Você aprenderá a inserir e a
manipular mídias, a criar links eficazes e a aplicar técnicas de acessibilidade, construindo páginas web
ricas, interativas e inclusivas.

Vamos Começar!
Antes de iniciarmos a aula propriamente, temos que entender como se formam os links.

Quando navegamos na web, constantemente nos deparamos com "endereços" que nos levam a
diferentes conteúdos. Para entender como esses endereços funcionam, é essencial conhecer a
diferença entre URI e URL.

A essa cadeia de caracteres que identifica o endereço de um site na internet dá-se o nome de Uniform
Resource Locator (URL). Por meio de uma URL é possível acessar páginas HTML, arquivos em um servidor
FTP, webmails (Alves, 2014, p. 16).

Um URI (Uniform Resource Identifier) é, em sua essência, uma sequência de caracteres que tem como
objetivo principal identificar um recurso. Esse "recurso" pode ser qualquer coisa presente na web: um
arquivo HTML, uma imagem, um vídeo, um documento PDF ou até mesmo um serviço online. Pense no
URI como um "nome" genérico que designa um item específico.

Já o URL (Uniform Resource Locator) é um tipo específico de URI. A diferença fundamental é que, além
de identificar o recurso, o URL também nos diz como localizá-lo. Ou seja, o URL fornece o "endereço"
do recurso, incluindo informações como o protocolo de acesso (por exemplo, HTTP, HTTPS, FTP) e o
local onde o recurso está armazenado (como o endereço de um site ou o caminho de um arquivo).

O HTTP (Hypertext transfer protocol) é um protocolo usado principalmente para acessar dados na World Wide
Web. O HTTP funciona como uma combinação de FTP e SMTP. Ele é semelhante ao FTP porque transfere
arquivos e usa os serviços do TCP. Entretanto, é muito mais simples do que o FTP, pois usa apenas uma
conexão TCP. Não há nenhuma conexão de controle separada; somente dados são transferidos entre o
cliente e o servidor (Forouzan, 2010, p. 628).

Em resumo, podemos dizer que todo URL é um URI, pois ele identifica um recurso. No entanto, nem
todo URI é um URL, já que alguns URIs podem apenas "nomear" o recurso sem especificar como
encontrá-lo.

Dentro das páginas web, os links podem ser categorizados em diferentes tipos, cada um com sua
função específica:

Links absolutos: esses links fornecem o endereço completo do recurso, incluindo o protocolo (como
"[Link] e o nome do domínio (como "[Link]"). Eles são usados para direcionar os
usuários para páginas ou arquivos localizados em outros sites.

Exemplo: <a href="[Link] o Site</a>

Links Relativos: Ao contrário dos links absolutos, os links relativos especificam o endereço do
recurso em relação à página web atual. Eles são frequentemente utilizados para criar a navegação
interna de um site, conectando páginas que estão localizadas no mesmo domínio. Para construir
esses links, você pode usar caminhos de diretório, como "../" para voltar um nível na hierarquia de
pastas.

Exemplo: <a href="[Link]">Vá para a Página 2</a>

Links âncora (ou links internos): esse tipo de link permite que os usuários naveguem para diferentes
seções dentro de uma mesma página. Para criar um link âncora, você precisa definir um identificador
único (usando o atributo id) para o elemento de destino e, em seguida, criar um link que referência
esse identificador usando o símbolo "#".

Exemplo:

Definindo o destino: <h2 id="secao3">Seção 3</h2>

Criando o link: <a href="#secao3">Pular para a Seção 3</a>

Links de e-mail: os links de e-mail oferecem uma maneira prática de permitir que os visitantes do seu
site entrem em contato com você. Ao clicar em um link de e-mail, o programa de e-mail padrão do
usuário é aberto, com o endereço de e-mail do destinatário já preenchido. Esses links são criados
usando o esquema "[Link]

Exemplo: <a href="[Link] em Contato</a>

Além desses tipos básicos, é muito comum encontrar URLs que incluem variáveis. Essas variáveis
permitem passar informações para o servidor web, geralmente para personalizar o conteúdo da página
ou processar alguma ação. As variáveis são adicionadas à URL após um ponto de interrogação ("?") e
consistem em pares "nome=valor" separados por "&". Isso é fundamental para a interatividade e
dinamismo das aplicações web.

Exemplo: <a href="[Link]?categoria=produtos&ordem=preco">Ver Produtos</a>

Nesse exemplo, as variáveis "categoria" e "ordem" são passadas para a página "[Link]" com os
valores "produtos" e "preço", respectivamente.

Compreender as nuances entre URIs e URLs, os diferentes tipos de links disponíveis e como incluir
variáveis nas URLs é fundamental para desenvolver páginas web bem estruturadas e que proporcionem
uma experiência de navegação intuitiva e rica para o usuário.

INSERÇÃO DE IMAGENS E VÍDEOS

A tag <img> é usada para inserir imagens em uma página HTML. É uma tag de fechamento automático,
o que significa que não possui tag de fechamento (</img> não é necessário). O atributo mais importante
da tag <img> é o atributo src, que especifica o caminho para o arquivo da imagem. O atributo alt fornece
um texto alternativo para a imagem, que é exibido se a imagem não puder ser carregada e é essencial
para acessibilidade (leitores de tela leem o texto alternativo). Os atributos width e height definem a
largura e a altura da imagem (é recomendado usar CSS para estilização, mas eles ainda são usados em
alguns casos).

Exemplo:

<img src="imagens/[Link]" alt="Descrição da imagem" width="500" height="300">

A tag <video> é usada para inserir vídeos em uma página HTML. Ela requer uma tag de abertura
(<video>) e uma tag de fechamento (</video>). O atributo src pode ser usado dentro da tag <source>
para especificar o caminho para o arquivo de vídeo. A tag <source> permite fornecer múltiplos formatos
de vídeo para garantir compatibilidade com diferentes navegadores. O atributo controls adiciona
controles de reprodução (play, pause, volume etc.) ao vídeo. Os atributos width e height definem a
largura e a altura do vídeo. O atributo autoplay inicia a reprodução do vídeo automaticamente (use com
moderação). O atributo loop faz o vídeo repetir automaticamente. O atributo muted silencia o vídeo
inicialmente.

Exemplo:

<video width="500" height="300" controls>

<source src="videos/meu-video.mp4" type="video/mp4">

<source src="videos/[Link]" type="video/webm">

Seu navegador não suporta vídeos HTML5.

</video>

Veja o resultado:

Figura 1 – Renderizando o vídeo.

Importante: é importante otimizar as imagens e os vídeos para a web, reduzindo o tamanho do arquivo
sem comprometer a qualidade, para garantir um carregamento rápido da página.

CRIAÇÃO DE HIPERLINKS
Você já viu no início da aula o que são URLs e URIs, agora vamos aprender a definir hiperlinks
utilizando este conceito.
A tag <a> (âncora) é usada para criar hiperlinks em HTML. O atributo mais importante da tag <a> é o
atributo href, que especifica o destino do link. O destino pode ser uma URL (para vincular a outra página
da web), um caminho de arquivo (para vincular a um arquivo no mesmo site) ou um ID de elemento
(para criar um link interno na mesma página).

Recordando:

Link para outra página: <a href="[Link] o site</a>

Link para um arquivo: <a href="arquivos/[Link]">Baixar Documento</a>
Link interno (âncora):

o Definir o destino: <h2 id="secao2">Seção 2</h2>

o Criar o link: <a href="#secao2">Ir para a Seção 2</a>

O atributo target especifica onde abrir o link. target="_blank" abre o link em uma nova aba ou janela.

Exemplo:

<a href="[Link] target="_blank">Visite o site Exemplo em nova aba</a>

Links também podem ser usados para e-mail usando a palavra “[Link] mas este recurso não é tão útil
hoje, pois a maioria das pessoas usa aplicativos de e-mail na web e não instalados no seu computador
(por exemplo: gmail, hotmail, etc.), e isso gera alguns problemas.

Exemplo:

<a href="[Link] para contato@[Link]</a>

Nota: é importante usar texto âncora descritivo para os links, para que os usuários e os mecanismos de
busca entendam o destino do link.

Siga em Frente...
A acessibilidade é fundamental para garantir que todas as pessoas, incluindo aquelas com deficiência,
possam acessar e compreender o conteúdo da web. Ao trabalhar com mídias, algumas práticas são
essenciais:

Texto alternativo para imagens: o atributo alt na tag <img> fornece uma descrição textual da imagem.
Leitores de tela leem esse texto para usuários com deficiência visual. É importante fornecer
descrições concisas e relevantes. Se a imagem for puramente decorativa, o atributo alt deve estar
vazio (alt="").
Legendas e transcrições para vídeos: legendas (usando a tag <track>) fornecem texto sincronizado
com o áudio do vídeo, beneficiando pessoas com deficiência auditiva. Transcrições fornecem o texto
completo do áudio do vídeo. Ambas são importantes para acessibilidade.
 Controles de vídeo acessíveis: certifique-se de que os controles de reprodução do vídeo (play,
pause, volume, etc.) sejam acessíveis por teclado, para que usuários que não podem usar o mouse
possam controlá-los. O atributo controls na tag <video> geralmente fornece controles acessíveis por
padrão.
Descrição estendida: para imagens complexas que requerem mais detalhes do que o atributo alt
pode fornecer, considere usar uma descrição estendida (por exemplo, um link para uma página com
a descrição completa).

Exemplo de legenda para vídeo:

<video width="500" height="300" controls>

<source src="videos/meu-video.mp4" type="video/mp4">

<track src="legendas/[Link]" kind="subtitles" srclang="pt-BR"

label="Português">

Seu navegador não suporta vídeos HTML5.

</video>

Nota: o arquivo [Link] é um arquivo de legenda no formato WebVTT.

Vamos Exercitar?
A problematização inicial te desafiava a criar um portfólio online visualmente atraente e acessível. Agora
com o conhecimento prático desta aula, podemos construir esse portfólio de forma eficaz.

Para exibir projetos visualmente, utilizamos a tag <img> para inserir imagens e a tag <video> para
incorporar vídeos, organizando o conteúdo de forma atraente e informativa.

Para criar um sistema de navegação intuitivo, utilizamos a tag <a> para criar hiperlinks entre as
diferentes seções do portfólio, permitindo que os visitantes explorem o conteúdo facilmente.

E, crucialmente, garantimos a acessibilidade do portfólio para todos. Fornecemos texto alternativo para
imagens usando o atributo alt, adicionamos legendas aos vídeos usando a tag <track>, e garantimos
que os controles de vídeo sejam acessíveis por teclado.

Com essas técnicas, construímos um portfólio que não apenas apresenta o trabalho de forma eficaz,
mas também é inclusivo e acessível a todos os usuários.

Saiba mais
Para ampliar os seus conhecimentos sobre os temas desta aula, recomendamos a leitura dos capítulos
1 e 2 do livro “HTML & CSS – Aprenda como construir páginas web”. Os capítulos reforçam e
complementam o que vimos na aula.

Referências
ALVES, William Pereira. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa,
2021. [Minha Biblioteca]

ALVES, William P. Desenvolvimento e Design de Sites. Rio de Janeiro: Érica, 2014. [Minha Biblioteca]

FOROUZAN, Behrouz A. Protocolo TCP/IP. 3. ed. Porto Alegre: ArtMed, 2010. [Minha Biblioteca]

Videoaula de Encerramento
Prepare-se para transformar o que você aprendeu em algo tangível! Nesta videoaula prática, veremos
como aplicar seus conhecimentos de HTML para incorporar mídias e criar links. Descobriremos a
relevância profissional de tornar suas páginas mais interativas e acessíveis, uma habilidade essencial na
criação de experiências web completas e semânticas. Não perca a oportunidade de ver a teoria se
concretizar!

Faça o download do arquivo

Ponto de Chegada
Olá, estudante!

Durante as aulas, você embarcou em uma jornada fundamental pelo universo da construção de páginas
web. Você desvendou o conceito de marcação, a linguagem-base que molda a internet como a
conhecemos, mergulhou na estrutura básica de um documento HTML, entendendo como cada elemento
se encaixa para formar uma página coesa, explorou e identificou os elementos fundamentais,
aprendendo as tags essenciais que dão vida ao conteúdo e estabelecem a espinha dorsal de qualquer
site. Em cada etapa, você foi desafiado a pensar como um desenvolvedor, não apenas memorizando
tags, mas compreendendo sua função e seu propósito.

Os documentos HTML são formados por textos puros, que podem ser criados até por aplicativos de edição de
texto, como o Bloco de Notas do Windows. Eles são formados por um grupo de seções, sendo que cada uma
delas é destinada a abrigar um tipo de conteúdo específico (Alves 2021, p. 7).

Você aprofundou seu conhecimento sobre a organização do conteúdo, aprendendo a definir e utilizar as
tags HTML com precisão e compreendeu a importância crucial da hierarquia e do aninhamento para
estruturar informações de forma lógica e navegável. Uma das revelações mais significativas desta
unidade foi a profunda relevância da semântica em HTML. Descobriu também que a semântica vai além
da aparência visual, permitindo que o conteúdo seja interpretado corretamente não apenas por
navegadores, mas por leitores de tela para acessibilidade e por mecanismos de busca, tornando a web
um ambiente mais inclusivo e significativo para todos os usuários. Essa compreensão é vital para criar
páginas que não só são visualmente atraentes, mas também estruturalmente robustas e informativas
para a máquina.

Usar a semântica apropriada para cada elemento torna as páginas mais inteligíveis para leitores de tela, e faz
com que elas sejam mostradas apropriadamente em diferentes plataformas (Harold, 2010, p. 174).

Sua jornada também o levou ao desenvolvimento de interatividade e apresentação de dados. Você

dominou a arte de criar formulários complexos e funcionais para coletar informações variadas dos
usuários, desde simples textos até opções de seleção. Paralelamente, aprendeu a estruturar tabelas de
forma elegante e eficiente, transformando dados brutos em informações claras e organizadas, além de
adquirir o conhecimento para aplicar princípios de validação de dados, garantindo a qualidade e a
confiabilidade das informações recebidas. Finalmente, você deu vida e dinamismo às suas páginas ao
dominar a inserção de imagens e vídeos, transformando o estático em uma experiência visual rica e
envolvente. Adicionalmente, aprendeu a criar hiperlinks, construindo sistemas de navegação fluidos que
conectam diferentes seções e recursos, sempre com um olhar atento à acessibilidade em conteúdo
multimídia, garantindo que suas criações sejam usáveis por todos.

Esses conhecimentos sólidos são a base para desenvolver a competência central desta Unidade, que
exige que você compreenda a estrutura básica e semântica de páginas web em sua totalidade. Isso vai
muito além de uma simples codificação; envolve a capacidade de analisar o propósito do conteúdo que
você deseja apresentar e, com base nessa análise, aplicar as tags HTML de forma estratégica.

É Hora de Praticar!
Desafio Digital da "Tech Solutions Hub"

Cenário Hipotético: O Projeto "Conecta Saúde"

Você, é analista júnior na empresa Tech Solutions Hub, uma agência de desenvolvimento web
conhecida por suas soluções inovadoras e com foco em acessibilidade e usabilidade. Seu gestor direto,
Dr. Lucas Mendes, líder da equipe de Front-End, é um entusiasta da web semântica e da criação de
experiências digitais inclusivas.

A Tech Solutions Hub acaba de fechar um contrato estratégico com a Clínica Bem-Estar, uma nova e
moderna clínica médica que busca expandir sua presença digital com um portal de agendamento online
e informações sobre seus serviços. A missão da Clínica Bem-Estar é facilitar o acesso à saúde para
todos os seus pacientes, incluindo aqueles com necessidades especiais, o que torna a acessibilidade
um pilar fundamental do projeto.

O primeiro grande desafio para você é desenvolver a estrutura HTML do módulo de cadastro de novos
pacientes e o painel de visualização de horários de atendimento dos médicos. Este módulo é a porta de
entrada para a interação dos pacientes com a clínica online e precisa ser robusto, intuitivo e, acima de
tudo, semanticamente correto e acessível. O Dr. Lucas Mendes enfatizou que a base HTML deve ser
impecável, garantindo que um leitor de tela ou um motor de busca compreenda perfeitamente o
propósito de cada elemento.

Ele te entregou os protótipos visuais e algumas especificações de funcionalidade, mas deixou a

implementação da estrutura HTML em suas mãos, confiando na sua capacidade de aplicar os conceitos
de estrutura, semântica, formulários, tabelas, e a inclusão de mídias e links de forma exemplar.

Problema: Construindo a Fundação Acessível

O desafio principal é construir as páginas HTML do módulo de cadastro e do painel de horários,

garantindo que todos os elementos estejam organizados de forma semântica e que a interação com o
usuário seja fluida e acessível. A precisão na estruturação dos dados e na coleta de informações é
crucial para o sucesso do projeto.

Para guiar seu trabalho, reflita sobre as seguintes questões:

1. Como você estruturaria o formulário de cadastro de pacientes, utilizando tags HTML semanticamente
corretas para cada tipo de informação (nome, email, telefone, data de nascimento, etc.), garantindo
que os campos obrigatórios sejam claramente indicados e que a validação de dados ocorra de forma
aprimorada?
2. De que forma você organizaria o painel de horários de atendimento, apresentando as informações
dos médicos (nome, especialidade, dias, horários disponíveis) em uma tabela HTML que seja clara,
fácil de ler e, simultaneamente, semanticamente acessível para tecnologias assistivas, e como você
incorporaria um link para o perfil detalhado de cada médico?
3. Considerando a exigência de acessibilidade da Clínica Bem-Estar, como você garantiria que, caso
fossem adicionadas imagens ou vídeos sobre os médicos ou a clínica, eles estariam otimizados e
acessíveis a todos os usuários, incluindo aqueles que dependem de leitores de tela ou outras
tecnologias assistivas?

Sua meta não é apenas exibir a informação, mas transmitir seu significado de maneira clara, coesa e
otimizada para qualquer tipo de dispositivo, navegador ou usuário. Ao construir suas páginas, estruture-
as com um pensamento voltado para a organização lógica, a apresentação eficaz de dados e a
responsividade, e integre mídias e links de modo a otimizar a experiência do usuário, sempre
priorizando a acessibilidade.

As pessoas deficientes lutam pelo direito ao exercício da cidadania, pela autonomia individual, pela plena e
efetiva participação e inclusão na sociedade. Por isso, propiciar a acessibilidade e a inclusão é uma questão
ética, de responsabilidade social e está previsto em legislação. Acessibilidade e Inclusão são temas
indispensáveis, atributos essenciais em todo projeto e jamais podem ser deixadas em segundo plano (Batista,
Ulbricht, Fadel, 2017, p. 3).

Com as habilidades que você adquiriu, você está plenamente capacitado a ir além do básico. Utilize
esse robusto arsenal de conhecimentos para projetar e criar interfaces web que não só funcionam de
maneira impecável, mas que comunicam ideias de forma poderosa, informam com clareza e interagem
de forma eficiente, inclusiva e otimizada para o vasto e dinâmico universo da internet. Sua capacidade
de transformar ideias em realidade digital, considerando a funcionalidade e a semântica, será um
diferencial marcante em sua jornada profissional.

Possíveis Caminhos de Resolução

Para resolver este estudo de caso, você deverá aplicar integralmente os conhecimentos adquiridos
sobre a estrutura básica e semântica de páginas web. Aqui está um caminho exemplar para iniciar a
resolução:

1. Estruturação semântica do formulário de cadastro ([Link]):

Comece com a tag <form> para delimitar o formulário.

Utilize <fieldset> e <legend> para agrupar campos relacionados, como "Dados Pessoais" e
"Informações de Contato", melhorando a organização e a acessibilidade.
Para cada campo de entrada, use a combinação de <label> e <input>. O atributo for do <label> deve
corresponder ao id do <input> correspondente, criando uma associação explícita que é crucial para
usuários de leitores de tela.
Exemplo para o nome: <label for="nome">Nome Completo:</label><input type="text" id="nome"
name="nome" required>
Explore diferentes type de input (e.g., text, email, tel, date, number), select com <option> e textarea
conforme a necessidade de cada campo.
Aplique os atributos de validação do HTML5 como required, pattern, minlength, maxlength, min, max
diretamente nas tags <input> para validação básica no lado do cliente, fornecendo feedback imediato
ao usuário. Por exemplo, para um campo de email: <input type="email" id="email" name="email"
required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="Informe um email válido">.
Adicione um botão de envio utilizando <button type="submit">Cadastrar</button>.

2. Organização do painel de horários com tabelas e links ([Link]):

Utilize a tag <table> para iniciar a tabela.

O uso de <thead>, <tbody> e <tfoot> (se necessário) é fundamental para a semântica da tabela,
dividindo o cabeçalho, o corpo e o rodapé.
Crie as linhas da tabela com <tr> e as células de cabeçalho com <th> (dentro de <thead>) e as
células de dados com <td> (dentro de <tbody>).
Para garantir acessibilidade, use o atributo scope="col" para cabeçalhos de coluna e scope="row"
para cabeçalhos de linha (se aplicável), e <caption> para um título descritivo da tabela.
Dentro das células que contêm o nome do médico, insira a tag <a> para criar um link para um
possível perfil detalhado desse médico. Por exemplo: <td><a href="perfil_dr_santos.html">Dr. João
Santos</a></td>. O atributo href apontaria para uma página fictícia de perfil.

3. Garantindo acessibilidade em mídias (exemplo para imagens no perfil do médico):

Se houver imagens de perfil dos médicos ou da clínica, utilize a tag <img> com o atributo alt
preenchido de forma descritiva. Exemplo: <img src="dr_santos.jpg" alt="Foto do Dr. João Santos,
especialista em cardiologia.">. Este texto alternativo é lido por leitores de tela, descrevendo o
conteúdo da imagem para usuários com deficiência visual.
 Para vídeos (se houvesse um vídeo institucional da clínica ou um depoimento de paciente), utilize a
tag <video>. Além do src, controls, width, height, considere incluir a tag <track> para legendas e
descrições de áudio, garantindo a acessibilidade para pessoas com deficiência auditiva ou visual.

Ao seguir esses passos, você não apenas construirá a estrutura das páginas, mas também aplicará os
princípios de semântica e acessibilidade que são diferenciais cruciais no mercado de trabalho atual. A
resolução deste estudo de caso demonstrará sua capacidade de compreender a estrutura básica e
semântica de páginas web, uma competência valiosa para sua jornada profissional.
Figura 1 – Infográfico.

ALVES, William Pereira. HTML & CSS: aprenda como construir páginas web. São Paulo: Expressa,
2021. [Minha Biblioteca]

BATISTA, Claudia R.; ULBRICHT, Vania R.; FADEL, Luciane M. Design para acessibilidade e
inclusão. São Paulo: Editora Blucher, 2017. [Minha Biblioteca]

HAROLD, Elliotte R. Refatorando HTML. Porto Alegre: Bookman, 2010. [Minha Biblioteca]