MyLeoNes™

Estrutura HTML — Informática, 11–13

Como uma página web indica o que é cada parte do seu conteúdo. Informática, 11–13 anos.

Ideia

O HTML dá a uma página web uma estrutura que o navegador consegue compreender. As etiquetas marcam funções como título, parágrafo, ligação ou imagem, em vez de dizerem apenas como as letras devem parecer. O navegador lê essa estrutura e transforma-a na página que vês, enquanto outras ferramentas podem usar o mesmo significado.

Porquê

Uma página feita apenas de instruções visuais é difícil de interpretar por navegadores, motores de pesquisa e leitores de ecrã. O HTML foi desenvolvido para resolver o problema de partilhar documentos entre computadores diferentes, mantendo uma estrutura com significado. Separar a estrutura da decoração também facilita adaptar uma página a um telemóvel, a um ecrã grande ou a uma leitura em voz alta.

Exemplo resolvido

Para criar uma página pequena, começa por pôr a etiqueta de título à volta de «O Meu Jardim». Acrescenta uma etiqueta de parágrafo à volta de «Estão abertas três flores de girassol.» Depois, acrescenta uma etiqueta de ligação com palavras como «Ver o mapa» e um endereço de destino. O navegador mostra assim título, texto normal e uma ligação clicável com as funções certas.

Armadilha comum

Um erro comum e compreensível é usar uma etiqueta de título apenas porque torna o texto maior. Isso parece sensato quando te concentras no resultado visível, mas um título também informa as ferramentas de que o texto é o nome de uma secção importante. Usa a estrutura para o significado e o estilo para controlar tamanho, cor e espaço.

Onde aparece

O HTML é a estrutura por baixo de páginas de notícias, lojas online, sites de escolas e páginas de jogos. Os motores de pesquisa usam os títulos e as ligações para compreender o conteúdo, e os leitores de ecrã usam essas funções para falar a página por uma ordem útil. Podes ver esta estrutura nas ferramentas de programador do navegador.

Continua a explorar

Outras línguas

A carregar o MyLeoNes™…