Introdução ao HTML
HTML é uma linguagem de marcação para criar sites. É composta por elementos que estruturam textos, imagens e outros conteúdos exibidos no navegador.
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). É a linguagem de marcação padrão utilizada para criar páginas e aplicações web que podem ser exibidas em um navegador. Desenvolvida no início dos anos 1990, combina Hipertexto (que define links entre páginas web) e Marcação (que descreve a estrutura do conteúdo com tags).
HTML não é uma linguagem de programação — não possui lógica ou computação. Em vez disso, ela descreve a estrutura: quais partes de uma página são títulos, parágrafos, listas, links ou imagens. Em uma página web típica, três tecnologias trabalham juntas:
- HTML fornece a estrutura e o conteúdo (este capítulo).
- CSS controla a apresentação — cores, layout, fontes.
- JavaScript adiciona comportamento e interatividade.
As tags HTML são usadas para definir elementos HTML. Um elemento HTML normalmente consiste em uma tag de abertura e uma tag de fechamento, com o conteúdo inserido entre elas. Os navegadores leem as tags para criar documentos HTML e renderizar seu conteúdo na tela. Algumas das tags básicas do HTML incluem <html>, <head>, <title>, <body>, <h1> a <h6>, <p>, <br>, <hr>, <ul>, <ol>, <li>, <a>, <img>, entre muitas outras.
Seu Primeiro Documento HTML
Aqui está uma página HTML completa e mínima. Digite-a em qualquer editor HTML de texto simples, salve como um arquivo com extensão .html, e abra em qualquer navegador — você verá um título e um parágrafo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My First Page</title>
</head>
<body>
<h1>Hello, world!</h1>
<p>This is my first web page.</p>
</body>
</html>Quando você abre este arquivo, o navegador analisa a marcação (lê as tags e constrói uma árvore de elementos) e depois renderiza (exibe o resultado na tela). O <h1> se torna um título grande e o <p> se torna um parágrafo normal — você nunca vê os próprios colchetes angulares, apenas seus efeitos. Adicione CSS e JavaScript depois para estilizar e animar o mesmo conteúdo.
Versões do HTML
O HTML foi desenvolvido pela primeira vez pelo físico britânico Tim Berners-Lee em 1990. Desde então, houve muitas versões do HTML.
| Versão | Ano |
|---|---|
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1997 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
Algumas observações que facilitam a leitura da tabela. O HTML 4.01 (1999) permaneceu como a versão dominante por cerca de uma década, portanto a maior parte da web foi construída nele por anos. O XHTML 1.0 (2000) reformulou o HTML usando regras XML mais rígidas — por exemplo, toda tag precisava ser fechada e escrita em letras minúsculas — mas sua rigidez nunca se consolidou para a criação cotidiana de conteúdo. O HTML5 foi publicado como Recomendação W3C estável em 2014 (um marco anterior de 2012 era apenas um rascunho) e é a versão que você usa hoje.
Desde 2014, o HTML não é mais lançado em versões numeradas discretas. Em vez disso, é mantido como o HTML Living Standard da WHATWG — uma especificação única que é atualizada continuamente à medida que novos recursos são adotados. Na prática, é isso que "HTML" significa hoje: não há um "HTML6" a caminho, apenas um padrão em evolução. Quando as pessoas dizem "HTML5" agora, geralmente se referem a essa versão moderna e viva da linguagem.
Conceitos Básicos: Elementos, Tags e Atributos
Os três blocos de construção do HTML são elementos, tags e atributos. Um elemento é a unidade estrutural principal de uma página web. As tags marcam onde um elemento começa e termina, e os atributos fornecem informações extras sobre um elemento. As duas próximas seções examinam tags e atributos em detalhes.
Tags HTML
As tags HTML são usadas para estruturar o conteúdo de um site (texto, hiperlinks, imagens, mídia, etc.). As tags não são exibidas nos navegadores, elas apenas "instruem" os navegadores sobre como mostrar o conteúdo da página web.
Existem mais de 100 tags em HTML, e você pode encontrá-las em nosso tutorial de HTML.
As tags HTML são escritas entre colchetes angulares (por exemplo, <html>).
A maioria das tags HTML vem em pares, como as tags <p> </p>. A primeira tag do par é chamada de tag de abertura (início), e a segunda é a tag de fechamento (fim). As informações são escritas entre as tags de abertura e fechamento.
No entanto, existem tags não pareadas, ou tags vazias, que possuem apenas uma tag de abertura (por exemplo, <img>).
Vamos considerar um exemplo.
Se você precisar definir um parágrafo (que é um elemento), deve usar a tag <p>. O conteúdo do parágrafo é escrito entre as tags de abertura (<p>) e fechamento (</p>).
Exemplo
A marcação abaixo coloca um único parágrafo dentro de uma página mínima:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Paragraph example</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>O navegador oculta as próprias tags <p> e </p> e renderiza apenas o texto entre elas — "This is a paragraph." — como um bloco de texto do corpo.
Atributos HTML
Os atributos HTML são adicionados a um elemento para fornecer informações adicionais sobre ele. Os atributos são escritos dentro da tag de abertura e seguem a sintaxe name="value": o nome diz o que você está configurando, e o valor (entre aspas) diz para o que configurá-lo.
Por exemplo, a tag <img> usa o atributo src para apontar para um arquivo de imagem, width e height para dimensioná-la, e alt para fornecer texto alternativo para leitores de tela e para casos em que a imagem não carrega:
<img src="logo.png" width="200" height="100" alt="Company logo">Aqui quatro atributos são definidos em um único elemento. Um único elemento pode ter tantos atributos quantos forem necessários, separados por espaços. Você pode aprender mais no capítulo Atributos HTML.
Estrutura de um Documento HTML
A declaração <!DOCTYPE html> especifica a versão HTML usada no documento. Todo documento HTML deve começar com esta declaração para que os navegadores possam renderizar a página em conformidade com os padrões HTML.
Existem vários tipos de <!DOCTYPE> definidos para cada versão do HTML.
Todo o conteúdo da página web é escrito entre as tags <html> </html>. O elemento <html> é usado para informar aos navegadores que se trata de um documento HTML.
O elemento <head> contém metadados (dados sobre o documento HTML), conjunto de caracteres, título do documento, estilos, etc. Esses dados não são exibidos para os visitantes.
Dentro do <head>, a tag mais copiada é a meta tag de viewport. Adicionar <meta name="viewport" content="width=device-width, initial-scale=1"> diz aos navegadores móveis para adequar a largura da página à largura do dispositivo em vez de reduzir um layout de tamanho desktop — sem ela, sua página parece minúscula em celulares.
O elemento <title> exibe o título do site na aba do navegador quando a página é carregada. O título é escrito entre as tags <title> </title>.
O elemento <body> contém o conteúdo da página web (texto, imagens, vídeos, etc.). O conteúdo é escrito entre as tags <body> e </body>.
Os elementos de título contêm diferentes tipos de títulos. Existem seis níveis de título — <h1>-<h6>, onde <h1> é a tag mais importante e <h6> é a menos importante.
O elemento <p> contém parágrafos de texto. O conteúdo é escrito entre as tags <p> e </p>.
Exemplo
Introdução ao HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title of the document</title>
</head>
<body>
<h1>The most important heading.</h1>
<p>The first paragraph.</p>
<h2>Subheading</h2>
</body>
</html>Resultado
Para começar a escrever código HTML para seu site, você precisará de um editor. Vamos falar sobre editores HTML no próximo capítulo.