Neste artigo nós abordamos os princípios básicos do HTML para que você possa começar. Definimos os elementos, atributos e todos os outros termos importantes que você pode ter ouvido, e onde eles se encaixam na linguagem. Também mostramos como um elemento e uma página HTML típica são estruturados e explicamos outras importantes características básicas da linguagem. Durante a caminhada, nós brincaremos com um pouco de HTML, para despertar seu interesse!

Pré-requisitos: Básico de informática, software básico instalado e conhecimento básico de como trabalhar com arquivos.
Objetivos: Obter uma familiaridade básica com o HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.

O que é HTML?

HTML (HyperText Markup Language) não é uma linguagem de programação, é uma linguagem de marcação utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja.

O HTML consiste em uma série de elementos que você usa para anexar, envolver ou marcar diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das tags pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:

Meu gato é muito mal-humorado.

 Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-o com a tag de parágrafo(<p>):

<p>Meu gato é muito mal-humorado.</p>

Anatomia de um elemento HTML

Vamos explorar nosso elemento parágrafo um pouco mais:

As partes principais do elemento são:

  1. Tag de abertura: Consiste no nome do elemento ( neste caso: p ), envolvido entre colchetes angulares de abertura (<) e fechamento (>). Isso indica onde o elemento começa, ou inicia a produzir efeito. Neste caso, onde o parágrafo se inicia.
  2.  Tag de fechamento:  É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina. Neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos ao pretendido.
  3. O conteúdo:  Este é o conteúdo do elemento, neste caso é somente um texto.
  4. O elemento: A tag de abertura, mais a tag de fechamento, mais o conteúdo, resulta no elemento.

Aprendizado ativo: criando seu primeiro elemento HTML

Edite a linha abaixo na área Entrada colocando-a entre as tags <em> e </em> (adicione o <em> antes para abrir o elemento, e </em> depois, para fechar o elemento). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área Saída.

Caso você cometa um erro, você pode usar o botão Reset para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão Mostrar solução para visualizar a resposta.

Aninhando elementos

Você também pode inserir elementos dentro de outros elementos. Isto é chamado de  aninhamento. Se nós quisermos dizer que nosso gato é  muito mal-humorado, nós poderemos envolver a palavra "muito" com o elemento  <strong>,  que significa enfatizar fortemente a palavra:

<p>Meu gato é <strong>muito</strong> mal-humorado.</p>

No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento p primeiro, e então o elemento strong, portanto temos que fechar o elemento strong primeiro, depois o p. O código a seguir está errado:

<p>Meu gato é <strong>muito mal-humorado.</p></strong>

Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!

Elementos em bloco versus elementos inline (na linha)

Há duas categorias importantes no HTML, que você precisa conhecer — elementos em bloco e elementos inline.

  • Elementos em bloco formam um bloco visível na página. Eles aparecerão em uma nova linha logo após qualquer elemento que venha antes dele, e qualquer conteúdo depois de um elemento em bloco também aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não seria aninhado dentro de um elemento inline, mas pode ser aninhado dentro de outro elemento em bloco.
  • Elementos inline (na linha) são aqueles que estão contidos dentro de elementos em bloco, envolvem apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline geralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento <a>  (hyperlink) ou elementos de ênfase como <em> ou <strong>.

Veja o seguinte exemplo:

<em>primeiro</em><em>segundo</em><em>terceiro</em>

<p>quarto</p><p>quinto</p><p>sexto</p>

O elemento <em> é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O <p>, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à estilização CSS  padrão que o browser aplica aos parágrafos).

Nota: o HTML5 redefiniu as categorias no HTML5: veja Categorias de conteúdo de elementos. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.

Nota: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja elementos em bloco e elementos inline.

Elementos vazios

Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento <img> insere uma imagem em uma página na posição em que ele é incluído:

<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">

Isto exibirá em sua página:

Nota: Elementos vazios são também chamados de void elements  (elemento oco).

Atributos

Elementos também podem conter atributos, que se apresentam da seguinte forma:

&lt;p class="editor-note">My cat is very grumpy&lt;/p>

Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo class permite que você dê ao elemento um nome de identificação que pode ser usada mais tarde para adicionar estilo ao elemento (CSS) e outras coisas.

Um atributo deve conter:

  1. Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)
  2. O nome do atributo, seguido por um sinal de igual.
  3. Um valor para o atributo, entre aspas duplas.

Aprendizado ativo: Adicionando atributos a um elemento

