Hypertext Markup Language (HTML) é o código que você usa para estruturar seu conteúdo web, dando significado e propósito. Por exemplo, meu conteúdo é organizado em parágrafos, ou em uma lista de pontos? Eu tenho imagens na minha página? Eu tenho uma tabela de dados? Sem pressionar você, o HTML básico provê informação suficiente para você se familiarizar com HTML.
Então, o que é HTML realmente?
HTML não é realmente uma linguagem de programação; é uma linguagem de marcação, usada para dizer ao navegador como exibir as páginas que são visitadas. Ela consiste de uma série de elementos, que você junta ao redor de diferentes partes do seu conteúdo para que ele apareça ou aja de um determinado jeito. Por exemplo, veja a seguinte linha de conteúdo:
My cat is very grumpy
Se nós queremos oficialmente dizer que isso é um parágrafo, nós podemos envolver o elemento em um código (<p>):
<p>My cat is very grumpy</p>
Anatomia de um elemento HTML
Vamos explorar esse parágrafo mais profundamente.
As principais partes de um elemento são:
- A tag de abertura (opening tag): Consiste no nome do elemento (no caso, p), envolvido em chaves (chevrons) de abertura e fechamento. Isso demonstra onde o elemento começa, ou onde seu efeito se inicia — nesse caso, onde é o começo do parágrafo.
- A tag de fechamento (closing tag): Isso é a mesma coisa que a tag de abertura, exceto que inclui uma barra antes do nome do elemento. Isso demonstra onde o elemento acaba — nesse caso, onde fica o fim do parágrafo. Esquecer de incluir uma tag de fechamento é um dos erros mais comuns de iniciantes, e pode levar a resultados estranhos.
- O conteúdo (content): Esse é o conteúdo do elemento, que nesse caso é só texto.
- O elemento (element): A tag de abertura, com a de fechamento, com o conteúdo formam o elemento.
Elementos também podem ter atributos, que parecem assim:
Atributos contém informação extra sobre o elemento, que você não quer que apareça no elemento de fato. Nesse caso, o atributo classe (class) permite que você dê ao elemento um nome de identificação (editor-note), que depois pode ser usado para dar ao elemento informações de estilo ou outras coisas.
Um atributo sempre deve ter:
- Um espaço entre ele e o nome do elemento (ou o atributo anterior, se o elemento já tiver um )
- O nome do atributo, seguido por um sinal de igual
- Aspas de abertura e fechamento, envolvendo todo o valor do atributo
Aninhando elementos
Você pode colocar elementos dentro de outros elementos também — isso é chamado aninhar (nesting). Se quisermos declarar que o gato é MUITO rabugento, podemos envolver a palavra "muito" em um <strong>, o que significa que a palavra deve ser fortemente enfatizada:
<p>My cat is <strong>very</strong> grumpy.</p>
Contudo, você precisa ter certeza que seus elementos estão devidamente aninhados: no exemplo acima, nós abrimos o elemento <p> primeiro, depois o negrito, então temos que fechar o negrito primeiro e depois o p. A forma a seguir é incorreta:
<p>My cat is <strong>very grumpy.</p></strong>
Os elementos tem que abrir e fechar perfeitamente para que eles estejam claramente dentro ou fora um do outro. Se eles se sobrepuserem como no exemplo, o browser vai tentar adivinhar o que você está tentando dizer, o que pode gerar resultados inesperados. Então não faça isso!
Elementos vazios
Alguns elementos não tem conteúdo, e são chamados elementos vazios. Considere o elemento <img> que temos na nossa HTML:
<img src="images/firefox-icon.png" alt="My test image">
Ele contem dois atributos, mas não há tag </img> de fechamento, e não há conteúdo interno. Isso acontece porque uma imagem não envolve conteúdo para ter efeito em si mesma. Sua proposta é incorporar uma imagem na página HTML, no lugar que o código aparece.
Anatomia de um elemento HTML
Isso é o básico dos elementos HTML individuais, mas eles não são muito úteis por si só. Agora vamos ver como elementos individuais podem formar uma página inteira de HTML. Vamos revisitar os códigos que colocamos no exemplo de index.html (que nós conhecemos no artigo Lidando com arquivos):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Aqui nós temos:
<!DOCTYPE html>— o doctype. Há muito tempo, quando o HTML era novo (por volta de1991/2), doctypes eram criados para agir como links para um conjunto de regras que a página HTML tinha que seguir para ser considerada bom HTML, o que poderia significar checagem automática ou outras coisas úteis. No entanto, esses dias ninguém se importa sobre eles, e eles são somente um artifício histórico que precisa ser incluído para tudo funcionar bem. Por agora, é tudo o que você precisa saber.<html></html>—o elemento <html>. Esse elemento envolve todo o conteúdo da página e às vezes é conhecido como o elemento raiz.<head></head>— o elemento<head>. Esse elemento age como um recipiente de tudo o que você deseja incluir em uma página HTML que não é o conteúdo que você quer mostrar para quem vê sua página. Isso inclui coisas como palavras-chave e uma descrição que você quer que apareça nos resultados de busca, CSS para dar estilo ao conteúdo, declarações de conjuntos de caracteres, e mais.<body></body>— o elemento<body>. Contém todo o conteúdo que você quer mostrar ao público que visita sua página, seja texto, imagens, vídeos, jogos, faixas de áudio tocáveis ou seja lá o que for.<meta charset="utf-8">— esse elemento aponta qual conjunto de caracteres seu documento deve usar para o utf-8, que inclui praticamente todos os caracteres conhecidos por todas as linguagens humanas. Basicamente, isso pode lidar com todo conteúdo em texto que você colocar. Não há razão para não escrever esse código, e vai te ajudar a evitar problemas depois.<title></title>— isso indica o título da sua página, que é o título que aparece no topo de browser quando sua página carrega, e é usado para descrever a página quando você a coloca nos favoritos.
Imagens
Vamos voltar nossa atenção para o elemento de imagem novamente:
<img src="images/firefox-icon.png" alt="My test image">
Como dissemos antes, isso incorpora uma imagem na nossa página na posição que aparece. Isso é feito pelo atributo src (source), que contém o caminho para nosso arquivo de imagem.
Mas nós também incluímos um atributo alt (alternative) — que contém algum texto que descreve a imagem, e pode ser acessado por usuários que não podem ver a imagem, talvez porque:
- Eles são cegos ou parcialmente cegos. Usuários com deficiência visual significativa geralmente usam ferramentas chamadas Leitores de Tela para lerem o texto alt.
- Algo deu errado no código, o que significa que a imagem não pode ser mostrada. Por exemplo, tente deliberadamente mudar o caminho dentro do atributo
srcpara fazê-lo ficar incorreto. Se você salvar e recarregar a página, você deve ver algo assim no lugar da imagem:
A frase chave sobre texto alt é "texto que descreve a imagem". O texto alt que você escreve deve dar ao leitor o suficiente para dar uma boa ideia do que a imagem mostra, a partir da leitura. Então nosso texto "My test image" (minha imagem teste) não é bom. Um texto melhor poderia ser "A logo do Firefox: uma raposa em chamas envolvendo a Terra."
Tente usar textos alt melhores para sua imagem.
Nota: Ache mais sobre acessibilidade na página do MDN sobre Acessibilidade.
Marcando o texto
Essa sessão abordará alguns elementos de HTML que você usará para marcar o texto.
Cabeçalhos
Elementos de cabeçalho permitem que você especifique que certas partes do seu conteúdo são cabeçalhos ou sub-cabeçalhos do seu conteúdo. Do mesmo jeito que um livro tem um título principal e um título para cada capítulo e subtítulos dentro desses, um documento HTML também pode. HTML contém seis níveis de cabeçalho, <h1>–<h6> embora você vá provavelmente usar mais o 3-4:
<h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4>
Agora é sua vez: tente adicionar um título que tem a ver com sua página, acima do seu elemento <img>.
Parágrafo
Como explicado anteriormente, os elementos <p> contém parágrafos de texto; você vai usá-los bastante para marcar conteúdo de texto.
<p>This is a single paragraph</p>
Adicione seu texto (você deve ter isso desde o Com o que seu site deve parecer?) em alguns parágrafos, diretamente abaixo do seu elemento <img>.
Listas
Um monte de conteúdo da Web está organizado em listas, então o HTML tem elementos especiais para elas. Toda lista deve ter pelo menos 2 elementos. Os tipos mais comuns de listas são as ordenadas e as não-ordenadas:
- Listas não-ordenadas são para listas onde a ordem dos itens não importa, como uma lista de compras, por exemplo. Essas são envolvidas em um elemento
<ul>. - Listas Ordenadas são para listas onde a ordem dos itens importa, como uma receita. Essas são envolvidas em um elemento
<ol>.
Cada item dentro das listas é posto dentro de um elemento <li> (item de lista).
Então, por exemplo, se nós quisermos tornar uma parte de um parágrafo uma lista:
<p>At Mozilla, we’re a global community of technologists, thinkers, and builders working together ... </p>
Nós podemos fazer assim:
<p>At Mozilla, we’re a global community of</p>
<ul>
<li>technologists</li>
<li>thinkers</li>
<li>builders</li>
</ul>
<p>working together ... </p>
Tente adicionar uma lista ordenada ou não-ordenada na sua página.
Links
Links são muito importantes — eles são o que fazem a Web ser de fato uma REDE. Para implementar um link, nós precisamos de usar uma âncora — <a> — o a é uma abreviatura de "anchor" ("âncora"). Para fazer algum texto dentro do seu parágrafo virar um link, siga esses passos:
- Escreva algum texto. Nós escolhemos o texto "Mozilla Manifesto".
- Envolva o texto em um elemento <a>, assim:
<a>Mozilla Manifesto</a>
- Dê ao elemento <a> um atributo href, assim:
<a href="">Mozilla Manifesto</a>
- Escreva no valor do atributo o endereço que você quer linkar:
<a href="https://www.mozilla.org/en-US/about/manifesto/">Mozilla Manifesto</a>
Você pode ter resultados inesperados se você omitir o https:// ou o https://, o chamado protocolo, no começo do endereço web. Então depois de criar um link, clique nele para ter certeza de que ele está indo para onde você deseja.
href pode parecer uma escolha obscura para um nome de atributo, em uma primeira impressão. Se você está tendo problemas para lembrar do nome, lembre que significa hypertext reference. (referência em hipertexto)
Adicione um link para sua página agora, se você ainda não tiver feito.
Conclusão
Se você seguiu todas as instruções até aqui, você deve terminar com uma página que pareça algo do tipo (você também pode vê-la aqui):
Se você ficar emperrado, pode sempre comparar seu trabalho com nosso código-exemplo finalizado no Github.
Aqui, nós só arranhamos na superfície do HTML. Para descobrir mais, vá a nossa Página de aprendizado em HTML.