Neste artigo, apresentarei o HTML5, abordando o que é o HTML5, o que é uma tag, suas partes e Doctype HTML5, bem como sua estrutura básica.
O que é o HTML e o HTML5?
HTML significa Linguagem de Marcação de Hipertexto e, como o nome sugere, é uma linguagem de marcação, não uma linguagem de programação. O HTML forma a base para o desenvolvimento de páginas da web e sistemas web. Ele possibilita a delimitação de diferentes partes de uma página da web, como cabeçalhos, rodapés, menus, listas, parágrafos, imagens, botões e muito mais. No entanto, o HTML não lida com o posicionamento de elementos; o CSS é usado para esse fim.
O HTML5 é a quinta iteração do HTML e é a versão atual. Ele introduz novos recursos, focados, principalmente, em aprimorar a semântica da web.
Como o HTML5 Funciona
O HTML e o HTML5 funcionam de maneira semelhante a arquivos XML, assemelhando-se a árvores onde os elementos têm filhos (outros elementos). Cada elemento, conhecido como uma tag, é aberto e fechado, e os elementos podem ser aninhados uns dentro dos outros.
Considere o seguinte exemplo de um arquivo HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body lang="pt-br">
<h1>Meu Primeiro Título</h1>
<p>Meu primeiro parágrafo.</p>
</body>
</html>
Observe que a tag <html> do HTML é aberta na segunda linha e fechada na última linha. Dentro do elemento HTML, existem tags head e body, que são irmãs. Essas duas tags são filhas da tag html.
A tag body inclui um atributo chamado lang, com um valor de pt-br.
Dentro da seção body, existem duas tags, h1 e p. A indentação adequada melhora a legibilidade do código.
A primeira linha contém a tag DOCTYPE, única porque não possui uma tag de fechamento. Essa tag indica que o documento segue os padrões do HTML5.
Anatomia de uma Tag HTML
Como mencionado anteriormente, uma tag pode ter atributos, cada um com valores correspondentes. A estrutura de uma tag é a seguinte:
<elemento atributo1="valor1" atributo2="valor2">conteúdo interno</elemento>
Onde:
-
<elemento ...abre a tag do elemento. -
atributo1="valor1"é um atributo da tag, representando características como cor, tamanho ou outras propriedades. - conteúdo interno: esta área pode conter outras tags, valores (como texto ou números) ou nada.
-
</elemento>fecha a tag.
Tags de Auto-fechamento
A maioria das tags (exceto DOCTYPE) requer uma tag de fechamento, mas algumas podem ser autofechadas dentro da tag de abertura. Dois casos comuns incluem:
<head>
<link rel="stylesheet" href="styles.css" />
</head>
<head>
<img src="image.png" alt="descrição" />
</head>
Observe a barra diagonal / ao final da tag de abertura, indicando o autofechamento.
Estrutura Básica e Seu Primeiro Código HTML5
Crie index.html e use o seguinte código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Arquivos externos (CSS, JS) e metadados -->
<meta charset="utf-8" />
<title>Título da Página</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<!-- Prefira class em vez de id para CSS; id é principalmente para JS -->
<header class="cabeçalho" id="cabeçalho">
Cabeçalho da Página
</header>
<nav class="navegação">
Menu
</nav>
<main class="conteúdo">
<!-- Apenas um por página/documento -->
Conteúdo Principal
</main>
<footer class="rodapé">
</footer>
</body>
</html>
-
<!DOCTYPE html>: indica que o documento será em formato HTML - Elemento
html: contém todos os elementos de um documento HTML. - Elemento
head: contém os elementos referentes as configurações da página (título, descrição, etc.), arquivos externos vinculados na página e ícone do site. - Elemento
body: é o corpo do documento, onde todo elemento disponível para o usuário está. Só pode haver um por página. - Elemento
header: contém elementos que formam o cabeçalho da página, a parte superior visível da página. Só pode haver um por parte (um porbody, um porsection, um porarticle). - Elemento
nav: contém elementos para menu de navegação. - Elemento
main: contém a parte principal do site. Só deve haver ummainpor página. - Elemento
footer: contém elementos que formam o rodapé da página, a parte inferior visível da página. Só pode haver um por parte (um porbody, um porsection, um porarticle). - Atributo
class: determina a classe do elemento, pense em classe como no mundo real, você faz parte da classe dos estudantes, por exemplo. Vamos aprender mais sobre isso num próximo texto.
Comentários em HTML
Como evidente no código acima, o HTML permite a inclusão de comentários. A sintaxe é simples: comece com <!-- e termine com -->. Por exemplo:
<!-- Este é um comentário -->
Vamos Além
Nos próximos artigos, você se aprofundará em tags de bloco, conceitos da web semântica (incluindo tags semânticas) e técnicas para identificar tags. Fique atento!
Top comments (0)