Um outro exemplo de elemento é o <a> — cujo signficado é anchor (âncora), ele transforma a parte do texto que se encontra dentro de suas tags de abertura e fechamento em um link. Este elemento pode conter vários atributos, dentre eles estão:

  • href: Este elemento é utilizado para inserir o link da web para o qual você quer que ele direcione, será o endereço da página para qual o navegador direcionará quando o link for clicado. Por exemplo href="https://www.mozilla.org/".
  • title: O atributo título especifica uma informação extra sobre o link, assim como o assunto da página que está contida no atributo href. Por exemplo title="Homepage da Mozilla". Este atributo será exibido com um tooltip (dica de contexto) quando passarmos o mouse sobre o link.

Edite a linha abaixo na área Entrada para transformá-la em um link para o seu site favorito. Primeiro, adicione o elemento <a> , depois o atributo  href e por último o atributo title. Você conseguirá ver automticamente as mudanças que você fez na área Saída.

Você deverá ver um link que ao posicionar o mouse sobre ele, será exibido o conteúdo do atributo title, e quando clicado você será direcionado para o endereço da página web especificado no elemento href. Lembre-se que você deve inserir um espaço entre o nome do elemento e cada um de seus atributos.

Caso você cometa um erro, você poderá desfazê-lo  usando o botão Reset. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

Atributos  boleanos

As vezes você verá atributos escritos sem valores, isso é permitido nos chamados atributos boleanos.  Eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo disabled você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.

<input type="text" disabled="disabled">

Há também uma forma "abreviada", sendo permitido escrever da forma mostrada abaixo (também incluímos neste código um elemento de formulário de entrada não desabilitado como referência, para dar a você uma ideia do que está acontecendo neste exemplo):

<input type="text" disabled>

<input type="text">

Ambos resultarão em uma Saída da seguinte forma:

Omitindo as aspas dos valores do atributo

Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo href, da seguinte forma:

<a href=https://www.mozilla.org/>favourite website</a>

No entanto, assim que adicionamos o atributo title neste elemento, a marcação resultará em erro:

<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>

Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo title trata-se, na verdade, de três atributos: o atributo title com o valor "The", e dois atributos boleanos, Mozilla e homepage. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!

Nossa recomendação é sempre incluir as aspas nos valores dos atributos — isto evita inúmeros problemas, além de resultar em um código mais legível.

Aspas simples ou duplas?

Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:

<a href="http://www.example.com">Um link para o exemplo.</a>

<a href='http://www.example.com'>Um link para o exemplo.</a>

Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!

<a href="http://www.example.com'>Um link para o exemplo.</a>

Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: 

<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>

Entretanto, se você quiser utilizar o mesmo tipo de aspas já utilizadas no HTML, será preciso colocá-las através das referências de caracteres, conforme será visto neste artigo no tópico: Referências de caracteres: incluindo caracteres especiais no HTML.

Anatomia de um documento HTML

Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <p>This is my page</p>
  </body>
</html>

Neste código nós temos:

  1. <!DOCTYPE html>: Quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Nos dias de hoje, pode-se dizer que doctype não é uma tag, e sim uma instrução ao navegador a respeito de qual versão do HTML foi utilizada naquele código, atualmente se apresenta da seguinte forma: <!DOCTYPE html>
  2. <html></html>: O elemento <html> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.
  3. <head></head>: O elemento <head> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca,  o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, etc. Você aprenderá mais sobre isso no próximo artigo da série.
  4. <meta charset="utf-8">: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo utf-8, que inclui a maioria dos caracteres das linguas humanas conhecidas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.
  5. <title></title>: Ele define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.
  6. <body></body>: O elemento <body> contém todo o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, etc.

Aprendizado ativo: Adicionando alguns recursos ao documento HTML

Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:

  1. Copiar o exemplo de página HTML mostrada acima.
  2. Criar um novo documento em seu editor de texto.
  3. Colar o código no novo arquivo de texto.
  4. Salvar o arquivo com o nome index.html.

Nota: Você também pode encontrar o template básico de HTML no MDN Learning Area Github repo.

Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:

A simple HTML page that says This is my pageNeste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <body> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:

  • Logo abaixo da tag de abertura <body>, adicione um título principal para o documento. Isso deve estar dento da tag de abertura <h1>e da tag de fechamento </h1> .
  • Adicione um parágrafo (dentro das tags de abertura <p>  e fechamento </p>) e edite seu conteúdo para incluir algum texto sobre um assunto do seu interesse.
  • Faça com que todas as palavras importantes sejam destacadas em negrito, colocando-as dentro da tag de abertura <strong> e da tag de fechamento </strong> .
  • Adicione um link ao seu parágrafo(<a> e  </a>), conforme explicado anteriormente, com os atributos necessários.
  • Adicione uma imagem (<img> e  </img>) ao seu documento, abaixo do parágrafo, adicionando os atributos correspondentes. 

Caso você cometa um erro, você poderá desfazê-lo  usando o botão Reset. Caso você realmente não saiba como fazer, pressione o botão Mostrar solução para ver a resposta.

Espaços em branco no HTML

Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos, isto não é necessário; os dois trechos de códigos a seguir são equivalentes:

<p>Dogs are silly.</p>

<p>Dogs        are
         silly.</p>

Não importa quanto espaços em branco você utilize (sejam espaços ou quebras de linha pela tecla Enter, por exemplo) o leitor HTML irá reduzí-los a um único espaço entre as palavras ao renderizar o código.

Então para quê utilizar espaços em branco? A resposta está na legibilidade do código — é muito mais fácil entender o que está acontecendo em seu código se você escrevê-lo de uma maneira legível, e não apenas agrupando os elementos de maneira desorganizada. 

No nosso HTML, nós temos a indetação (o recuo) dos elementos através de 2 espaços, além do espaço que tem dentro das tags. Mas fica a seu critério qual estilo de formatação usar (a quantidade de espaços para cada nível de indetação, por exemplo), mas você deve sempre utilizar algum tipo de formatação.

Referências de caracteres: incluindo caracteres especiais no HTML

No HTML, os caracteres <, >,",' e o & são caracteres especiais. Eles fazem parte da sintaxe do HTML em si, então como incluir um destes caracteres no seu texto, por exemplo, se você realmente quer utilizá-los como sinais (assim como o "e" comercial, ou os sinais de maior ou menor, por exemplo), sem que sejam interpretados como parte do código como alguns navegadores fazem?

Usando as referências de caracteres: códigos especiais que representam os caracteres e que podem ser usados nestas exatas circunstâncias. Cada referência de caractere começa com o "e" comercial (&), e termina com o ponto e vírgula (;).

Caractere literal Referência de caractere equivalente
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;

No exemplo abaixo, você pode ver dois parágrafos:

<p>In HTML, you define a paragraph using the <p> element.</p>

<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p>

Na Saída abaixo, você pode verificar que o primeiro parágrafo foi interpretado errado, o navegador entendeu que o segundo elemento de <p> estava começando um novo parágrafo. O segundo exemplo não apresentou o mesmo erro porque substituímos os caracteres dos colchetes angulares pelas suas respectivas referências de caracteres. 

Nota: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: List of XML and HTML character entity references.

Comentários no HTML

Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código. Estes são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, etc. Isso pode ser muito útil quando você voltar a um código que não manuseou por 6 meses e não lembra de como fez para ele funcionar, assim como se precisar trabalhar em um código que outra pessoa fez.

Para transformar uma parte do conteúdo em um comentário, você precisa utilizar estes marcadores especiais de abertura <!-- e o de fechamento do comentário -->, assim como neste exemplo:

<p>Eu não estou dentro de um comentário</p>

<!-- <p>Eu estou!</p> -->

Como você pode ver abaixo, o primeiro parágrafo fica visível na Saída, mas o segundo (que é um comentário) não aparece.

Sumário

Você alcançou o fim deste artigo. Esperamos que tenha gostado de sua visita pelos princípios básicos do HTML. Neste ponto, você já deve entender como a linguagem se parece, como funciona em um nível básico, e ser capaz de escrever alguns elementos e atributos. Este é o nível do conhecimento perfeito para este momento, já que nos artigos subsequentes nós vamos utilizar os assuntos que você já viu neste artigo mais detalhadamente e introduziremos novos recursos da linguagem de marcação HTML. Fique ligado(a)!

Nota: Neste ponto, à medida que você aprofundar seus conhecimentos em HTML, talvez você queira começar a explorar o básico da estilização através do "Cascading Style Sheets", ou CSS. O CSS é utilizado para estilizar sua página (alterar as fontes, cores, o layout da página, etc). O HTML e o CSS são utilizados muito bem juntos, como você logo descobrirá.

Etiquetas do documento e colaboradores

Última atualização por: Gabriela-23,