Listar itens em uma página da web é uma tarefa comum que você terá que fazer como desenvolvedor para a web. Você pode ter que listar os itens do carrinho de compras, a ordem dos alunos com base em suas notas, os cães com o latido mais alto e assim por diante.

Portanto, você precisa conhecer as diferentes maneiras de listar itens usando HTML. Embora você possa pensar que é algo simples de aprender, é importante. Também é um dos recursos mais usados do HTML no desenvolvimento para a web.

Neste artigo, você aprenderá tudo sobre elementos de listagem do HTML, suas propriedades, estilo e como realmente usá-los para criar listas organizadas. Espero que você ache útil.

Como criar listas em HTML

Em HTML, podemos listar itens de maneira ordenada ou não ordenada.

Uma lista ordenada usa números ou algum tipo de notação que indica uma série de itens.

Por exemplo, uma lista ordenada pode começar com o número 1 e continuar com 2, 3, 4 e assim por diante. Sua lista ordenada também pode começar com a letra A e continuar com B, C, D e assim por diante.

Aqui está um exemplo de uma lista ordenada com os nomes e notas de alunos.

Por outro lado, temos as listas não ordenadas, como as listas de tarefas, por exemplo. Aqui, vemos que gosto tanto de programar que até esqueci do meu café da manhã 🤓.

Existe mais um tipo de lista, chamado de lista de descrições, o qual veremos mais adiante.

Vamos, agora, entrar em mais detalhes sobre a criação de cada tipo de lista em HTML.

Como criar uma lista ordenada em HTML

Em HTML, podemos criar uma lista ordenada usando a tag <ol>. O ol na tag vem do inglês ordered list, que em português quer dizer lista ordenada. Dentro de cada um dos elementos ordenados da lista que fica entre as tags <ol> e </ol>, temos que definir os itens da lista. Podemos definir os itens da lista usando as tags <li> e </li>.

Aqui está a estrutura HTML completa para uma lista ordenada:

<ol>
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado da lista ordenada acima seria:

Assim, temos a lista de elementos ordenada, com um número começando por um 1 e aumentando de 1 em 1 – para 2 e 3. Dê uma olhada neste CodePen e veja se consegue alterar a lista e brincar um pouco com ela usando ol e li.

Tipos de listas ordenadas em HTML

Caso você não queira ordenar sua lista por números, pode ordená-la usando o alfabeto, como A, B, C ou a, b, c, por exemplo. Você pode fazer isso especificando o valor do atributo type da tag <ol>.

Você pode ordenar a lista usando as letras A, B, C passando A como o valor do tipo.

<ol type="A">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado terá esta aparência:

Da mesma maneira, você pode usar letras minúsculas, como a para o valor de type para listar os elementos com a, b, c e assim por diante.

<ol type="a">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

Este é o resultado:

Se quiser usar os numerais romanos, use o valor I para ter uma lista ordenada por eles:

<ol type="I">
  <li>Comer</li>
  <li>Programar</li>
  <li>Dormir</li>
</ol>

O resultado terá esta aparência:

Aqui vai mais um CodePen para você experimentar com os tipos:

Como usar o atributo start em listas no HTML

O elemento <ol> tem um atributo interessante chamado start. Você pode especificar um valor para ele para iniciar a lista ordenada a partir de um número específico.

Digamos que você queira começar a lista com o número 30 em vez de 1. Você pode especificar o número 30 como o valor do atributo start assim:

<ol start="30">
  <li>Trinta</li>
  <li>Trinta e um</li>
  <li>Trinta e dois</li>
</ol>

O resultado terá esta a aparência:

Fique à vontade para experimentar com o atributo start usando este CodePen:

Aliás, eu compartilhei as mesmas dicas no Twitter recentemente. Você pode encontrar algumas discussões interessantes por lá, também:

Como criar uma lista não ordenada no HTML

Passemos às listas não ordenadas. Usamos a tag <ul> para criar uma lista não ordenada. Como de costume, precisamos usar as tags <li> e </li> entre as tags <ul> e <ul/> para criar os itens da lista.

Os itens da lista (li) dentro da lista não ordenada (ul) vêm com o estilo padrão de marcadores (em inglês, bullet points) – portanto, cada um dos itens da lista é precedido por um ponto preto.

Vamos criar uma lista dos meus recursos favoritos on-line para aprender sobre desenvolvimento para a web:

Meus recursos favoritos para desenvolvimento para a web
<div>
  <ul>
    <li>freeCodeCamp</li>
    <li>CSS-Tricks</li>
    <li>Traversy Media</li>
  </ul>
</div>

Esta será a aparência:

Você pode ver os marcadores para cada um dos itens da lista acima. É possível personalizar isso – e já veremos como.

Antes disso, porém, fique à vontade para usar este CodePen, mudá-lo como quiser e testar.

Como usar os marcadores com links em listas no HTML

Podemos usar os links (tag de âncora <a>) nos itens de lista (tag <li>) para vincular cada um dos itens a uma página qualquer da web, interna ou externa.

Aqui está um exemplo que mostra como vincular cada um dos recursos de programação da web aos seus respectivos sites:

My Favorite Web Development Learning Sites
<div>
  <ul>
    <li>
      <a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp</a>
    </li>
    <li>
      <a href="https://css-tricks.com/" target="_blank">CSS-Tricks</a>
    </li>
    <li>
      <a href="https://www.traversymedia.com/" target="_blank">Traversy Media</a>
    </li>
  </ul>
</div>

Esta será a aparência:

Você pode usar o CodePen abaixo para tentar fazer o mesmo. Fique à vontade para modificá-lo como quiser:

Tipos de lista não ordenada em HTML

Como discutimos brevemente, podemos personalizar o estilo de marcador de uma lista não ordenada, que veremos em ação agora. Podemos fazer isso usando a propriedade de estilo CSS chamada list-style.

Há quatro valores principais da propriedade list-style que nos ajudam com essa personalização:

Use o CodePen acima para testar as diversas opções de list-style.

Você sabia que também existe uma lista de descrições?

Existe mais um tipo de lista no HTML, que, no entanto, não é usada com frequência. É chamada de lista de descrição.

Podemos definir uma lista de descrição usando a tag <dl>. Dentro das tags <dl> e </dl>, precisamos definir um termo de descrição usando a tag <dt>. O termo, geralmente, é um pequeno texto sobre algo. Em seguida, podemos definir o descritor da descrição para falar sobre o termo ainda mais, usando a tag <dd>.

Muita coisa para absorver? Vamos ver como funciona com um exemplo de código.

Vamos supor que queremos descrever algumas informações sobre programação, fofoca e sono em nossa página da web. Podemos primeiro definir uma tag <dl>. Agora definimos três pares de tags <dt> e <dd> para descrever programar, fofoca e sono, respectivamente.

<dl>
  <dt>Programar</dt>
  <dd>Atividade que deixa você feliz, mesmo quando dorme.</dd>
  <dt>Fofocar</dt>
  <dd>Não dá para viver sem.</dd>
  <dt>Dormir</dt>
  <dd>Minha atividade favorita.</dd>
</dl>

Esta será a aparência:

Experimente este CodePen para brincar um pouco mais com as listas de descrição:

Você pode estar se perguntando o motivo de não utilizarmos muito esse tipo de lista? Bem, é possível criar essa estrutura usando a lista não ordenada (ul), itens de lista (li) e estilos no CSS.

Se você considerar a semântica do HTML, é preciso dar um espaço para as listas de descrição em suas páginas sempre que perceber que há um bom caso de uso para ela.

Como criar um cabeçalho de página com elementos de lista no HTML

Estamos quase no final deste tutorial. Sinto, porém, que ele está incompleto sem pelo menos um exemplo de caso de uso das listas e tags do HTML. Meu favorito é listar os itens no cabeçalho de uma página da web.

Vamos criar um cabeçalho muito básico com um logotipo e três links: Página inicial, Produtos e Sobre nós. Primeiro, criaremos a estrutura do HTML, assim:

<nav>
  <span class="logo">Logotipo</span>
  
  <ul>
    <li><a href="#/home">Página inicial</a></li>
    <li><a href="#/products">Produtos</a></li>
    <li><a href="#/about">Sobre nós</a></li>
  </ul>  
</nav>

Aqui, pegamos uma lista não ordenada com três itens de lista para definir os links da Página inicial, de Produtos e de Sobre nós. Você também notará um elemento span com o texto Logotipo, que indica que é um logotipo. Podemos usar uma imagem adequada lá, com base em nossas necessidades posteriormente.

Até agora, o cabeçalho deve ter esta aparência:

Não era bem isso que queríamos. Vamos, então, escrever algumas regras e propriedades do CSS para fazer com que pareça um cabeçalho de página (ou algo próximo a isso).

nav{
  background-color: #273032;
  color: #FFF;
  padding: 10px;
  display: flex;
}

.logo {
  background-color: blue
}

ul {
  margin: 0px;
}

li {
  list-style: none;
  display: inline;
  margin-right: 0.2rem;
}

a {
  color: pink;
}

Bem melhor. Agora, está mais próximo de parecer um cabeçalho de página realista.

Novamente, use este CodePen para fazer alterações e experimentar com o cabeçalho.

Antes de terminar...

Por enquanto, é só. Espero que este artigo tenha sido útil e que ele o auxilie a entender listas em HTML mais claramente.

Entre em contato. Você poderá encontrar o autor no Twitter (@tapasadhikary). Siga-o à vontade. Ele também tem um canal no YouTube (em inglês), onde compartilha seus conhecimentos. Confira-o também.

Outros artigos úteis (do blog do autor, em inglês):

• 10 dicas das DevTools que ajudam com o CSS e com o design de UX
• 10 fatos triviais mas muito importantes sobre o HTML que você precisa saber
• 10 recursos úteis do HTML5  que você pode não estar usando

A maioria dos caracteres de ASCII tem um código especial que você pode usar em HTML para fazer o caractere aparecer com segurança.

Essas entidades do HTML são particularmente úteis, por exemplo, para inserir um espaço em branco manualmente em seu HTML.

Cada um desses códigos começa com um "e" comercial e termina com um ponto-e-vírgula.

Você pode usá-los em qualquer lugar de seu HTML para fazer aparecer na página aquele caractere. Ele será renderizado da mesma maneira, não importando o idioma em que os navegadores de seus usuários estiverem configurados.

Alguns desses símbolos têm códigos mais fáceis de lembrar. Por exemplo, o código da moeda Euro (€) é €

Sempre que possível, eu utilizei esses códigos fáceis de lembrar em vez dos códigos numéricos.

Como usar o código do espaço em branco, &nbsp;

Por exemplo, se você quisesse inserir um espaço em branco, poderia fazer algo assim:

<span>Superpoder:&nbsp;escutar</span>

Você pode até inserir diversos deles em sequência para criar um espaçamento de texto:

<span>Superpoder:&nbsp;&nbsp;&nbsp;escutar</span>

Como fazer uma nova linha no HMTL usando o código de caractere &#13;

Se você quiser forçar uma nova linha:

<p>Este é o texto de um parágrafo e&#13;opa! Caiu para uma nova linha.</p>

Sim, você pode usar vários desses um ao lado do outro também:

<p>Este é o texto de um parágrafo e&#13;&#13;&#13;opa! Caiu várias linhas para baixo.</p>

Uma lista completa de códigos de caractere normalmente usados

Abaixo, você verá uma tabela formatada em ASCII da maioria dos símbolos e caracteres normalmente usados. Levou um tempo até que eu reunisse todos eles e desse uma boa aparência à tabela.

Como desenvolvedor, quando eu procuro por esses códigos, geralmente obtenho resultados baseados em imagens. Eles são inacessíveis para pessoas com problemas de visão, além de dificultar o copiar e colar dos códigos.

Se achar esta lista útil, compartilhe o link deste artigo com seus amigos para que mais pessoas possam aproveitar a lista. 😉

+----------+--------+-----------------------------+
|  &código | símbolo|         descrição           |
+----------+--------+-----------------------------+
| !    | !      | ponto de exclamação         |
| "    | "      | aspas duplas                |
| #    | #      | hashtag (octothorpe)        |
| $    | $      | sinal de dólar              |
| %    | %      | sinal de porcentagem        |
| &    | &      | e comercial                 |
| '    | '      | apóstrofo                   |
| (    | (      | parêntese esquerdo          |
| )    | )      | parêntese direito           |
| *    | *      | asterisco                   |
| +    | +      | sinal de mais               |
| ,    | ,      | vírgula                     |
| -    | -      | hífen                       |
| .    | .      | ponto                       |
| /    | /      | barra                       |
| 0    | 0      | número 0                    |
| 1    | 1      | número 1                    |
| 2    | 2      | número 2                    |
| 3    | 3      | número 3                    |
| 4    | 4      | número 4                    |
| 5    | 5      | número 5                    |
| 6    | 6      | número 6                    |
| 7    | 7      | número 7                    |
| 8    | 8      | número 8                    |
| 9    | 9      | número 9                    |
| :    | :      | dois pontos                 |
| &#59;    | ;      | ponto-e-vírgula             |
| &#60;    | <      | menor que                   |
| &#61;    | =      | sinal de igual              |
| &#62;    | >      | maior que                   |
| &#63;    | ?      | ponto de interrogação       |
| &#64;    | @      | arroba                      |
| &#65;    | A      | A maiúsculo                 |
| &#66;    | B      | B maiúsculo                 |
| &#67;    | C      | C maiúsculo                 |
| &#68;    | D      | D maiúsculo                 |
| &#69;    | E      | E maiúsculo                 |
| &#70;    | F      | F maiúsculo                 |
| &#71;    | G      | G maiúsculo                 |
| &#72;    | H      | H maiúsculo                 |
| &#73;    | I      | I maiúsculo                 |
| &#74;    | J      | J maiúsculo                 |
| &#75;    | K      | K maiúsculo                 |
| &#76;    | L      | L maiúsculo                 |
| &#77;    | M      | M maiúsculo                 |
| &#78;    | N      | N maiúsculo                 |
| &#79;    | O      | O maiúsculo                 |
| &#80;    | P      | P maiúsculo                 |
| &#81;    | Q      | Q maiúsculo                 |
| &#82;    | R      | R maiúsculo                 |
| &#83;    | S      | S maiúsculo                 |
| &#84;    | T      | T maiúsculo                 |
| &#85;    | U      | U maiúsculo                 |
| &#86;    | V      | V maiúsculo                 |
| &#87;    | W      | W maiúsculo                 |
| &#88;    | X      | X maiúsculo                 |
| &#89;    | Y      | Y maiúsculo                 |
| &#90;    | Z      | Z maiúsculo                 |
| &#91;    | [      | colchete esquerdo           |
| &#92;    | \      | barra invertida             |
| &#93;    | ]      | colchete direita            |
| &#94;    | ^      | circunflexo                 |
| &#95;    | _      | sublinha                    |
| &#96;    | `      | crase                       |
| &#97;    | a      | a minúsculo                 |
| &#98;    | b      | b minúsculo                 |
| &#99;    | c      | c minúsculo                 |
| &#100;   | d      | d minúsculo                 |
| &#101;   | e      | e minúsculo                 |
| &#102;   | f      | f minúsculo                 |
| &#103;   | g      | g minúsculo                 |
| &#104;   | h      | h minúsculo                 |
| &#105;   | i      | i minúsculo                 |
| &#106;   | j      | j minúsculo                 |
| &#107;   | k      | k minúsculo                 |
| &#108;   | l      | l minúsculo                 |
| &#109;   | m      | m minúsculo                 |
| &#110;   | n      | n minúsculo                 |
| &#111;   | o      | o minúsculo                 |
| &#112;   | p      | p minúsculo                 |
| &#113;   | q      | q minúsculo                 |
| &#114;   | r      | r minúsculo                 |
| &#115;   | s      | s minúsculo                 |
| &#116;   | t      | t minúsculo                 |
| &#117;   | u      | u minúsculo                 |
| &#118;   | v      | v minúsculo                 |
| &#119;   | w      | w minúsculo                 |
| &#120;   | x      | x minúsculo                 |
| &#121;   | y      | y minúsculo                 |
| &#122;   | z      | z minúsculo                 |
| &#123;   | {      | chave da esquerda           |
| &#124;   | |      | barra vertical              |
| &#125;   | }      | chave da direita            |
| &#126;   | ~      | til                         |
| &larr;   | ←      | seta para esquerda          |
| &uarr;   | ↑      | seta para cima              |
| &rarr;   | →      | seta para direita           |
| &darr;   | ↓      | seta para baixo             |
| &harr;   | ↔      | seta esquerda/direita       |
| &lArr;   | ⇐      | seta dupla para a esquerda |
| &uArr;   | ⇑      | seta dupla para cima        |
| &rArr;   | ⇒     | seta dupla para a direita   |
| &dArr;   | ⇓      | seta dupla para baixo       |
| &hArr;   | ⇔     | seta dupla esquerda/direita |
| &lsquo;  | ‘      | aspa simples esquerda smart |
| &rsquo;  | ’      | aspa simples direita smart  |
| &ldquo;  | “      | aspa dupla esquerda smart   |
| &rdquo;  | ”      | aspa dupla direita smart    |
| &#8218;  | ‚      | aspa simples baixa          |
| &#8222;  | „      | aspa dupla baixa            |
| &ndash;  | -      | travessão en                |
| &mdash;  | –      | travessão em                |
| &nbsp;   |        | espaço sem quebra           |
| &iexcl;  | ¡      | exclamação invertida        |
| &sect;   | §      | sinal de seção (direito)    |
| &brvbar; | ¦      | barra vertical quebrada     |
| &copy;   | ©      | símbolo de copyright        |
| &reg;    | ®      | sinal de marca registrada   |
| &#8482;  | ™      | sinal de marca comercial    |
| &cent;   | ¢      | sinal de centavo            |
| &pound;  | £      | sinal da libra esterlina    |
| &yen;    | ¥      | sinal do Yen                |
| &euro;   | €      | sinal do Euro               |
| &plusmn; | ±      | sinal de mais ou menos      |
| &micro;  | µ      | sinal de micro (mu)         |
| &183;    | ·      | caractere de ponto médio    |
| &deg;    | °      | sinal de grau               |
| &sup1;   | ¹      | um sobrescrito              |
| &sup2;   | ²      | dois sobrescrito (quadrado) |
| &sup3;   | ³      | três sobrescrito (cubo)     |
| &para;   | ¶      | sinal de parágrafo          |
| &middot; | ·      | ponto médio                 |
| &frac14; | ¼      | fração de um quarto         |
| &frac12; | ½      | fração de um meio           |
| &frac34; | ¾      | fração de três quartos      |
| &iquest; | ¿      | interrogação invertida      |
| &#8224;  | †      | adaga                       |
| &#8225;  | ‡      | adaga dupla                 |
| &#8226;  | •      | marcador                    |
| &#8230;  | …      | reticências (três pontos)   |
+----------+--------+-----------------------------+

Antes do HTML5, para poder executar um vídeo em uma página da web, era necessário usar um plug-in como o Adobe Flash Player. Com a introdução do HTML5, foi possível começar a colocar vídeos diretamente na própria página.

Isso torna possível fazer com que os vídeos sejam executados em páginas criadas para dispositivos móveis, pois plug-ins como o Adobe Flash Player não funcionam no Android ou no iOS.

O elemento <video> do HTML é usado para incorporar vídeos a documentos da web. Pode conter uma ou mais fontes de vídeo, representadas usando o atributo src ou o elemento source.

Para incorporar um arquivo de vídeo, basta adicionar este trecho de código e alterar o atributo src, colocando nele o caminho do arquivo de vídeo:

<video controls>
  <source src="tutorial.ogg" type="video /ogg">
  <source src="tutorial.mp4" type="video /mpeg">
  Seu navegador não oferece suporte ao elemento de vídeo. Atualize-o para a versão mais recente.
</video >

O elemento <video> tem suporte em todos os navegadores modernos. Porém, nem todos os navegadores dão suporte aos mesmos formatos de arquivo de vídeo.  Arquivos MP4 são o formato de vídeo mais amplamente aceito. Outros formatos, como WebM e Ogg, já têm suporte no Chrome, no Firefox e no Opera.

Para garantir que seu vídeo seja executado na maioria dos navegadores, uma boa prática é codificá-lo nos formatos Ogg e MP4, incluindo os dois no elemento <video>, como no exemplo acima. Os navegadores usarão o primeiro formato reconhecido.

Se, por alguma razão, o navegador não reconhecer um dos formatos, o texto "Seu navegador não oferece suporte ao elemento de vídeo. Atualize-o para a versão mais recente." será exibido no lugar do vídeo.

Você também deve ter notado a palavra controls na tag <video>. Esse elemento inclui vários atributos úteis para personalizar a experiência de reprodução de arquivos.

Atributos de <video>

controls

O atributo controls trata de exibir ou não controles como o botão de reproduzir/pausar ou o botão deslizante de ajuste de volume.

Ele é um atributo booleano, o que significa que ele pode ser definido como true ou false. Para defini-lo como true, basta adicioná-lo à tag <video>. Se não estiver presente na tag, ele estará definido como false e os controles não serão exibidos.

autoplay

A reprodução automática (em inglês, autoplay) pode ser definida como true ou false. É mais um atributo booleano. Você a define como true adicionando-a à tag. Se não estiver presente na tag, ela estará definida como false. Caso esteja definida como true, o vídeo começara a ser executado assim que uma quantidade de vídeo suficiente estive no buffer para que seja possível executá-lo. Muita gente acha a reprodução automática incômoda e que ela atrapalha a experiência. Use este recurso pouco e com bastante critério. Observe, também, que alguns navegadores para dispositivos móveis, como o Safari para o iOS, ignoram esse atributo.

<video autoplay>
  <source src="video.mp4" type="video/mp4">
</video>

poster

O atributo poster refere-se à imagem que será exibida no vídeo até que o usuário clique nele para executar o vídeo.

<video poster="poster.png">
  <source src="video.mp4" type="video/mp4">
</video>

Vídeos podem ser custosos

Embora esteja mais fácil do que nunca incluir vídeos em sua página, geralmente, é melhor fazer o upload dos vídeos para um serviço como o YouTube, o Vimeo ou o Wistia e incorporá-lo ao seu código. Isso ocorre porque servir vídeos pode ser caro – para você em termos de custos de servidor e para os espectadores, caso tenham planos de dados limitados.

Fazer a hospedagem de seus próprios arquivos de vídeo também pode causar problemas com a largura de banda, o que pode levar a travamentos repentinos e ao carregamento lento dos vídeos. Além disso, os navegadores tendem a variar em termos da qualidade de reprodução dos vídeos. Sendo assim, é difícil controlar exatamente o que os seus espectadores acabarão assistindo. Também é muito fácil fazer o download de vídeos incorporados com a tag <video>. Se a pirataria é algo que preocupa você, seria melhor procurar por outras opções.

Dito isso, fique à vontade para incorporar vídeos ao HTML com conteúdo que toque o seu coração – ou não. A decisão é sua. 🙂

Na minha experiência, complementar os estudos com exercícios práticos aumenta consideravelmente meu entendimento sobre um assunto. Isso é verdadeiro, especialmente, quando posso testar meus conhecimentos na hora e receber feedback instantâneo sobre cada pergunta.

O formato de questionário de múltipla escolha é perfeito para isso. Eu desenvolvi um método de incorporar perguntas de múltipla escolha nos artigos sobre matemática que escrevo para o freeCodeCamp. Quero, neste artigo, mostrar para outros autores como eles podem fazer o mesmo.

Como adicionar código ao seu artigo

O editor do Ghost (editor usado pelo freeCodeCamp) permite incorporar blocos de código em um artigo. O editor de código pode ser acessado clicando no botão redondo com o sinal de mais (+) usado para adicionar imagens, vídeos do YouTube, entre outros:

Clique no botão "HTML" para adicionar outro editor ao artigo. O editor tem suporte para HTML, CSS e JavaScript.

Ao começar a adicionar o código, clique em qualquer lugar fora do quadro do editor para renderizar o código e visualizar o andamento. Clique duas vezes no resultado renderizado para reabrir a janela do editor:

Para testar a funcionalidade de seu código, salve o artigo e pressione Ctrl/⌘ + S. Depois, clique no botão "View Preview" (Visualização prévia) que aparece no canto inferior esquerdo:

Seu artigo será aberto em uma outra guia, onde você poderá ver como seu código será renderizado quando o artigo for publicado. Aproveite para conferir o estilo e a funcionalidade de seu questionário de múltipla escolha.

O código boilerplate para o questionário de múltipla escolha está disponível na próxima seção. Tudo o que você precisa fazer é colá-lo em seu próprio artigo e alterar a pergunta e as respostas.

Como funciona o questionário de múltipla escolha

Você pode adicionar quantas perguntas diferentes quiser. Porém, embora seu artigo possa ter diversas perguntas, elas estarão todas contidas em um único corpo do HTML internamente. Cada elemento de pergunta começa com o código abaixo:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>ESCREVA SUA PERGUNTA AQUI</h3>
  <p>Selecione 1 resposta</p>
  <hr />

Cada um dos elementos div abaixo contém uma resposta possível:

  ...
  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      RESPOSTA 1</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      RESPOSTA 2</label>
    <span id='result-12'></span>
  </div>
  <hr />
  ...

Na hora em que escrevemos o artigo, o editor de código incorporado do Ghost não dá suporte a template literals, o que significa que algumas coisas precisam ser colocadas diretamente no código.

Lembre-se de que todas as perguntas são, essencialmente, carregadas juntas internamente. Assim, os números de dois algarismos de cada id representam o seguinte:

• O primeiro algarismo indica a ordem da pergunta de múltipla escolha no artigo (1 é a questão um, 2 é a questão dois e assim por diante)
• O segundo algarismo indica a ordem de cada resposta possível dentro deste bloco de pergunta específico (1 é a resposta um, 2 é a resposta dois e assim por diante)

Por exemplo, block-12 representa pergunta 1/resposta 2, enquanto block-43 é a pergunta 4/resposta 3.

Essa convenção de índices (id) é necessária para que blocos de perguntas diferentes funcionem independentemente dos outros.

Uma lógica semelhante se aplica aos nomes das funções responsáveis pela interatividade. O código que lida com a interação do usuário é colocado dentro das tags <script> e é composto por duas partes. A primeira parte é a função que avalia as respostas e exibe os resultados:

function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correto!'
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
  }

Como o nome em inglês sugere, a função displayAnswer1 trata da primeira pergunta do artigo. Se houver uma terceira pergunta, displayAnswer3 tratará dela.

No exemplo acima, option-11 é a resposta correta. O estilo no primeiro bloco if é autalizado para mostrar que a resposta correta foi selecionada. Se qualquer outra resposta – ou seja, uma resposta incorreta – for selecionada, o estilo será atualizado para refletir isso.

Fique à vontade para brincar com as funções displayAnswer_ em seu próprio artigo. Lembre-se apenas de associar o estilo adequado às respostas corretas e incorretas.

Aqui está a segunda parte do código que lida com a interação do usuário:

function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Mostrar a resposta certa'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correto!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }

A função é chamada de showCorrectAnswer1 porque lida com a primeira pergunta de múltipla escolha do artigo. Você terá de adicionar showCorrectAnswer2, showCorrectAnswer3 e assim por diante se mais perguntas forem adicionadas ao seu artigo.

Fique à vontade, também, para brincar com o estilo e com as dimensões no código. Personalize-os como quiser. Além disso, tenho certeza de que há outras maneiras de implementar questionários de múltipla escolha. Essa foi a minha maneira. É um prazer, para mim, compartilhá-la com vocês.

Aqui temos o código completo e um exemplo funcional:

<div style='transform: scale(0.65); position: relative; top: -100px;'>
  <h3>A que parte de um dia correspondem 6 horas?</h3>
  <p>Escolha 1 resposta</p>
  <hr />

  <div id='block-11' style='padding: 10px;'>
    <label for='option-11' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6/24' id='option-11' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      6/24</label>
    <span id='result-11'></span>
  </div>
  <hr />

  <div id='block-12' style='padding: 10px;'>
    <label for='option-12' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='6' id='option-12' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      6</label>
    <span id='result-12'></span>
  </div>
  <hr />

  <div id='block-13' style='padding: 10px;'>
    <label for='option-13' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='1/3' id='option-13' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      1/3</label>
    <span id='result-13'></span>
  </div>
  <hr />

  <div id='block-14' style='padding: 10px;'>
    <label for='option-14' style=' padding: 5px; font-size: 2.5rem;'>
      <input type='radio' name='option' value='1/6' id='option-14' style='transform: scale(1.6); margin-right: 10px; vertical-align: middle; margin-top: -2px;' />
      1/6</label>
    <span id='result-14'></span>
  </div>
  <hr />
  <button type='button' onclick='displayAnswer1()' style='width: 100px; height: 40px; border-radius: 3px; background-color: lightblue; font-weight: 700;'>Enviar</button>
</div>
<a id='showanswer1'></a>
<script>
  //    A função avalia a resposta e exibe o resultado
  function displayAnswer1() {
    if (document.getElementById('option-11').checked) {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correto!'
    }
    if (document.getElementById('option-12').checked) {
      document.getElementById('block-12').style.border = '3px solid red'
      document.getElementById('result-12').style.color = 'red'
      document.getElementById('result-12').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-13').checked) {
      document.getElementById('block-13').style.border = '3px solid red'
      document.getElementById('result-13').style.color = 'red'
      document.getElementById('result-13').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
    if (document.getElementById('option-14').checked) {
      document.getElementById('block-14').style.border = '3px solid red'
      document.getElementById('result-14').style.color = 'red'
      document.getElementById('result-14').innerHTML = 'Incorreto!'
      showCorrectAnswer1()
    }
  }
  // a função exibe o link para a resposta correta
  function showCorrectAnswer1() {
    let showAnswer1 = document.createElement('p')
    showAnswer1.innerHTML = 'Mostrar a resposta certa'
    showAnswer1.style.position = 'relative'
    showAnswer1.style.top = '-180px'
    showAnswer1.style.fontSize = '1.75rem'
    document.getElementById('showanswer1').appendChild(showAnswer1)
    showAnswer1.addEventListener('click', () => {
      document.getElementById('block-11').style.border = '3px solid limegreen'
      document.getElementById('result-11').style.color = 'limegreen'
      document.getElementById('result-11').innerHTML = 'Correto!'
      document.getElementById('showanswer1').removeChild(showAnswer1)
    })
  }
</script>

Você também pode encontrar o código boilerplate completo neste repositório do GitHub.

Você usa a tag select do HTML para criar menus suspensos para que os usuários selecionem os valores que eles querem. É uma funcionalidade essencial na coleta de dados a serem enviados para um servidor.

A tag select normalmente é usada dentro de um elemento de formulário (form), com os itens a serem escolhidos ficando dentro de outra tag, <option>. Ela também pode ser usada como um elemento sozinho, que ainda estaria associado com um formulário por meio de um de seus atributos especiais, form.

Neste tutorial, vou mostrar como criar um menu suspenso com a tag select para que você possa começar a coletar dados nos seus projetos de programação. Também vou mostrar um pouco sobre como estilizar a tag select, pois ela é notoriamente difícil de estilizar.

Aqui temos um Scrim interativo sobre como fazer um menu suspenso ou lista de opções em HTML (inglês)

Atributos da tag select

Antes de me aprofundar em como criar um menu suspenso com a tag select, precisamos discutir os atributos que a tag select recebe.

Os atributos são:

• name: você precisa atribuir um nome para cada elemento do formulário pois é usado para referenciar o dado depois que for submetido ao servidor.
• multiple: esse atributo deixa o usuário selecionar múltiplas opções do menu suspenso.
• required: esse é tipicamente usado para validação. Com ele, o formulário não será submetido a menos que o usuário selecione pelo menos uma opção do menu suspenso.
• disabled: esse atributo impede o usuário de interagir com as opções (deixando-as desabilitadas).
• size: expresso em números, o atributo size (tamanho) é usado para especificar quantas opções poderão ser vistas ao mesmo tempo.
• autofocus: esse atributo é usado em todos campos de entrada de formulário, incluindo a tag select, para especificar qual campo de entrada deverá estar focado quando a página carregar.

Como criar um menu suspenso com a tag select

Para criar um menu suspenso com a tag select, você primeiro precisará de um elemento de formulário (tag form). Isso ocorre porque você também terá um botão de envio nele (no elemento de formulário) para enviar os dados para o servidor.

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Eu adicionei um CSS simples para centralizar o menu suspenso e o botão, e dar um fundo cinza claro para o corpo da página (body):

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

Para torná-lo mais elaborado e acessível, você também pode anexar a caixa de seleção a um elemento de rótulo (label), para que fique focado quando o rótulo for clicado. Você pode fazer isso com este código:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Eu coloquei o símbolo da cerquilha (#) como valor do atributo action para você não receber um 404 ao clicar no botão de enviar.

Agora, porém, temos que fazer uma pequena alteração no CSS:

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

No final, este é o resultado:

Não termina aqui. Um dos itens do menu suspenso aparece por padrão e será selecionado se o usuário clicar no botão de enviar assim que acessar a página.

Essa, no entanto, não é uma boa experiência para o usuário. Você pode se livrar disso colocando "Select a language" (selecione uma linguagem) como o primeiro elemento do menu.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Quando o usuário clicar para selecionar um item, o menu suspenso cobrirá o botão de enviar – outra coisa que afeta negativamente a experiência do usuário.

Você pode alterar isso com o atributo size (tamanho), que mostrará um certo número de itens por padrão e adicionará uma rolagem para os outros itens do menu.

Isso também deixa você remover o primeiro item falso, pois alguns itens estarão visíveis para o usuário automaticamente.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Com o atributo multiple (múltiplo), você pode permitir que o usuário selecione vários itens do menu.

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

Isso faz com que 4 itens estejam visíveis por padrão. Para selecionar mais de um item, o usuário precisa segurar a tecla Shift ou Control e, então, selecionar com o mouse.

Você pode fazer mais ainda com as tags <select> e <option>. Você também pode fazer uma caixa de seleção com agrupamentos com o elemento <optgroup> dentro da tag <select>.

Você pode converter o menu que já foi feito para ter agrupamentos assim:

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Como estilizar o elemento select

Estilizar o elemento select geralmente é confuso e renderizado de maneira inconsistente entre os navegadores. Você, contudo, sempre pode tentar o seguinte:

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

Nesse exemplo de código CSS acima, eu dei ao texto na caixa de seleção a seguinte aparência:

• uma família de fonte cursiva e cor branca,
• um contorno (outline) de 0 para remover o contorno feio quando está em foco,
• um fundo esverdeado,
• uma borda carmesim (vermelha) de 1 pixel,
• um raio de borda de 4 pixels para obter uma borda ligeiramente arredondada em todos os lados
• e um preenchimento de 4 pixels para espaçar um pouco as coisas.

A caixa de seleção agora parece melhor:

Conclusão

A tag select é muito útil quando você está fazendo menus suspensos ou listas de opções (pré-definidas) em HTML. É como um botão de opção (radio button, em inglês) e uma caixa de seleção (checkbox, em inglês), tudo em um único lugar.

Lembre-se de que, com o botão de opção, você só consegue selecionar um item de uma lista. Com a caixa de seleção, porém, você pode selecionar vários itens. Select é mais flexível, pois você consegue configurá-lo para que aceite um único item ou diversos itens.

Um problema com a tag select é a grande dificuldade para estilizá-la. Uma solução razoável é utilizar uma biblioteca do CSS que ofereça ótimas classes utilitárias para estilizar um formulário junto com o elemento select.

Eu espero que este tutorial tenha deixado você mais familiarizado com a tag select para que você possa começar a usá-la em seus projetos.

Obrigado pela leitura e continue programando.

Tradução realizada em português europeu

Imagina que estás a criar um site para um cliente, uma pequena loja familiar, que tem apenas duas páginas.

Não é muita coisa. Por isso, quando terminas a página principal e começas a trabalhar na página de contactos, simplesmente crias um ficheiro HTML e copias todo o código da primeira página.

O cabeçalho e o rodapé já têm bom aspeto e tudo o que precisas fazer é alterar o conteúdo restante.

O que fazer, no entanto, se o teu cliente quiser 10 páginas? Ou 20? Como farias se ele pedir pequenas alterações no cabeçalho e no rodapé ao longo do desenvolvimento?

De repente, qualquer alteração, por mais pequena que seja, tem de ser repetida ao longo de todos os ficheiros.

Esse é um dos maiores problemas que coisas como o React ou Handlebars.js ajudam a resolver: qualquer código, em especial, coisas estruturais como o cabeçalho ou o rodapé, pode ser escrito uma vez e reutilizado ao longo do projeto.

Até bem recentemente, era impossível utilizar componentes em HTML simples e em JavaScript. Porém, com a introdução dos Web Components, é possível criar componentes reutilizáveis sem utilizar coisas como o React.

O que são os Web Components?

Os Web Components são, na realidade, uma coleção de algumas tecnologias diferentes que te permitem criar elementos HTML personalizados.

Essas tecnologias são:

• Templates HTML (texto em inglês): fragmentos de código HTML utilizando elementos <template> que não vão ser renderizados até que sejam anexados à página com JavaScript.
• Elementos personalizados (texto em inglês): APIs do JavaScript com vasto suporte que te permitem criar elementos do DOM. Assim que criares e registares um elemento personalizado através dessas APIs, poderás utilizá-lo de modo semelhante a um componente do React.
• Shadow DOM (texto em inglês): é um DOM menor, encapsulado, que está isolado do DOM principal e renderizado separadamente. Os estilos e scripts que crias para teus componentes personalizados no Shadow DOM não afetarão outros elementos no DOM principal.

Vamos abordar cada uma dessas tecnologias ao longo do tutorial.

Como utilizar templates de HTML

A primeira peça do quebra-cabeças é aprender como utilizar templates de HTML para criar código HTML reutilizável.

Vamos observar um exemplo de uma simples mensagem de boas-vindas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="index.js" type="text/javascript" defer></script>
  </head>
  <body>
    <template id="welcome-msg">
      <h1>Hello, World!</h1>
      <p>And all who inhabit it</p>
    </template>
  </body>
<html>

Se observares a página, nem os elementos <h1> nem os <p> são renderizados. Se, contudo, abrires a consola de desenvolvimento, verás que ambos os elementos foram analisados:

Para renderizar mesmo a mensagem de boas-vindas, vais precisar de utilizar um pouco de JavaScript:

const template = document.getElementById('welcome-msg');

document.body.appendChild(template.content);

Embora esse seja um exemplo bastante simples, já é possível veres como a utilização de templates torna mais fácil reutilizar código ao longo da página.

O principal problema é que, pelo menos no exemplo atual, o código da mensagem de boas-vindas está misturado com o resto do conteúdo da página. Se desejares alterar a mensagem mais tarde, terás de alterar o código em vários ficheiros.

Em vez disso, podes puxar o template HTML para o ficheiro JavaScript, de maneira a que qualquer página onde o JavaScript está incluido irá renderizar a mensagem de boas-vindas:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="index.js" type="text/javascript" defer></script>
  </head>
  <body>
      
  </body>
<html>

const template = document.createElement('template');

template.innerHTML = `
  <h1>Hello, World!</h1>
  <p>And all who inhabit it</p>
`;

document.body.appendChild(template.content);

Agora que temos tudo no ficheiro JavaScript, não é necessário criares um elemento <template> – podes simplesmente criar um elemento <div> ou <span>.

No entanto, os elementos <template> podem ser combinados com um elemento <slot>, que te permite fazer coisas como alterar o texto para elementos dentro de <template>. É um pouco fora do âmbito deste tutorial. Por isso, podes ler mais sobre elementos <slot> na MDN (texto em inglês).

Como criar elementos personalizados

Uma coisa que podes ter reparado ao utilizar templates de HTML é que pode ser complicado inserir o teu código no local correto. O exemplo anterior da mensagem de boas-vindas estava apenas anexado à página.

Se já existisse conteúdo na página, digamos, uma imagem de banner, a mensagem de boas-vindas apareceria abaixo da imagem.

Como elemento personalizado, a tua mensagem de boas-vindas poderia ter este aspeto:

<welcome-message></welcome-message>

Poderias colocá-la em qualquer local da página.

Com isto em mente, vamos observar os elementos personalizados e criar os nossos próprios elementos de cabeçalho e rodapé ao estilo do React.

Configuração

Para um site de portfólio, podes ter algum código predefinido que se pareça com isto:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
  </body>
<html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

Cada página terá o mesmo cabeçalho e rodapé. Por isso, faz sentido criar um elemento personalizado para cada um deles.

Vamos começar pelo cabeçalho.

Definir um elemento personalizado

Primeiro, cria uma pasta chamada components. Dentro dessa pasta, cria um ficheiro chamado header.js, com o seguinte código:

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

É apenas uma simples class do ES5 a declarar o teu componente Header personalizado, com o método constructor e a palavra-chave especial super. Podes ler mais sobre isto na MDN.

Ao estender a classe genérica HTMLElement, podes criar qualquer tipo de elemento que queiras. Também é possível extender elementos específicos como HTMLParagraphElement.

Registar o teu elemento personalizado

Antes de começares a utilizar o teu elemento personalizado, vais precisar de o registar com o método customElements.define():

class Header extends HTMLElement {
  constructor() {
    super();
  }
}

customElements.define('header-component', Header);

Esse método recebe pelo menos dois argumentos.

O primeiro é uma DOMString que vais utilizar quando estiveres a adicionar o componente à página, neste caso, <header-component></header-component>.

O próximo é a classe do componente que criaste anteriormente, neste caso, a classe Header.

O terceiro argumento, é opcional, e descreve qual é o elemento HTML existente do qual o teu elemento personalizado optional vai herdar propriedades, por exemplo, {extends: 'p'}. No entanto, não vamos utilizar esta funcionalidade neste tutorial.

Utilizar callbacks de ciclo de vida para adicionar o cabeçalho à página

Existem quatro callbacks de ciclo de vida especiais para elementos personalizados que podemos utilizar para anexar o código do cabeçalho à página: connectedCallback, attributeChangeCallback, disconnectedCallback e adoptedCallback.

Destas callbacks, connectedCallback é uma das mais utilizadas. connectedCallback executa cada vez que o teu elemento personalizado é inserido no DOM.

Podes ler mais sobre outras callbacks aqui.

Para o nosso simples exemplo, connectedCallback é suficiente para adicionar um cabeçalho à página:

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        nav {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
        }

        ul {
          padding: 0;
        }
        
        a {
          font-weight: 700;
          margin: 0 25px;
          color: #fff;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }
      </style>
      <header>
        <nav>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </nav>
      </header>
    `;
  }
}

customElements.define('header-component', Header);

Depois, no index.html, adiciona o script components/header.js e <header-component></header-component> logo acima do elemento <main>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
  </body>
<html>

O teu componente de cabeçalho reutilizável, agora, deve ser renderizado na página:

Agora, adicionar um cabeçalho à página é tão simples como adicionar uma tag <script> a apontar para components/header.js, e adicionar <header-component></header-component> onde quiseres.

Nota que, visto que o cabeçalho e a sua estilização estão a ser inseridos diretamente no DOM principal, é possível estilizá-lo no ficheiro style.css.

Se, contudo, observares os estilos do cabeçalho em connectedCallback, estes são bastante genéricos e podem afetar outros estilos na página.

Por exemplo, se adicionarmos o Font Awesome e um componente de rodapé a index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
    <script src="components/footer.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
    <footer-component></footer-component>
  </body>
<html>

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    this.innerHTML = `
      <style>
        footer {
          height: 60px;
          padding: 0 10px;
          list-style: none;
          display: flex;
          justify-content: space-between;
          align-items: center;
          background-color: #dfdfe2;
        }
        
        ul li {
          list-style: none;
          display: inline;
        }
        
        a {
          margin: 0 15px;
          color: inherit;
          text-decoration: none;
        }
        
        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #333;
        }
        
        .social-row {
          font-size: 20px;
        }
        
        .social-row li a {
          margin: 0 15px;
        }
      </style>
      <footer>
        <ul>
          <li><a href="about.html">About</a></li>
          <li><a href="work.html">Work</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
        <ul class="social-row">
          <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
          <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
          <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
        </ul>
      </footer>
    `;
  }
}

customElements.define('footer-component', Footer);

Aqui está como ficaria o aspeto da página:

A estilização do rodapé sobrepõe-se à estilização do cabeçalho, alterando a cor dos links. Este é o comportamento esperado para o CSS, mas seria interessante se a estilização de cada componente estivesse vinculada a esse componente, sem afetar outras coisas na página.

Bem, é mesmo onde o Shadow DOM brilha. Ou escurece? De qualquer modo, o Shadow DOM pode fazer isso.

Como utilizar o Shadow DOM com elementos personalizados

O Shadow DOM funciona como uma instância separada e mais pequena do DOM principal. Em vez de funcionar como uma cópia do DOM principal, o Shadow DOM é mais uma sub-árvore apenas para o teu elemento personalizado. Qualquer coisa adicionada a ele, especialmente os estilos, está vinculada a esse elemento personalizado em particular.

De certo modo, é como utilizar const e let em vez de var.

Vamos começar por refatorizar o componente de cabeçalho:

const headerTemplate = document.createElement('template');

headerTemplate.innerHTML = `
  <style>
    nav {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:  #0a0a23;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      font-weight: 700;
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #fff;
    }
  </style>
  <header>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
`;

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    
  }
}

customElements.define('header-component', Header);

A primeira coisa que precisas fazer é utilizar o método .attachShadow() para anexar uma raiz do Shadow Dom ao teu elemento de componente de cabeçalho personalizado. Em connectedCallback, adiciona o seguinte código:

...
class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });
  }
}

customElements.define('header-component', Header);

Repara que estamos a passar um objeto para .attachShadow() com uma opção, mode: 'closed'. Isto significa apenas que o Shadow DOM do componente de cabeçalho não é acessível a partir de JavaScript externo.

Se quiseres manipular o Shadow DOM do componente de cabeçalho mais tarde com JavaScript fora do ficheiro components/header.js, simplesmente muda a opção para mode: 'open'.

Por fim, anexa shadowRoot à página com o método .appendChild():

...

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(headerTemplate.content);
  }
}

customElements.define('header-component', Header);

Agora, visto que os estilos de componente do cabeçalho estão encapsulados no seu Shadow DOM, a página deve ter este aspeto:

Aqui está o componente de rodapé refatorizado para utilizar o Shadow DOM:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      background-color: #dfdfe2;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      margin: 0 15px;
      color: inherit;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #333;
    }
    
    .social-row {
      font-size: 20px;
    }
    
    .social-row li a {
      margin: 0 15px;
    }
  </style>
  <footer>
    <ul>
      <li><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="social-row">
      <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
      <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
    </ul>
  </footer>
`;

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Contudo, se observares a página, podes ver que os ícones do Font Awesome estão em falta:

Agora que o componente de rodapé está encapsulado dentro do seu próprio Shadow DOM, já não tem acesso ao link CDN do Font Awesome em index.html.

Vamos observar rapidamente a razão disto acontecer e como voltar a colocar o Font Awesome a funcionar.

Encapsulamento e o Shadow DOM

Enquanto que o Shadow DOM impede que os estilos dos teus componentes afetem o resto da página, alguns estilos globais podem infiltrar-se na mesma nos teus componentes.

Nos exemplos acima, isto era uma funcionalidade útil. Por exemplo, o componente de rodapé herda a declaração color: #333 que é definida em style.css. Isto acontece porque color é uma das propriedades que podem ser herdadas, juntamente com font, font-family, direction, entre outras.

Se quiseres impedir este comportamento e estilizar cada componente completamente do zero, podes fazê-lo com apenas algumas linhas de CSS:

:host {
  all: initial;
  display: block;
}

:host é um pseudosseletor que seleciona o elemento que está a hospedar o Shadow DOM. Neste caso, é o teu componente personalizado.

Então, a declaração all: initial redefine todas as propriedades CSS de volta para os seus valores iniciais. display: block faz a mesma coisa para a propriedade display e redefine a propriedade de volta para a predefinição do navegador, block.

Para uma lista completa de propriedades do CSS que podem ser herdadas, observa esta resposta no Stack Overflow (texto em inglês).

Como utilizar o Font Awesome com o Shadow DOM

Agora, podes estar a pensar, se font, font-family e outras propriedades do CSS relacionadas com tipos de letra são propriedades que podem ser herdadas, porque é que o Font Awesome não carrega agora que o componente de rodapé está a utilizar o Shadow DOM?

Acontece que, para coisas como fontes e outros recursos, estas precisam de ser referenciadas tanto no DOM principal como no Shadow DOM para funcionar corretamente.

Felizmente, existem algumas formas simples de corrigir isto.

Observação: todos estes métodos ainda requerem que o Font Awesome seja incluído em index.html, com o elemento link tal como no trecho de código acima.

Nº 1: Link para o Font Awesome dentro do teu componente

A forma mais direta de fazer com que o Font Awesome funcione no teu componente do Shadow DOM é incluir um link para ele dentro do próprio componente:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
...

Uma coisa a ter em conta é que, embora pareça que estás a causar que o navegador carregue duas vezes o Font Awesome (uma para o DOM principal e novamente para o componente), os navegadores são suficientemente inteligentes para não buscar o mesmo recurso novamente.

Aqui está o separador de rede a mostrar que o Chrome vai buscar o Font Awesome uma só vez:

Nº 2: Importar o Font Awesome dentro do teu componente

De seguida, podes utilizar @import e url() para carregar o Font Awesome no teu componente:

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css");

    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
...

Nota que o URL deve ser o mesmo que estás a utilizar em index.html.

Nº 3: Utilizar JavaScript para carregar dinamicamente o Font Awesome para o teu componente

Por fim, a forma mais prática de carregar o Font Awesome dentro do teu componente é utilizar um pouco de JavaScript:

...
class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    // Query para o DOM principal para FA
    const fontAwesome = document.querySelector('link[href*="font-awesome"]');
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    // Carregar condicionalmente FA para o componente
    if (fontAwesome) {
      shadowRoot.appendChild(fontAwesome.cloneNode());
    }

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Este método é baseado nesta resposta no Stack Overflow (texto em inglês) e funciona de modo bastante simples. Quando o componente carrega, se um elemento link a apontar para o Font Awesome existir, então é clonado e anexado ao Shadow DOM do componente:

Código final

Aqui está como fica o código final ao longo de todos os ficheiros, utilizando o método nº 3 para carregar o Font Awesome no componente de rodapé:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="components/header.js" type="text/javascript" defer></script>
    <script src="components/footer.js" type="text/javascript" defer></script>
  </head>
  <body>
    <header-component></header-component>
    <main>
      <!-- O conteúdo da tua página -->
    </main>
    <footer-component></footer-component>
  </body>
<html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  color: #333;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

const headerTemplate = document.createElement('template');

headerTemplate.innerHTML = `
  <style>
    nav {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color:  #0a0a23;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      font-weight: 700;
      margin: 0 25px;
      color: #fff;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #fff;
    }
  </style>
  <header>
    <nav>
      <ul>
        <li><a href="about.html">About</a></li>
        <li><a href="work.html">Work</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
`;

class Header extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    shadowRoot.appendChild(headerTemplate.content);
  }
}

customElements.define('header-component', Header);

const footerTemplate = document.createElement('template');

footerTemplate.innerHTML = `
  <style>
    footer {
      height: 60px;
      padding: 0 10px;
      list-style: none;
      display: flex;
      flex-shrink: 0;
      justify-content: space-between;
      align-items: center;
      background-color: #dfdfe2;
    }

    ul {
      padding: 0;
    }
    
    ul li {
      list-style: none;
      display: inline;
    }
    
    a {
      margin: 0 15px;
      color: inherit;
      text-decoration: none;
    }
    
    a:hover {
      padding-bottom: 5px;
      box-shadow: inset 0 -2px 0 0 #333;
    }
    
    .social-row {
      font-size: 20px;
    }
    
    .social-row li a {
      margin: 0 15px;
    }
  </style>
  <footer>
    <ul>
      <li><a href="about.html">About</a></li>
      <li><a href="work.html">Work</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
    <ul class="social-row">
      <li><a href="https://github.com/my-github-profile"><i class="fab fa-github"></i></a></li>
      <li><a href="https://twitter.com/my-twitter-profile"><i class="fab fa-twitter"></i></a></li>
      <li><a href="https://www.linkedin.com/in/my-linkedin-profile"><i class="fab fa-linkedin"></i></a></li>
    </ul>
  </footer>
`;

class Footer extends HTMLElement {
  constructor() {
    super();
  }

  connectedCallback() {
    const fontAwesome = document.querySelector('link[href*="font-awesome"]');
    const shadowRoot = this.attachShadow({ mode: 'closed' });

    if (fontAwesome) {
      shadowRoot.appendChild(fontAwesome.cloneNode());
    }

    shadowRoot.appendChild(footerTemplate.content);
  }
}

customElements.define('footer-component', Footer);

Para terminar

Abordamos muita coisa aqui. Podes já ter decidido simplesmente utilizar React ou Handlebars.js em vez disso.

São ambas óptimas opções!

Mesmo assim, para um projeto mais pequeno onde vais precisar apenas de alguns componentes reutilizáveis, uma biblioteca completa ou linguagem de template pode ser demasiado.

Esperançosamente, agora tens a confiança para criar os teus próprios componentes HTML reutilizáveis. Agora, vai lá e cria algo excelente (e reutilizável).

Nos primeiros dias da web, os elementos HTML, como a tag blink, eram maneiras nativas de adicionar alguns efeitos de animação para animar uma página da web. Como podemos usar essas animações hoje para adicionar brilho aos nossos sites e aplicações?

• O que é a tag blink do HTML?
• Como se usa a tag blink?
• Você ainda pode usar a tag blink?
• Recriando a tag blink com animações em CSS

O que é a tag blink do HTML?

A tag blink (<blink>) é uma tag HTML obsoleta, que faz o conteúdo da tag piscar lentamente.

Ela, juntamente com outras tags obsoletas, como a tag marquee (<marquee>), eram uma maneira fácil de adicionar efeitos de animação simples no seu site.

Como se usa a tag blink?

Como a tag blink era um elemento HTML simples, você a usaria diretamente com o seu conteúdo.

Por exemplo, se você quisesse que a palavra "blink" em blink-182 piscasse, você escreveria o seguinte código HTML:

<p>
  <blink>blink</blink>-182
</p>

Você ainda pode usar a tag blink?

Como você deve ter notado no gif acima, essa tag está obsoleta.

Isso significa que você não pode usar a tag blink do HTML por si só. No entanto, isso não deve nos impedir de refazer seus efeitos em toda sua glória piscante.

Observação: a tag blink foi depreciada devido a preocupações com acessibilidade. Faça sua pesquisa (em inglês) antes de tentar usar uma solução que traga o mesmo efeito, pois todos devemos nos esforçar para fazer nossos projetos o mais inclusivos possível.

Recriando a tag blink com animações em CSS

Hoje, no mundo do desenvolvimento para a web, animações geralmente são tratadas com CSS ou JavaScript. Usando animações em CSS, conseguimos recriar a tag blink com apenas algumas linhas e a temos funcionando de novo.

Com o seguinte CSS:

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Você pode adicionar a classe .blink a qualquer elemento HTML para fazê-lo piscar.

<p>
  <span class="blink">blink</span>-182
</p>

Modernizando a tag blink

Se quiséssemos algo um pouco mais suave, o que poderíamos fazer?

Bom, para começar, podemos fazer a animação desaparecer gradualmente removendo os steps (passos, em português) da definição da animação.

.blink {
  animation: blink 1s infinite;
}

Se quiséssemos fazê-la desaparecer gradualmente como um efeito de ficção científica, seria possível?

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    color: blue;
  }
}

Também podemos usar um efeito de crescimento e desaparecimento bem legal.

.blink {
  animation: blink 3s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale(2);
  }
  51% {
    opacity: 0;
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

Controlando as animações com CSS

Embora você não possa mais usar a tag blink, você ainda tem várias opções. O CSS fornece diversas opções de animação nativamente. Então, se você deseja recriar seu passatempo favorito em HTML  ou recriar a sequência do título de "Alien, o oitavo passageiro", pratique. As possibilidades são virtualmente infinitas.

• Siga o autor no Twitter
• Inscreva-se no canal do autor no YouTube
• ✉️ Assine a newsletter do autor

Neste curso, você aprenderá a começar a utilizar o HTML para produzir suas próprias páginas para a web. Se você está começando a aprender a respeito de tecnologia, a criação de páginas para a web é um ótimo lugar para se começar. O currículo do freeCodeCamp inicia exatamente aí, no design responsivo para a web, e o freeCodeCamp ensina sobre ele na forma de desafios, nos quais você terá um projeto para realizar enquanto aprende sobre os conceitos mais importantes.

Durante o curso, Nielda orienta sobre esses conceitos iniciais usando o primeiro desafio da certificação de design responsivo para a web, "Aprenda HTML criando um aplicativo de fotos de gatos".

Nele, você aprenderá a criar os vários elementos do HTML com base nos elementos e suas respectivas tags. Você verá como criar títulos, parágrafos, listas e o que torna o HTML tão interessante, a criação de links para outras páginas da web.

O que você verá no curso?

Aqui, você verá uma versão reduzida do conteúdo do curso.

Nielda inicia o curso introduzindo o significado da sigla HTML (HyperText Markup Language, ou, em português, Linguagem de Marcação de Hipertexto).

Para desenvolver software em geral, normalmente, é recomendado o uso de editores de código. Com o HTML, não é diferente. Assim, você será apresentado ao Visual Studio Code para criar rapidamente suas páginas em HTML, já que ele vem com uma série de atalhos e funções que tornarão o processo bem mais simplificado – podendo, inclusive, ser utilizado com todos os comandos da interface em português.

Após a introdução ao VS Code, Nielda ensina você a criar sua primeira página simplificada para a web – o famoso "Olá, mundo!". Além disso, você será apresentado a um validador de HTML, onde você poderá verificar se a marcação em HTML do seu projeto é válida.

Tags

Depois de introduzir você ao HTML, começamos a ver as várias tags, os construtores do HTML e de seus elementos, que compõem o núcleo da linguagem.

Nielda conduzirá você pelo universo das tags do HTML, passando primeiramente pela diferença entre as tags head e body e por como elas interagem para a criação da página em HTML. Você verá que o elemento head é utilizado para conter a metainformação da página (aquela que não é visualizada pelo usuário) e como, no elemento body, construímos a página em si, a interface com a qual o usuário entrará em contato.

Depois, passamos à tag meta, presente apenas em head e responsável pelas informações relevantes sobre o site.

Ao começar a tratar do elemento body, você será apresentado aos primeiros elementos de texto, os títulos, de h1 a h6, que são os vários formatos de título que podemos utilizar na linguagem, bem como o elemento p, utilizado para a exibição de parágrafos em HTML.

Para aumentar a organização do conteúdo visível, somos apresentados às tags header (cabeçalho), main (conteúdo principal), footer (rodapé) e aside (conteúdo "lateral"), que, embora não apareçam visualmente na página, demarcam espaços nos quais colocaremos o conteúdo da página, e definiremos sua importância para o usuário. Além delas, vemos as tags section e article, importantes para marcar seções da página e conteúdo independente.

Durante o curso, você verá também tags usadas para realçar texto, como a tag para indicar ênfase, em, e a tag para reforçar texto, strong, os equivalentes semânticos de itálico e negrito, respectivamente.

A instrutora também introduz brevemente os atributos em HTML, apresentando id e class que, mais tarde, serão utilizados para identificar, individualmente, no caso do primeiro, e em grupo, no caso do segundo, elementos do HTML para identificá-los na estilização com o CSS ou para realizarmos ações com eles com o JavaScript.

Voltando aos elementos de organização do texto, vemos como criar listas usando as tags ul e ol, para criação de listas não ordenadas e ordenadas, respectivamente. Vemos, também, a utilização da tag nav para a criação de menus.

Para dar ao conteúdo do site um pouco mais de riqueza visual, somos também apresentados à tag img, responsável pela inserção de imagens no HTML. Com ela, você poderá adicionar as várias fotos de gatos (ou o que você quiser adicionar) ao seu site.

Logo depois, passamos à criação de formulários em HTML, tão importantes para receber informações diretamente do usuário. Nesta parte, Nielda introduz os elementos form (para envolver e criar o formulário), seu atributo action, que ditará o que será feito com as informações inseridas no formulário, os vários tipos de input - numéricos, de texto, para senhas e assim por diante. Vemos, nesta seção, como atribuir textos descritivos aos campos de input usando a tag label, bem como dividir campos do formulário com fieldset. A seção de formulários encerra com a criação de botões de envio de formulário e de redefinição (limpeza) dos campos, usando a tag button.

A criação de hiperlinks é o que torna o HTML tão rico e útil. Vemos a utilização da tag a para a realização desses vínculos e como associar sua página principal à página de formulário e a uma página com a galeria das fotos dos gatos, objetivo do projeto desde o início. Você terá aprendido, então, ao final do curso, a criar uma página inicial para a aplicação, uma página de galeria de fotos e uma página de formulário. O resultado pode ser visto abaixo:

O curso faz, também, uma breve passagem pela introdução à estilização. Nielda insere um pouco de CSS no código e mostra como fazer isso usando um arquivo CSS externo e usando a tag link no HTML para vinculá-lo à página.

Você terá neste curso uma ótima introdução ao HTML, aprenderá como construir um site estático, vincular páginas entre si, ter uma galeria de imagens e criar um formulário para obter informações de seu usuário. O curso introdutório de HTML é um primeiro passo orientado com carinho para aqueles que desejam começar a aprender mais sobre o mundo do desenvolvimento para a web.

Acesse o curso no canal do freeCodeCamp no YouTube através deste link e comece agora sua jornada para a web.

Confira, também, alguns textos traduzidos pela criadora do curso aqui no editorial do freeCodeCamp.

Introdução

Boas-vindas! Eu escrevi esse manual para ajudar você a aprender HTML de maneira rápida e para se familiarizar com tópicos avançados de HTML.

HTML, forma abreviada de Hypertext Markup Language (em português, linguagem de marcação de hipertexto), é um dos blocos fundamentais da web.

O HTML nasceu oficialmente em 1993 e, desde então, evoluiu até o ponto atual, partindo de simples documentos de texto até as poderosas aplicações para a web.

Este manual é destinado a um público bem amplo.

Primeiro, o público iniciante. Eu explico HTML do zero de uma maneira sucinta, mas abrangente. Assim, você pode usar este manual para aprender HTML desde o básico.

Depois, temos o público profissional. O HTML é, com frequência, considerado algo secundário a ser aprendido e, muitas vezes, não recebe a devida atenção.

Ainda assim, diversos aspectos do HTML permanecem um mistério para muitas pessoas, inclusive para o autor deste artigo. Escrevi este manual para me ajudar a entender melhor esse tópico. Afinal, quando se decide ensinar algo, melhor se certificar de que se conhece o assunto de uma ponta a outra.

Mesmo que você não escreva HTML no seu dia a dia de trabalho, saber como o HTML funciona ajudará você a evitar dores de cabeça quando precisar entender do tema em algum momento, por exemplo, ao tentar ajustar algo em uma página da web.

Você pode encontrar o autor pelo Twitter ou no site do autor.

Observação: você também pode fazer o download deste manual em inglês no formato PDF/ePub/Mobi e lê-lo off-line.

Sumário

• Prefácio
• HTML Básico
• Título do documento
• Corpo do documento
• Tags que interagem com texto
• Links
• Tags de contêiner e estrutura da página do HTML
• Formulários
• Tabelas
• Tags de multimídia: audio e video
• Iframes
• Imagens
• Acessibilidade

Prefácio

O HTML é a base da maravilha que chamamos de web.

Existe um poder incrível por baixo desse conjunto de regras simples e limitado, que nos permite – desenvolvedores, criadores, designers, escritores e pensadores – criar documentos, aplicações e experiências para pessoas em todo o planeta.

Meu primeiro livro sobre HTML saiu em 1997 e era chamado "HTML Unleashed", um livro grande e com muitas páginas.

Mais de vinte anos se passaram, mas o HTML ainda é a base da web, com mudanças mínimas desde então.

Claro, existem mais tags semânticas, o HTML de apresentação não é mais uma tendência, o CSS agora é o responsável pelo design das coisas, entre outras questões.

O sucesso do HTML é baseado em uma coisa: simplicidade.

Ele resistiu ao sequestro pelo dialeto XML via XHTML, quando, no fim, as pessoas notaram que era algo demasiadamente complexo.

Isso aconteceu por causa de outra característica que ele nos proporciona: indulgência. Existem algumas regras, certo, mas depois que você aprende o HTML, passa a ter muita liberdade.

Os navegadores aprenderam a ser resilientes e a sempre tentar fazer o melhor ao analisar e apresentar o HTML aos usuários.

Toda a plataforma da web fez uma coisa certa: nunca quebrou a compatibilidade com versões anteriores. Incrivelmente, podemos voltar aos documentos em HTML escritos em 1991 e eles se parecem muito com o que víamos na época.

Sabemos até qual foi a primeira página da web. Foi esta aqui: http://info.cern.ch/hypertext/WWW/TheProject.html

Você pode ver a fonte da página, graças a outro grande recurso da web e do HTML: podemos inspecionar o HTML de qualquer página da web.

Não considere isso uma coisa óbvia. Não conheço nenhuma outra plataforma que nos dê essa capacidade.

As excepcionais Ferramentas de Desenvolvedor integradas a qualquer navegador nos permitem inspecionar e nos inspirar no HTML escrito por qualquer pessoa no mundo.

Se você é novo em HTML, este manual tem como objetivo ajudá-lo a começar. Se você é um desenvolvedor da web experiente, este manual ajudará a aprimorar seu conhecimento.

Aprendi muito escrevendo este manual, mesmo trabalhando com a web há mais de 20 anos, e tenho certeza de que você também encontrará algo novo.

Talvez você vá reaprender algo antigo de que você esqueceu.

De qualquer modo, o objetivo do manual é ser útil para você. Espero que ele seja bem-sucedido nisso.

HTML BÁSICO

HTML é um padrão definido pelo WHATWG, um acrônimo para Web Hypertext Application Technology Working Group, uma organização formada por pessoas que trabalham nos navegadores da web mais populares. Isso significa que é basicamente controlado por Google, Mozilla, Apple e Microsoft.

No passado, o W3C (World Wide Web Consortium) era a organização encarregada de criar o padrão HTML.

O controle mudou informalmente do W3C para o WHATWG quando ficou claro que o impulso do W3C em direção ao XHTML não era uma boa ideia.

Se você nunca ouviu falar de XHTML, aqui está uma pequena história. No início dos anos 2000, todos acreditávamos que o futuro da web era o XML (sério). Assim, o HTML deixou de ser uma linguagem de autoria baseada em SGML e passou a ser uma linguagem de marcação XML.

Foi uma grande mudança. Tínhamos que conhecer e respeitar mais regras, regras mais rígidas.

No fim, os fornecedores de navegadores perceberam que esse não era o caminho certo para a web e recuaram, criando o que hoje é conhecido como HTML5.

O W3C realmente não concordou em abrir mão do controle do HTML. Durante anos, tivemos dois padrões concorrentes, cada um com o objetivo de ser o oficial. Ao fim, em 28 de maio de 2019, foi oficializado pelo W3C que a versão do HTML "verdadeira" era a publicada pelo WHATWG.

Eu mencionei HTML5. Deixe-me falar dessa pequena história. Eu sei, é meio confuso até agora, como acontece com muitas coisas na vida quando muitos atores estão envolvidos, mas também é fascinante.

Tínhamos a versão HTML 1 em 1993. Aqui está o RFC original (em inglês).

O HTML 2 foi lançado em 1995.

Recebemos o HTML 3 em janeiro de 1997 e o HTML 4 em dezembro de 1997.

Muita coisa aconteceu!

Mais de 20 anos se passaram. Houve toda essa onda de XHTML e, ao final, chegamos a essa "coisa" chamada HTML5, que não é mais apenas HTML.

HTML5 é um termo que agora define todo um conjunto de tecnologias, que inclui HTML, mas adiciona muitas APIs e padrões como WebGL, SVG e muito mais.

A chave para entender é a seguinte: agora, não existe (mais) uma versão de HTML. É um padrão de vida. Isso é o mesmo que ocorre com o CSS, que é chamado de "3", mas, na realidade, são vários módulos independentes desenvolvidos separadamente. Também é o mesmo que ocorre com o JavaScript, onde temos uma nova edição a cada ano, mas, hoje em dia, a única coisa que importa é quais recursos individuais são implementados pelo mecanismo.

Sim, nós o chamamos de HTML5, mas o HTML4 é de 1997. Isso é muito tempo para qualquer coisa, especialmente para a web.

É aqui que o padrão "vive" agora: https://html.spec.whatwg.org/multipage (em inglês).

O HTML é a linguagem de marcação que usamos para estruturar o conteúdo que consumimos na web.

Ele é servido no navegador de diferentes maneiras.

• Ele pode ser gerado por uma aplicação do lado do servidor que o constrói dependendo da solicitação ou dos dados da sessão, por exemplo, uma aplicação de Rails, Laravel ou Django.
• Ele pode ser gerado por uma aplicação em JavaScript do lado do client que gera HTML em tempo real.
• No caso mais simples, ele pode ser armazenado em um arquivo e servido no navegador por um servidor da web.

Vamos nos aprofundar nesse último caso. Embora, na prática, seja provavelmente o modo menos popular de se gerar HTML, ainda é essencial conhecer seus blocos básicos de construção.

Por convenção, um arquivo HTML é salvo com uma extensão .html ou .htm.

Dentro desse arquivo, organizamos o conteúdo usando tags.

As tags envolvem o conteúdo e cada tag dá um significado especial ao texto que envolve.

Vamos mostrar alguns exemplos.

Este trecho de HTML cria um parágrafo usando a tag p:

<p>Um parágrafo de texto</p>

Este trecho de HTML cria uma lista de itens usando a tag ul, que significa lista não ordenada. As tags li significam item de lista:

<ul>
  <li>Primeiro item</li>
  <li>Segundo item</li>
  <li>Terceiro item</li>
</ul>

Quando uma página de HTML é servida pelo navegador, as tags são interpretadas e o navegador renderiza os elementos de acordo com as regras que definem sua aparência visual.

Algumas dessas regras são incorporadas, como quando uma lista é renderizada ou quando um link é sublinhado em azul.

Algumas outras regras são definidas por você com CSS.

O HTML não se destina à apresentação. Ele não está preocupado com a aparência das coisas. Em vez disso, seu foco é naquilo que as coisas significam.

Cabe ao navegador determinar como as coisas ficam, com as diretivas definidas por quem constrói a página, usando a linguagem CSS.

Agora, esses dois exemplos que fiz são trechos de HTML tirados de um contexto de página.

Estrutura de página do HTML

Vamos criar um exemplo de uma página do HTML adequado.

As coisas começam com a declaração do tipo de documento (também conhecido como doctype), uma maneira de dizer ao navegador que esta é uma página em HTML e qual versão do HTML estamos usando.

O HTML moderno usa este doctype:

<!DOCTYPE html>

Então, temos o elemento html, que possui uma tag de abertura e outra de fechamento:

<!DOCTYPE html>
<html>
...
</html>

A maioria das tags vem em pares com uma tag de abertura e uma tag de fechamento. A tag de fechamento é escrita da mesma forma que a tag de abertura, mas com um /:

<exemplodetag>Conteúdo</exemplodetag>

Existem algumas tags de fechamento automático, o que significa que elas não precisam de uma tag de fechamento separada, pois não contêm nada nelas.

A tag inicial html é usada no início do documento, logo após a declaração do tipo de documento.

A tag final html é a última coisa presente em um documento HTML.

Dentro do elemento html temos 2 elementos, head e body:

<!DOCTYPE html>
<html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
</html>

Dentro de head, teremos tags que são essenciais para a criação de uma página web, como o título, os metadados, o CSS e o JavaScript internos ou externos. Em especial, coisas que não aparecem diretamente na página, mas apenas ajudam o navegador (ou bots como o bot de pesquisa do Google) a exibi-la corretamente.

Dentro do body, teremos o conteúdo da página em si – as coisas visíveis.

Tags x elementos

Eu mencionei tags e elementos. Qual é a diferença?

Os elementos têm uma tag inicial e uma tag de fechamento. Neste exemplo, usamos as tags de abertura e de fechamento de p para criar um elemento p:

<p>Um parágrafo de texto</p>

Assim, um elemento constitui todo o pacote:

• tag de abertura
• conteúdo de texto (e, possivelmente, outros elementos)
• tag de fechamento

Se um elemento não tiver tag de fechamento, ele será escrito apenas com a tag de abertura e não poderá conter nenhum conteúdo de texto.

Dito isso, posso usar o termo tag ou elemento no manual significando a mesma coisa, exceto se mencionar explicitamente a tag de abertura ou a tag de fechamento.

Atributos

A tag de abertura de um elemento pode ter trechos especiais de informações que podemos anexar. Esses trechos são chamados de atributos.

Atributos têm a sintaxe chave="valor":

<p class="uma-classe">Um parágrafo de texto</p>

Você também pode usar aspas simples, mas usar aspas duplas em HTML é uma boa convenção.

Podemos ter muitos atributos:

<p class="uma-classe" id="um-id">Um parágrafo de texto</p>

Alguns atributos são booleanos, o que significa que você só precisa da chave:

<script defer src="file.js"></script>

Os atributos class e id são dois dos mais comuns que você encontrará sendo usados.

Eles têm um significado especial e são úteis tanto em CSS quanto em JavaScript.

A diferença entre os dois é que um id é único no contexto de uma página da web. Ele não pode ser duplicado.

As classes class, por outro lado, podem aparecer várias vezes em vários elementos.

Além disso, um id é apenas um valor. class pode conter vários valores, separados por um espaço:

<p class="uma-classe outra-classe">Um parágrafo de texto</p>

É comum usar o traço - para separar palavras em um valor de classe, mas é apenas uma convenção.

Esses são apenas dois dos atributos possíveis que você pode ter. Alguns atributos são usados ​​apenas para uma tag. Eles são altamente especializados.

Outros atributos podem ser usados ​​de maneira mais geral. Você acabou de ver id e class, mas temos outros também, como style, que pode ser usado para inserir regras CSS em linha (do inglês, inline) em um elemento.

Diferenciação de maiúsculas e minúsculas

HTML não diferencia maiúsculas de minúsculas. As tags podem ser escritas em letras maiúsculas ou minúsculas. Inicialmente, AS MAIÚSCULAS eram a norma. Hoje, letras minúsculas são a norma. É apenas uma convenção.

Geralmente, escrevemos assim:

<p>Um parágrafo de texto</p>

Não escrevemos as tags assim:

<P>Um parágrafo de texto</P>

Espaço em branco

Importante: em HTML, mesmo que você adicione vários espaços em branco em uma linha, ela é recolhida pelo mecanismo do CSS do navegador.

Por exemplo, a renderização deste parágrafo:

<p>Um parágrafo de texto</p>

é a mesma que esse:

<p>        Um parágrafo de texto</p>

e que esse também:

<p>Um parágrafo

de
           texto          </p>

Usando a propriedade do white-space, do CSS, você pode alterar como as coisas se comportam. Você pode encontrar mais informações sobre como o CSS processa o espaço em branco no CSS Spec (texto em inglês).

Eu, geralmente, prefiro:

<p>Um parágrafo de texto</p>

ou

<p>
    Um parágrafo de texto
</p>

As tags aninhadas devem ser recuadas com 2 ou 4 caracteres, dependendo de sua preferência:

<body>
    <p>
        Um parágrafo de texto
    </p>
    <ul>
        <li>Um item de lista</li>
    </ul>
</body>

Observação: esse recurso em que o "espaço em branco não é relevante" significa que, se você quiser adicionar espaço adicional, pode acabar bem irritado. Sugiro que você use CSS para ganhar mais espaço quando necessário.

Observação: em casos especiais, você pode usar a entidade   do HTML (um acrônimo que significa espaço sem quebra) – mais sobre entidades do HTML posteriormente. Acho que isso não deve ser abusado. O CSS é sempre preferido para alterar a apresentação visual.

TÍTULO DO DOCUMENTO

A tag head contém tags especiais que definem as propriedades do documento.

É sempre escrita antes da tag body e logo após a tag html de abertura:

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    ...
</html>

Nunca usamos atributos nessa tag. Também não escrevemos conteúdo nela.

Ela é apenas um recipiente para outras tags. Dentro dela, podemos ter uma grande variedade de tags, dependendo do que você precisa fazer:

• title
• script
• noscript
• link
• style
• base
• meta

Tag title

A tag title determina o título da página. O título é exibido no navegador e é especialmente importante, pois é um dos principais fatores para a otimização de mecanismos de pesquisa (SEO).

Tag script

Essa tag é usada para adicionar JavaScript à página.

Você pode incluí-lo em linha, usando uma tag de abertura, o código JavaScript e depois a tag de fechamento:

<script>
... código em JS aqui
</script>

Você também pode carregar um arquivo JavaScript externo usando o atributo src:

<script src="arquivo.js"></script>

O atributo type, por padrão, é definido como text/javascript. Portanto, é totalmente opcional.

Há algo muito importante a saber sobre essa tag.

Às vezes, ela é usada na parte inferior da página, logo antes da tag de fechamento de </body>. Por quê? Por motivos de desempenho.

Carregar scripts por padrão bloqueia a renderização da página até que o script seja analisado e carregado.

Ao colocar os scripts na parte inferior da página, o script é carregado e executado após a página inteira já ser analisada e carregada, proporcionando uma experiência melhor ao usuário em vez de mantê-los na tag head.

Minha opinião é que isso agora é uma má prática. Deixe o script em paz na tag head.

No JavaScript moderno, temos uma alternativa que é mais eficiente do que manter o script na parte inferior da página - o atributo defer. Este é um exemplo que carrega um arquivo arquivo.js, relativo ao URL atual:

<script defer src="arquivo.js"></script>

Esse é o cenário que aciona o caminho mais rápido para uma página de carregamento rápido e para JavaScript de carregamento rápido.

Observação: o atributo async é semelhante, mas, na minha opinião, é uma opção pior do que defer. Descrevo o porquê, com mais detalhes, na página https://flaviocopes.com/javascript-async-defer/ (texto em inglês).

Tag noscript

Essa tag é usada para detectar quando os scripts estão desabilitados no navegador.

Observação: os usuários podem optar por desabilitar os scripts de JavaScript nas configurações do navegador. O navegador também pode não os suportar por padrão.

Essa tag é usada de modos diferentes, dependendo do fato de ser colocada no cabeçalho do documento ou no corpo do documento.

Estamos falando sobre o cabeçalho do documento agora. Então, vamos primeiro apresentar esse uso.

Nesse caso, a tag noscript pode conter apenas outras tags:

• link tags
• style tags
• meta tags

Ela serve para alterar os recursos servidos pela página, ou as informações de meta, se os scripts estiverem desabilitados.

Neste exemplo, configurei um elemento com a classe no-script-alert para que seja exibido se os scripts estiverem desabilitados, pois era display: none por padrão:

<!DOCTYPE html>
<html>
    <head>
        ...
        <noscript>
            <style>
                .no-script-alert {
                    display: block;
                }
            </style>
        </noscript>

        ...
    </head>
    ...
</html>

Vamos resolver o outro caso: se colocado no corpo, pode conter conteúdo, como parágrafos e outras tags, que são renderizadas na UI.

Tag link

A tag de link é usada para definir relacionamentos entre um documento e outros recursos.

É usada principalmente para vincular um arquivo CSS externo a ser carregado.

Esse elemento não possui tag de fechamento.

Uso:

<!DOCTYPE html>
<html>
    <head>
        ...
        <link href="file.css" rel="stylesheet">
        ...
    </head>
    ...
</html>

O atributo media permite o carregamento de diferentes folhas de estilo, dependendo das capacidades do dispositivo:

<link href="file.css" media="screen" rel="stylesheet">
<link href="print.css" media="print" rel="stylesheet">

Também podemos vincular a outros recursos além de folhas de estilo.

Por exemplo, podemos associar a um feed de RSS usando

<link rel="alternate" type="application/rss+xml" href="/index.xml">

Ou podemos associar um favicon usando:

<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">

<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">

<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">

Essa tag também foi usada para conteúdo de múltiplas páginas, para indicar a página anterior e a próxima usando rel="prev" e rel="next". Principalmente para o Google. A partir de 2019, o Google anunciou que não usa mais essa tag porque pode encontrar a estrutura correta da página sem ela.

Tag style

Essa tag pode ser usada para adicionar estilos ao documento, em vez de carregar uma folha de estilo externa.

Uso:

<style>
... algum css {}
</style>

Assim como na tag link, você pode usar o atributo media para usar esse CSS apenas na mídia especificada:

<style media="print">
... algum css {}
</style>

Tag base

Essa tag é usada para definir um URL base para todos os URLs relativos contidos na página.

<!DOCTYPE html>
<html>
    <head>
        ...
        <base href="https://flaviocopes.com/">
        ...
    </head>
    ...
</html>

Tag meta

Tags meta executam uma variedade de tarefas e são muito, muito importantes, especialmente para SEO.

Elementos meta só tem a tag de abertura.

A mais básica é a tag meta de descrição, ou description:

<meta name="description" content="Uma página legal">

Ela pode ser usada pelo Google para gerar a descrição da página em suas páginas de resultados, se achar que descreve melhor a página do que o conteúdo da página (não me pergunte como).

A tag meta charset é usada para definir a codificação de caracteres da página. Essa codificação é a utf-8, na maioria dos casos:

<meta charset="utf-8">

A tag meta robots instrui os bots de mecanismos de busca a indexar uma página ou não:

<meta name="robots" content="noindex">

Ou se eles devem seguir os links ou não:

<meta name="robots" content="nofollow">

Você também pode definir nofollow em links individuais. É assim que você pode definir o nofollow globalmente.

Você pode combiná-los:

<meta name="robots" content="noindex, nofollow">

O comportamento padrão é index, follow.

Você pode usar outras propriedades, incluindo nosnippet, noarchive, noimageindex e mais.

Você também pode simplesmente informar algo ao Google em vez de visar todos os mecanismos de pesquisa:

<meta name="googlebot" content="noindex, nofollow">

Outros mecanismos de pesquisa também podem ter sua própria tag meta.

Falando nisso, podemos dizer ao Google para desativar alguns recursos. Isso impede a funcionalidade de tradução nos resultados do mecanismo de pesquisa:

<meta name="google" content="notranslate">

A tag meta viewport é usada para informar ao navegador para definir a largura da página com base na largura do dispositivo.

<meta name="viewport" content="width=device-width, initial-scale=1">

Leia mais sobre essa tag aqui (texto em inglês).

Outra tag meta bastante popular é a http-equiv="refresh". Esta linha diz ao navegador para esperar 3 segundos e redirecionar para outra página:

<meta http-equiv="refresh" content="3;url=http://flaviocopes.com/outra-pagina">

Usar 0 em vez de 3 redirecionará o mais rápido possível.

Esta não é uma referência completa. Existem outras tags meta menos usadas.

Após essa introdução ao título do documento, podemos começar a mergulhar no corpo do documento.

CORPO DO DOCUMENTO

Após o fechamento da tag head, só podemos ter uma coisa em um documento HTML: o elemento body.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Assim como as tags head e html, só podemos ter uma tag body em uma página.

Dentro da tag body temos todas as tags que definem o conteúdo da página.

Tecnicamente, as tags de abertura e de fechamento de body são opcionais. Considero, no entanto, uma boa prática adicioná-las, apenas para maior clareza.

Nos próximos capítulos, definiremos a variedade de tags que você pode usar dentro do corpo da página.

Antes, porém, devemos introduzir uma diferença entre elementos de bloco e elementos em linha (do inglês, inline).

Elementos de bloco x elementos em linha

Os elementos visuais, aqueles definidos no corpo da página, podem ser geralmente classificados em 2 categorias:

• elementos de bloco (p, div, elementos de título, listas, itens de lista, ...)
• elementos em linha (a, span, img, ...)

Qual é a diferença?

Elementos de bloco, quando posicionados na página, não permitem outros elementos próximos a eles, para a esquerda ou para a direita.

Os elementos em linha podem ficar ao lado de outros elementos em linha.

A diferença também está nas propriedades visuais que podemos editar usando CSS. Podemos alterar a largura/altura, margem, preenchimento e borda dos elementos em bloco. Não podemos fazer isso para elementos em linha.

Observe que, usando CSS, podemos alterar o padrão para cada elemento, definindo uma tag p para que seja em linha, por exemplo, ou um span para ser um elemento em bloco.

Outra diferença é que os elementos em linha podem estar contidos em elementos em bloco. O contrário, no entanto, não é verdade.

Alguns elementos em bloco podem conter outros elementos em bloco, mas isso depende. A tag p, por exemplo, não permite tal opção.

TAGS QUE INTERAGEM COM TEXTO

Tag p

Essa tag define um parágrafo de texto.

<p>Um texto</p>

É um elemento de bloco.

Dentro dele, podemos adicionar qualquer elemento em linha que desejarmos, como span ou a.

Não podemos adicionar elementos em bloco.

Não podemos aninhar um elemento p em outro.

Por padrão, os navegadores estilizam um parágrafo com uma margem na parte superior e na parte inferior. Essa margem é de 16px no Chrome, mas o valor exato pode variar entre os navegadores.

Isso faz com que dois parágrafos consecutivos fiquem espaçados, replicando o que pensamos de um "parágrafo" no texto impresso.

Tag span

Essa é uma tag em linha que pode ser usada para criar uma seção em um parágrafo. Essa seção pode ser segmentada usando CSS:

<p>Uma parte do texto <span>e aqui vai outra parte</span></p>

Tag br

Essa tag representa uma quebra de linha. É um elemento em linha e não precisa de uma tag de fechamento.

Usamos para criar uma linha dentro de uma tag p sem criar um parágrafo.

Em comparação com a criação de um parágrafo, não adiciona espaçamento a mais.

<p>Um texto<br>Uma nova linha</p>

Tags de título

O HTML nos fornece 6 tags de título. Do mais importante ao menos importante, temos h1, h2, h3, h4, h5 e h6.

Normalmente, uma página terá um elemento h1, que é o título da página. Então, você pode ter um ou mais elementos h2 dependendo do conteúdo da página.

Os títulos, especialmente a organização dos títulos, também são essenciais para o SEO. Os mecanismos de pesquisa os usam de várias maneiras.

O navegador, por padrão, tornará a tag h1 maior e diminuirá o tamanho dos elementos à medida que o número próximo a h aumentar:

Todos os títulos são elementos em bloco. Eles não podem conter outros elementos, apenas texto.

Tag strong

Essa tag é usada para marcar o texto dentro dela como forte. Isso é muito importante. Não é uma dica visual, mas uma dica semântica. Dependendo do meio utilizado, sua interpretação vai variar.

Os navegadores, por padrão, deixam o texto dessa tag em negrito.

Tag em

Essa tag é usada para marcar o texto dentro dela como enfatizado. Do mesmo modo que em strong, não é uma dica visual, mas uma dica semântica.

Os navegadores, por padrão, deixam o texto em itálico.

Citações

A tag HTML blockquote é útil para inserir citações no texto.

Os navegadores, por padrão, aplicam uma margem ao elemento blockquote. O Chrome aplica uma margem à esquerda e à direita de 40 px e uma margem superior e inferior de 10 px.

A tag HTML q é usada para aspas em linha.

Linha horizontal

Essa tag não é realmente baseada em texto. A tag hr é frequentemente usada dentro de uma página. "hr", aqui, significa horizontal rule e adiciona uma linha horizontal na página.

É útil para separar seções na página.

Bloco de código

A tag code é especialmente útil para mostrar código, pois os navegadores fornecem uma fonte monoespaçada.

Essa é normalmente a única coisa que os navegadores fazem. Este é o CSS aplicado pelo Chrome:

code {
    font-family: monospace;
}

Essa tag é normalmente envolvida em uma tag pre porque o elemento code ignora espaços em branco e quebras de linha, assim como a tag p.

O Chrome dá a pre este estilo padrão:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1em 0px;
}

Este estilo evita a remoção do espaço em branco e o torna um elemento em bloco.

Listas

Temos 3 tipos de listas:

• listas não ordenadas
• listas ordenadas
• listas de definição

As listas não ordenadas são criadas usando a tag ul. Cada item da lista é criado com a tag li:

<ul>
    <li>Primeiro</li>
    <li>Segundo</li>
</ul>

As listas ordenadas são semelhantes, mas são criadas com a tag ol:

<ol>
    <li>Primeiro</li>
    <li>Segundo</li>
</ol>

A diferença entre os dois é que as listas ordenadas têm um número antes de cada item:

As listas de definição são um pouco diferentes. Você tem um termo e sua definição:

<dl>
    <dt>Flavio</dt>
    <dd>O nome</dd>
    <dt>Copes</dt>
    <dd>O sobrenome</dd>
</dl>

É assim que os navegadores normalmente os renderizam:

Devo dizer que você raramente verá listas de definição por aí. Com certeza, não tanto quanto ul e ol. Às vezes, contudo, elas podem ser úteis.

Outras tags de texto

Aqui está uma série de tags com fins de apresentação:

• tag mark
• tag ins
• tag del
• tag  sup
• tag sub
• tag small
• tag i
• tag b

Este é um exemplo da renderização visual deles que é aplicado por padrão pelos navegadores:

Você pode se perguntar, como b é diferente de strong? Como i é diferente de em?

A diferença está no significado semântico. Enquanto b e i são uma dica direta ao navegador para deixar um trecho de texto em negrito ou em itálico, strong e em dão ao texto um significado especial, cabendo ao navegador dar o estilo. Esses estilos são exatamente os mesmos que os de b e i, por padrão. Você pode, no entanto, alterar isso usando o CSS.

Existem várias outras tags menos usadas relacionadas ao texto. Mencionei aqui apenas as que vejo sendo mais usadas.

LINKS

Os links são definidos usando a tag a. O destino do link é definido por meio de seu atributo href.

Exemplo:

<a href="https://flaviocopes.com">Clique aqui</a>

Entre a tag de abertura e a tag de fechamento temos o texto do link.

O exemplo acima é um URL absoluto. Os links também funcionam com URLs relativos:

<a href="/test">Clique aqui</a>

Nesse caso, ao clicar no link, o usuário é movido para o URL /test na origem atual.

Tenha cuidado com o caractere /. Se omitido, em vez de começar da origem, o navegador apenas adicionará a string test ao URL atual.

Exemplo, estou na página https://flaviocopes.com/axios/ e tenho esses links:

• /test quando clicado me leva para https://flaviocopes.com/test
• test quando clicado me leva para https://flaviocopes.com/axios/test

As tags de link podem incluir outras coisas dentro delas, não apenas texto. Podem incluir, por exemplo, imagens:

<a href="https://flaviocopes.com">
    <img src="test.jpg">
</a>

Também podem ter quaisquer outros elementos, exceto outras tags <a>.

Caso queira abrir o link em uma nova aba, você pode usar o atributo target:

<a href="https://flaviocopes.com" target="_blank">Abra em uma nova aba</a>

TAGS DE CONTÊINER E ESTRUTURA DA PÁGINA DO HTML

Tags de contêiner

O HTML fornece um conjunto de tags de contêiner. Essas tags podem conter um conjunto não especificado de outras tags.

Temos:

• article
• section
• div

Pode ser confuso entender a diferença entre elas.

Vamos ver quando usar cada uma.

article

A tag article identifica algo que pode ser independente de outras coisas em uma página.

Por exemplo, uma lista de publicações em blog na página inicial.

Ou uma lista de links.

<div>
    <article>
        <h2>Uma publicação em blog</h2>
        <a ...>Leia mais</a>
    </article>
    <article>
        <h2>Outra publicação em blog</h2>
        <a ...>Leia mais</a>
    </article>
</div>

Não estamos limitados a listas: um artigo (em inglês, article) pode ser o elemento principal de uma página.

<article>
    <h2>Uma publicação em blog</h2>
    <p>Este é o conteúdo...</p>
</article>

Dentro de uma tag article devemos ter um título (h1-h6) e

section

Representa uma seção de um documento. Cada seção tem uma tag de título (h1-h6) e, em seguida, o corpo da seção.

Exemplo:

<section>
    <h2>Uma seção de página</h2>
    <p>...</p>
    <img ...>
</section>

É útil dividir um artigo longo em diferentes sections.

Não deve ser usado como um elemento de contêiner genérico. div é feito para isso.

div

div é um elemento de contêiner genérico:

<div>
    ...
</div>

Geralmente, adicionamos um atributo class ou id a esse elemento, para permitir que ele seja estilizado usando CSS.

Usamos div em qualquer lugar onde precisamos de um contêiner, mas as tags existentes não são adequadas.

Tags relacionadas à página

nav

Essa tag é usada para criar a marcação que define a navegação da página. Para isso, normalmente, adicionamos uma lista ul ou ol:

<nav>
    <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
    </ol>
</nav>

aside

A tag aside é usada para adicionar um conteúdo relacionado ao conteúdo principal, por exemplo, uma caixa onde adicionamos uma citação ou uma barra lateral.

Exemplo:

<div>
  <p>Um texto...</p>
  <aside>
    <p>Uma citação...</p>
  </aside>
  <p>Outro texto...</p>
</div>

Usar aside é um sinal de que as coisas que ele contém não fazem parte do fluxo regular da seção em que está.

header

A tag header representa uma parte da página que é a introdução. Ela pode, por exemplo, conter uma ou mais tags de título (h1-h6), a linha orientadora do artigo, uma imagem, entre outros.

<article>
  <header>
      <h1>Título do artigo</h1>
  </header>
  ...
</div>

main

A tag main representa a parte principal de uma página:

<body>
  ....
  <main>
    <p>....</p>
  </main>
</body>

footer

A tag footer é usada para determinar o rodapé de um artigo ou o rodapé da página:

<article>
 ....
  <footer>
    <p>Notas de rodapé...</p>
  </footer>
</div>

FORMULÁRIOS

Os formulários são a maneira pela qual você pode interagir com uma página ou com uma aplicação criada com tecnologias da web.

Você tem um conjunto de controles e, ao enviar o formulário, seja com um clique em um botão de "enviar" ou de maneira programada, o navegador enviará os dados para o servidor.

Por padrão, esse envio de dados faz com que a página seja recarregada logo após a ação de envio, mas, usando JavaScript, você pode alterar esse comportamento (não explicaremos isso aqui).

Um formulário é criado usando a tag form:

<form>
    ...
</form>

Por padrão, os formulários são enviados usando o método de HTTP GET. Isso tem suas desvantagens e, em geral, você vai querer usar o método POST.

Você pode definir o formulário para usar POST quando enviado usando o atributo method:

<form method="POST">
    ...
</form>

O formulário é enviado, usando GET ou POST, para o mesmo URL em que reside.

Portanto, se o formulário estiver na página https://flaviocopes.com/contacts, pressionar o botão de "enviar" fará uma solicitação para esse mesmo URL.

Isso pode resultar em não acontecer nada.

Você precisa de algo do lado do servidor para lidar com a solicitação e, normalmente, "ouve" esses eventos de envio de formulário em um URL dedicado.

Você pode especificar o URL por meio do parâmetro action:

<form action="/novo-contato" method="POST">
    ...
</form>

Isso fará com que o navegador envie os dados do formulário usando POST para o URL /novo-contato na mesma origem.

Se a origem (protocolo + domínio + porta) for https://flaviocopes.com (porta 80 é o padrão), isso significa que os dados do formulário serão enviados para https://flaviocopes.com/novo-contato.

Eu falei sobre dados. Quais dados?

Os dados são fornecidos pelos usuários através do conjunto de controles que estão disponíveis na plataforma da web:

• caixas de entrada (em inglês, input – texto de linha única)
• áreas de texto (em inglês, textarea – texto de várias linhas)
• menus de seleção (em inglês, select – escolha uma opção em um menu suspenso)
• botões de opção (em inglês, radio buttons – escolha uma opção de uma lista sempre visível)
• caixas de seleção (em inglês, checkboxes – escolha zero, uma ou mais opções)
• uploads de arquivos
• e mais!

Vamos apresentar cada um deles na visão geral dos campos de formulário a seguir.

Tag input

O campo input é um dos elementos de formulário mais usados. Também é um elemento muito versátil e pode mudar completamente o comportamento com base no atributo type.

O comportamento padrão é ser um controle de entrada de texto de linha única:

<input>

Isso é equivalente a usar:

<input type="text">

Assim como todos os outros campos a seguir, você precisa dar um name (nome) ao campo para que seu conteúdo seja enviado ao servidor quando o formulário for enviado:

<input type="text" name="usuario">

O atributo placeholder é usado para que algum texto apareça, em cinza claro, quando o campo estiver vazio. Útil para adicionar uma dica ao usuário sobre o que digitar:

<input type="text" name="usuario" placeholder="Seu nome de usuário">

Email

O uso de type="email" validará um e-mail do lado do client (no navegador) quanto à correção (correção semântica, não garantindo que o endereço de e-mail exista) antes de enviar.

<input type="email" name="e-mail" placeholder="Seu endereço de e-mail">

Password

O uso de type="password" fará com que cada caractere inserido apareça como um asterisco (*) ou ponto, útil para campos que hospedam uma senha.

<input type="password" name="senha" placeholder="Sua senha">

Numbers

Você pode fazer com que um elemento de entrada aceite apenas números:

<input type="number" name="idade" placeholder="Sua idade">

Você pode especificar um valor mínimo e máximo aceito:

<input type="number" name="idade" placeholder="Sua idade" min="18" max="110">

O atributo step ajuda a identificar as etapas entre os diferentes valores. Por exemplo, ele aceita um valor entre 10 e 50, em etapas de 5:

<input type="number" name="um-numero"  min="10" max="50" step="5">

Campo oculto

Os campos podem ser ocultados do usuário. Eles ainda serão enviados ao servidor após o envio do formulário:

<input type="hidden" name="algum-campo-oculto" value="algum-valor">

Isso é comumente usado para armazenar valores como um token CSRF, usado para segurança e identificação de usuários, ou até mesmo para detectar robôs que enviam spam, usando técnicas especiais.

Também pode ser usado apenas para identificar um formulário e sua ação.

Definindo um valor padrão

Todos esses campos aceitam um valor predefinido. Caso o usuário não o altere, este será o valor enviado ao servidor:

<input type="number" name="idade" value="18">

Se você definir um placeholder, esse valor aparecerá se o usuário limpar o valor do campo de entrada:

<input type="number" name="idade" placeholder="Sua idade" value="18">

Enviando formulários

O campo type="submit" é um botão que, uma vez pressionado pelo usuário, envia o formulário:

<input type="submit">

O atributo value define o texto no botão, que, em sua ausência, mostra o texto "Submit" (em português, enviar):

<input type="submit" value="Clique aqui">

Validação de formulários

Os navegadores fornecem a funcionalidade de validação do lado do client para formulários.

Você pode definir os campos conforme necessário, garantindo que eles sejam preenchidos, e impor um formato específico para a entrada de cada campo.

Vejamos as duas opções.

Definir campo como obrigatório

O atributo required ajuda na validação. Se o campo não estiver definido, a validação do lado do client falha e o navegador não envia o formulário:

<input type="text" name="usuario" required>

Aplicar um formato específico

Descrevi o campo type="email" acima. Ele valida automaticamente o endereço de e-mail de acordo com um formato definido na especificação.

No campo type="number", mencionei o atributo min e max para limitar os valores inseridos em um intervalo.

Podemos fazer mais.

Podemos impor um formato específico em qualquer campo.

O atributo pattern permite definir uma expressão regular para validar o valor.

Recomendo a leitura do meu Guia de Expressões Regulares em flaviocopes.com/javascript-regular-expressions/ (texto em inglês).

Exemplo de padrão: pattern="https://.*"

<input type="text" name="usuario" pattern="[a-zA-Z]{8}">

Outros campos

Upload de arquivos

Você pode carregar arquivos do seu computador local e enviá-los para o servidor usando um elemento de entrada type="file":

<input type="file" name="documentos-secretos">

É possível anexar vários arquivos:

<input type="file" name="documentos-secretos" multiple>

Você pode especificar um ou mais tipos de arquivo permitidos usando o atributo accept. Este aceita imagens:

<input type="file" name="documentos-secretos" accept="image/*">

Você pode usar um tipo MIME específico, como application/json, ou definir uma extensão de arquivo, como .pdf. Também é possível definir várias extensões de arquivo, assim:

<input type="file" name="documentos-secretos" accept=".jpg, .jpeg, .png">

Botões

Os campos de entrada type="button" podem ser usados ​​para adicionar botões adicionais ao formulário, que não são botões de envio:

<input type="button" value="Clique aqui">

Eles são usados ​​para fazer algo de maneira programada, usando JavaScript.

Existe um campo especial renderizado como um botão, cuja ação especial é limpar todo o formulário e trazer os campos de volta ao estado inicial:

<input type="reset">

Botões de opção

Os botões de opção são usados ​​para criar um conjunto de opções. Quando uma das opções é selecionada, todas as outras são desabilitadas.

O nome em inglês, radio buttons, vem de rádios de carros antigos que tinham esse tipo de interface.

Você define um conjunto de entradas type="radio", todas com o mesmo atributo name e diferentes atributos value:

<input type="radio" name="cor" value="amarelo">
<input type="radio" name="cor" value="vermelho">
<input type="radio" name="cor" value="azul">

Depois que o formulário for enviado, a propriedade de dados cor terá um único valor.

Há sempre um elemento selecionado. O primeiro item é o marcado por padrão.

Você pode definir o valor pré-selecionado usando o atributo checked. Você pode usá-lo apenas uma vez por grupo de botões de opção.

Caixas de seleção

Essa entrada é semelhante aos botões de opção, mas permitem que vários valores sejam escolhidos, ou nenhum.

Você define um conjunto de entradas type="checkbox", todas com o mesmo atributo name e diferentes atributos value:

<input type="checkbox" name="cor" value="amarelo">
<input type="checkbox" name="cor" value="vermelho">
<input type="checkbox" name="cor" value="azul">

Todas essas caixas de seleção estarão desmarcadas por padrão. Use o atributo checked para habilitá-las no carregamento da página.

Como esse campo de entrada permite vários valores, no envio do formulário, os valores serão enviados ao servidor como um array.

Data e hora

Temos alguns tipos de entrada para aceitar valores de data.

O campo de entrada type="date" permite que o usuário insira uma data e mostra um seletor de data, se necessário:

<input type="date" name="aniversario">

O campo de entrada type="time" permite que o usuário insira um horário e mostra um seletor de horário, se necessário:

<input type="time" name="hora-de-buscar">

O campo de entrada type="month" permite que o usuário insira um mês e um ano:

<input type="month" name="selecionar-mes-do-lancamento">

O campo de entrada type="week" permite que o usuário insira uma semana e um ano:

<input type="week" name="selecionar-semana">

Todos esses campos permitem limitar o intervalo entre cada valor. Eu recomendo conferir a MDN para os pequenos detalhes sobre seu uso.

O campo type="datetime-local" permite que você escolha uma data e uma hora.

<input type="datetime-local" name="data-e-hora">

Aqui está uma página para testá-los: https://codepen.io/flaviocopes/pen/ZdWQPm

Seletor de cores

Você pode permitir que os usuários escolham uma cor usando o elemento type="color":

<input type="color" name="cor-do-carro">

Você define um valor padrão usando o atributo value:

<input type="color" name="cor-do-carro" value="#000000">

O navegador se encarregará de mostrar um seletor de cores para o usuário.

Range

Este elemento de entrada mostra um elemento deslizante (em inglês, um slider). As pessoas podem usá-lo para passar de um valor inicial para um valor final:

<input type="range" name="idade" min="0" max="100" value="30">

Você pode fornecer passos, como opção:

<input type="range" name="idade" min="0" max="100" value="30" step="10">

Telefone

O campo de entrada type="tel" é usado para inserir um número de telefone:

<input type="tel" name="numero-de-telefone">

O principal apelo para o uso de tel em vez de text são os celulares, pois o dispositivo pode optar por mostrar um teclado numérico.

Especifique um atributo pattern para validação adicional:

<input type="tel" pattern="[0-9]{3}-[0-9]{8}" name="numero-de-telefone">

URL

O campo type="url" é usado para inserir um URL.

<input type="url" name="site-da-web">

Você pode validá-lo usando o atributo pattern:

<input type="url" name="site-da-web"  pattern="https://.*">

A tag textarea

O elemento textarea permite que os usuários insiram texto de várias linhas. Ao contrário do que acontece com input, essa tag requer uma tag de fechamento:

<textarea></textarea>

Você pode definir as dimensões usando CSS, ou também usando os atributos rows (linhas) e cols (colunas):

<textarea rows="20" cols="10"></textarea>

Assim como as outras tags de formulário, o atributo name determina o nome nos dados enviados ao servidor:

<textarea name="article"></textarea>

A tag select

Essa tag é usada para criar um menu suspenso.

O usuário pode escolher uma das opções disponíveis.

Cada opção é criada usando a tag option. Você deve adicionar um nome à seleção e um valor para cada opção:

<select name="cor">
    <option value="vermelho">Vermelho</option>
    <option value="amarelo">Amarelo</option>
</select>

Você pode definir uma opção desativada:

<select name="cor">
    <option value="vermelho" disabled>Vermelho</option>
    <option value="amarelo">Amarelo</option>
</select>

Você pode definir uma opção vazia:

<select name="cor">
    <option value="">Nenhum</option>
    <option value="vermelho">Vermelho</option>
    <option value="amarelo">Amarelo</option>
</select>

As opções podem ser agrupadas usando a tag optgroup. Cada grupo de opções tem um atributo label:

<select name="cor">
    <optgroup label="Primaria">
        <option value="vermelho">Vermelho</option>
        <option value="amarelo">Amarelo</option>
        <option value="azul">Azul</option>
    </optgroup>
    <optgroup label="Outras">
        <option value="verde">Verde</option>
        <option value="rosa">Rosa</option>
    </optgroup>
</select>

TABELAS

Nos primórdios da web, as tabelas eram uma parte muito importante da construção dos layouts.

Mais tarde, elas foram substituídas pelo CSS e seus recursos de layout. Hoje, temos ferramentas poderosas como CSS Flexbox e CSS Grid para construir layouts. As tabelas agora são usadas apenas para, adivinhe, construir tabelas!

Tag table

Você define uma tabela usando a tag table:

<table>

</table>

Dentro da tabela vamos definir os dados. Raciocinamos em termos de linhas, o que significa que adicionamos linhas em uma tabela (não colunas). Vamos definir colunas dentro de uma linha.

Linhas (rows)

Uma linha é adicionada usando a tag tr. Essa é a única coisa que podemos adicionar em um elemento table:

<table>
  <tr></tr>
  <tr></tr>
  <tr></tr>
</table>

Essa é uma tabela com 3 linhas.

A primeira linha pode assumir a função de cabeçalho.

Cabeçalho de colunas

O cabeçalho da tabela contém o nome de uma coluna, normalmente em negrito.

Pense em um documento do Excel/Planilhas do Google. O cabeçalho A-B-C-D... que fica acima.

Definimos o cabeçalho usando a tag th:

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr></tr>
  <tr></tr>
</table>

O conteúdo da tabela

O conteúdo da tabela é definido usando tags td, dentro dos outros elementos tr:

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr>
    <td>Linha 1 Coluna 1</td>
    <td>Linha 1 Coluna 2</td>
    <td>Linha 1 Coluna 3</td>
  </tr>
  <tr>
    <td>Linha 2 Coluna 1</td>
    <td>Linha 2 Coluna 2</td>
    <td>Linha 2 Coluna 3</td>
  </tr>
</table>

É assim que os navegadores renderizam tabelas se você não adicionar nenhum estilo CSS:

Adicionamos, então, este CSS:

th, td {
  padding: 10px;
  border: 1px solid #333;
}

Isso faz com que a tabela pareça mais com uma tabela propriamente dita:

Expandir colunas e linhas

Uma linha pode abranger 2 ou mais colunas, usando o atributo colspan:

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr>
    <td colspan="2">Linha 1 Colunas 1 e 2</td>
    <td>Linha 1 Coluna 3</td>
  </tr>
  <tr>
    <td colspan="3">Linha 2 Colunas 1 a 3</td>
  </tr>
</table>

Também é possível abranger 2 ou mais linhas, usando o atributo rowspan:

<table>
  <tr>
    <th>Coluna 1</th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">Linhas 1 e 2 Colunas 1 e 2</td>
    <td>Linha 1 Coluna 3</td>
  </tr>
  <tr>
    <td>Linha 2 Coluna 3</td>
  </tr>
</table>

Cabeçalho das linhas

Anteriormente, eu expliquei como você pode criar os cabeçalhos para as colunas, usando a tag th dentro da primeira tag tr da tabela.

Você pode adicionar uma tag th como o primeiro elemento dentro de um tr que não é o primeiro tr da tabela, e assim criar cabeçalhos de linha:

<table>
  <tr>
    <th></th>
    <th>Coluna 2</th>
    <th>Coluna 3</th>
  </tr>
  <tr>
    <th>Linha 1</th>
    <td>Coluna 2</td>
    <td>Coluna 3</td>
  </tr>
  <tr>
    <th>Linha 2</th>
    <td>Coluna 2</td>
    <td>Coluna 3</td>
  </tr>
</table>

Mais tags para organizar a tabela

Você pode adicionar mais três tags em uma tabela, para deixá-la mais organizada.

Isso funciona melhor em tabelas grandes e para definir corretamente cabeçalho e rodapé.

Essas tags são:

• thead
• tbody
• tfoot

Elas envolvem as tags tr para definir claramente as diferentes seções da tabela. Aqui está um exemplo:

<table>
  <thead>
    <tr>
      <th></th>
      <th>Coluna 2</th>
      <th>Coluna 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Linha 1</th>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
    </tr>
    <tr>
      <th>Linha 2</th>
      <td>Coluna 2</td>
      <td>Coluna 3</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td>Rodapé da coluna 1</td>
      <td>Rodapé da coluna 2</td>
    </tr>
  </tfoot>
</table>

Legenda de tabelas

As tabelas devem ter uma tag de legenda, caption, que descreva seu conteúdo. Essa tag deve ser colocada imediatamente após a tag de abertura da tabela:

<table>
  <caption>Idade dos cães</caption>
  <tr>
    <th>Cão</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

TAGS DE MULTIMÍDIA: AUDIO E VIDEO

Nesta seção, quero mostrar as tags audio e video.

Tag audio

Essa tag permite que você incorpore conteúdo de áudio em suas páginas de HTML.

Este elemento possibilita transmissão de áudio, tanto através de microfone via getUserMedia(), ou por reprodução de uma fonte de áudio que você referencia usando o atributo src:

<audio src="arquivo.mp3">

Por padrão, o navegador não mostra nenhum controle para esse elemento. O que significa que o áudio será reproduzido apenas se configurado para reprodução automática (mais sobre isso posteriormente) e o usuário não pode ver como pará-lo, controlar o volume ou mover-se pela faixa.

Para mostrar os controles internos, você pode adicionar o atributo controls:

<audio src="arquivo.mp3" controls>

Os controles podem ter uma capa personalizada.

Você pode especificar o tipo MIME do arquivo de áudio usando o atributo type. Se não estiver definido, o navegador tentará determiná-lo automaticamente:

<audio src="arquivo.mp3" controls type="audio/mpeg">

Um arquivo de áudio, por padrão, não é reproduzido automaticamente. Adicione o atributo autoplay para reproduzir o áudio automaticamente:

<audio src="arquivo.mp3" controls autoplay>

Observação: navegadores de dispositivos móveis não permitem reprodução automática.

O atributo loop reinicia a reprodução de áudio para 0:00, se definido; caso contrário, se não estiver presente, o áudio para no final do arquivo:

<audio src="arquivo.mp3" controls autoplay loop>

Você também pode reproduzir um arquivo de áudio silenciado usando o atributo muted (não tenho certeza de qual é a utilidade disso):

<audio src="arquivo.mp3" controls autoplay loop muted>

Usando JavaScript, você pode "ouvir" vários eventos acontecendo em um elemento audio, sendo os mais básicos:

• play quando o arquivo começar a tocar
• pause quando a reprodução de áudio for pausada
• playing quando o áudio for retomado depois de uma pausa
• ended quando o final do arquivo de áudio for atingido

Tag video

Essa tag permite que você incorpore conteúdo de vídeo em suas páginas de HTML.

Este elemento pode transmitir vídeo, usando uma webcam via getUserMedia() ou WebRTC, ou pode reproduzir uma fonte de vídeo que você referencia usando o atributo src:

<video src="arquivo.mp4">

Por padrão, o navegador não mostra nenhum controle para esse elemento, apenas o vídeo.

Isso significa que o vídeo será reproduzido apenas se configurado para reprodução automática (mais sobre isso mais tarde) e o usuário não pode ver como pará-lo, pausá-lo, controlar o volume ou pular para uma posição específica no vídeo.

Para mostrar os controles internos, você pode adicionar o atributo controls:

<video src="arquivo.mp4" controls>

Os controles podem ter uma capa personalizada.

Você pode especificar o tipo MIME do arquivo de vídeo usando o atributo type. Se não estiver definido, o navegador tentará determiná-lo automaticamente:

<video src="arquivo.mp4" controls type="video/mp4">

Um arquivo de vídeo por padrão não é reproduzido automaticamente. Adicione o atributo autoplay para reproduzir o vídeo automaticamente:

<video src="file.mp4" controls autoplay>

Alguns navegadores também exigem o atributo muted para reprodução automática. O vídeo é reproduzido automaticamente apenas se silenciado:

<audio src="arquivo.mp3" controls autoplay muted>

O atributo loop reinicia a reprodução do vídeo em 0:00, se definido; caso contrário, se não estiver presente, o vídeo para no final do arquivo:

<video src="arquivo.mp4" controls autoplay loop>

Você pode definir uma imagem para ser a imagem de capa:

<video src="arquivo.mp4" poster="imagem.png">

Se não estiver presente, o navegador exibirá o primeiro quadro do vídeo assim que estiver disponível.

Você pode definir os atributos width e height para definir o espaço que o elemento ocupará para que o navegador possa considerá-lo e não alterar o layout quando finalmente for carregado. Recebe um valor numérico, expresso em pixels.

Usando JavaScript, você pode "ouvir" vários eventos acontecendo em um elemento video, sendo os mais básicos:

• play quando o arquivo começar a tocar
• pause quando o vídeo for pausado
• playing quando o vídeo for retomado depois de uma pausa
• ended quando o final do arquivo de vídeo for atingido

IFRAMES

A tag iframe nos permite incorporar conteúdo de outras origens (outros sites) em nossa página da web.

Tecnicamente, um iframe cria um contexto de navegação aninhado. Isso significa que qualquer coisa no iframe não interfere na página mãe e vice-versa. O JavaScript e o CSS não "vazam" de/para iframes.

Muitos sites usam iframes para realizar várias coisas. Você pode estar familiarizado com o Codepen, o Glitch ou outros sites que permitem programar em uma parte da página e ver o resultado em uma caixa. Isso é um iframe.

Você cria um desta forma:

<iframe src="pagina.html"></iframe>

Você também pode carregar um URL absoluto:

<iframe src="https://site.com/pagina.html"></iframe>

Você pode definir um conjunto de parâmetros de largura e altura (ou defini-los usando CSS). Caso contrário, o iframe usará os padrões, uma caixa de 300x150 pixels:

<iframe src="pagina.html" width="800" height="400"></iframe>

Srcdoc

O atributo srcdoc permite especificar algum HTML embutido para mostrar. É uma alternativa ao src, mas recente e não suportada no Internet Explorer nem no Edge, versão 18 e anteriores:

<iframe srcdoc="<p>Eu tenho um cão bonzinho</p>"></iframe>

Sandbox

O atributo sandbox permite limitar as operações permitidas nos iframes.

Se a omitirmos, tudo é permitido:

<iframe src="pagina.html"></iframe>

Se definirmos como "", nada é permitido:

<iframe src="page.html" sandbox=""></iframe>

Podemos selecionar o que permitir adicionando opções no atributo sandbox. Você pode permitir várias ações adicionando um espaço entre elas. Aqui está uma lista incompleta das opções que você pode usar:

• allow-forms: permitir o envio de formulários
• allow-modals: permitir a abertura de janelas modais, incluindo chamar alert() em JavaScript
• allow-orientation-lock: permitir bloquear a orientação da tela
• allow-popups: permitir pop-ups, usando os links window.open() e target="_blank"
• allow-same-origin: tratar o recurso que está sendo carregado como sendo da mesma origem
• allow-scripts: permitir que o iframe carregado execute scripts (mas não crie pop-ups).
• allow-top-navigation: dar acesso para o iframe ao contexto de navegação de nível superior.

Allow

Atualmente experimental e suportado apenas por navegadores baseados em Chromium, este é o futuro do compartilhamento de recursos entre a janela pai e o iframe.

É semelhante ao atributo sandbox, mas nos auxilia a permitir recursos específicos, incluindo:

• accelerometer: dá acesso à interface Sensors API Accelerometer
• ambient-light-sensor: dá acesso à interface Sensors API AmbientLightSensor
• autoplay: permite reproduzir automaticamente arquivos de vídeo e áudio
• camera: permite acessar a câmera da API getUserMedia
• display-capture: permite acessar o conteúdo da tela usando a API getDisplayMedia
• fullscreen: permite acessar o modo de tela cheia
• geolocation: permite acessar a API de geolocalização
• gyroscope: dá acesso à interface Sensors API Gyroscope
• magnetometer: dá acesso à interface Sensors API Magnetometer
• microphone: dá acesso ao microfone do dispositivo usando a API getUserMedia
• midi: permite acesso à API Web MIDI
• payment: dá acesso à API de solicitação de pagamento
• speaker: permite o acesso à reprodução de áudio através dos alto-falantes do dispositivo
• usb: dá acesso à API WebUSB.
• vibrate: dá acesso à API de vibração
• vr: dá acesso à API WebVR

Referrer

Ao carregar um iframe, o navegador envia informações importantes sobre quem o está carregando no cabeçalho Referer (atenção para o r único, um erro de digitação na língua inglesa com o qual devemos conviver).

O erro de ortografia do "referrer" originou-se na proposta original do cientista da computação Phillip Hallam-Baker para incorporar o campo na especificação do HTTP. O erro de ortografia foi definido no momento de sua incorporação no documento de padrões de solicitação de comentários RFC 1945.

O atributo referrerpolicy nos permite definir o referenciador para enviar ao iframe ao carregá-lo. O referenciador (em inglês, referrer) é um cabeçalho do HTTP que permite que a página saiba quem a está carregando. Estes são os valores permitidos:

• no-referrer-when-downgrade: é o padrão e não envia o referenciador quando a página atual é carregada por HTTPS e o iframe é carregado no protocolo HTTP
• no-referrer: não envia o cabeçalho do referenciador
• origin: o referenciador é enviado e contém apenas a origem (porta, protocolo, domínio), não a origem + caminho – que é o padrão
• origin-when-cross-origin: ao carregar da mesma origem (porta, protocolo, domínio) no iframe, o referenciador é enviado em sua forma completa (origem + caminho). Caso contrário, apenas a origem é enviada
• same-origin: o referenciador é enviado apenas ao carregar da mesma origem (porta, protocolo, domínio) no iframe
• strict-origin: envia a origem como o referenciador se a página atual for carregada por HTTPS e o iframe também carregar no protocolo HTTPS. Não envia nada se o iframe for carregado por HTTP
• strict-origin-when-cross-origin: envia a origem + caminho como referenciador ao trabalhar na mesma origem. Envia a origem como o referenciador se a página atual for carregada por HTTPS e o iframe também carregar no protocolo HTTPS. Não envia nada se o iframe for carregado por HTTP
• unsafe-url: envia a origem + caminho como referenciador mesmo ao carregar recursos de HTTP e a página atual é carregada por HTTPS

IMAGENS

As imagens podem ser exibidas usando a tag img.

Essa tag aceita um atributo src, que usamos para definir a fonte da imagem:

<img src="imagem.png">

Podemos usar um amplo conjunto de imagens. Os tipos mais comuns são PNG, JPEG, GIF, SVG e, mais recentemente, WebP.

O padrão HTML requer que um atributo alt esteja presente para descrever a imagem. Ele é usado por leitores de tela e por bots de mecanismos de pesquisa:

<img src="cao.png" alt="Uma imagem de um cão">

Você pode configurar os atributos de largura, width, e altura, height, para definir o espaço que o elemento ocupará, de modo que o navegador possa considerá-lo sem alterar o layout quando a imagem estiver totalmente carregada. Eles recebem um valor numérico, expresso em pixels.

<img src="cao.png" alt="Uma imagem de um cão" width="300" height="200">

Tag figure

A tag figure é frequentemente usada juntamente com a tag img.

figure é uma tag semântica, frequentemente usada quando você deseja exibir uma imagem com uma legenda. Você a usa assim:

<figure>
    <img src="cao.png"
         alt="Um cãozinho dócil">
    <figcaption>Um cãozinho dócil</figcaption>
</figure>

A tag figcaption envolve o texto da legenda.

Imagens responsivas usando srcset

O atributo srcset permite definir imagens responsivas que o navegador pode usar dependendo da densidade de pixels ou da largura da janela, de acordo com suas preferências. Desse modo, o navegador pode baixar apenas os recursos necessários para renderizar a página, sem baixar uma imagem maior se estiver em um dispositivo móvel, por exemplo.

Aqui está um exemplo. Nele, fornecemos 4 imagens adicionais para 4 tamanhos de tela diferentes:

<img src="cao.png"
    alt="Uma imagem de um cão"
    srcset="cao-500.png 500w,
               cao-800.png 800w,
             cao-1000.png 1000w,
             cao-1400.png 1400w">

No srcset usamos a medida w para indicar a largura da janela.

Como fazemos isso, também precisamos usar o atributo de tamanhos, sizes:

<img src="cao.png"
    alt="Uma imagem de um cão"
    sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
    srcset="cao-500.png 500w,
               cao-800.png 800w,
             cao-1000.png 1000w,
             cao-1400.png 1400w">

Neste exemplo, a string (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px no atributo sizes descreve o tamanho da imagem em relação à janela de visualização, com várias condições separadas por ponto e vírgula.

A condição de mídia max-width: 500px define o tamanho da imagem em correlação com a largura da janela de visualização. Resumindo, se o tamanho da janela for menor do que 500px, a imagem é renderizada em 100% do tamanho da janela.

Se o tamanho da janela for maior que 500px, mas menor que 900px, a imagem é renderizada em 50% do tamanho da janela.

Se for ainda maior, a imagem é renderizada em 800px.

A unidade de medida vw pode ser nova para você. Resumindo, podemos dizer que 1 vw é 1% da largura da janela, então 100vw é 100% da largura da janela.

Um site útil para gerar o srcset e imagens progressivamente menores é https://responsivebreakpoints.com/.

Tag picture

O HTML também nos dá a tag picture, que faz um trabalho muito semelhante ao srcset. As diferenças são muito sutis.

Você usa picture quando, em vez de apenas servir uma versão menor de um arquivo, deseja alterá-lo completamente ou veicular um formato de imagem diferente.

O melhor uso que encontrei foi com uma imagem WebP, que é um formato ainda não amplamente suportado. Na tag picture, você especifica uma lista de imagens e elas serão usadas em ordem. Portanto, no próximo exemplo, os navegadores que suportam WebP usarão a primeira imagem ou retornarão para JPG, do contrário:

<picture>
  <source type="image/webp" srcset="imagem.webp">
  <img src="imagem.jpg" alt="Uma imagem">
</picture>

A tag source define um (ou mais) formatos para as imagens. A tag img é o substituto caso o navegador seja muito antigo e não dê suporte à tag picture.

Na tag source dentro da imagem, você pode adicionar um atributo media para definir consultas de mídia.

O exemplo a seguir funciona como o exemplo acima com srcset:

<picture>
  <source media="(min-width: 500w)" srcset="cao-500.png" sizes="100vw">
  <source media="(min-width: 800w)" srcset="cao-800.png" sizes="100vw">
  <source media="(min-width: 1000w)" srcset="cao-1000.png"    sizes="800px">
  <source media="(min-width: 1400w)" srcset="cao-1400.png"    sizes="800px">
  <img src="cao.png" alt="Uma imagem de um cão">
</picture>

Esse, porém, não é o seu caso de uso, porque, como você pode ver, é muito mais detalhado.

A tag picture é recente, mas agora é suportada por todos os principais navegadores, exceto Opera Mini e IE (todas as versões).

ACESSIBILIDADE

É importante que projetemos nosso HTML com acessibilidade em mente.

Fazer um HTML acessível significa que pessoas com deficiência podem usar a web. Existem usuários totalmente cegos ou com deficiência visual, pessoas com problemas de perda auditiva e uma infinidade de outras deficiências diferentes.

Infelizmente, este tópico não tem a atenção de que precisa, talvez por não ser considerado tão "legal" quanto outros tópicos.

O que acontece se uma pessoa não puder ver sua página, mas ainda quiser consumir seu conteúdo? Primeiro, como eles fazem isso? Eles não podem usar o mouse. Eles usam algo chamado leitor de tela. Você não precisa imaginar isso. Você pode experimentar um agora: o Google fornece a extensão ChromeVox Chrome gratuita. A acessibilidade também deve cuidar de permitir que as ferramentas selecionem facilmente os elementos ou naveguem pelas páginas.

Páginas da web e aplicações da web nem sempre são construídas com acessibilidade como um de seus primeiros objetivos. Talvez a versão 1 seja lançada sem acessibilidade, mas é possível tornar uma página da web acessível depois de feita. É melhor fazer isso antes, mas nunca é tarde demais.

Esse é um assunto importante e, no meu país, os sites criados pelo governo ou por outras organizações públicas devem ter acessibilidade.

O que significa tornar um HTML acessível? Deixe-me ilustrar as principais coisas que você precisa pensar.

Observação: existem várias outras coisas nas quais devemos prestar atenção e que podem estar no tópico do CSS, como cores, contraste e fontes. Também é importante saber como tornar as imagens SVG acessíveis (texto em inglês). Eu, no entanto, não falo sobre esses assuntos aqui.

Use semântica em seu HTML

O HTML semântico é muito importante e é uma das principais coisas das quais você precisa cuidar. Deixe-me ilustrar alguns cenários comuns.

É importante usar a estrutura correta para as tags de títulos. O mais importante é o h1. Você usa números mais altos para os menos importantes, mas todos os títulos de mesmo nível devem ter o mesmo significado (pense nisso como uma estrutura de árvore)

h1
    h2
        h3
    h2
    h2
        h3
            h4

Use strong e em em vez de b e i. Visualmente, eles parecem iguais, mas os 2 primeiros têm mais significado associado a eles. b e i são elementos mais visuais.

Listas são importantes. Um leitor de tela pode detectar uma lista e fornecer uma visão geral, permitindo que o usuário escolha entrar na lista ou não.

Tabelas devem ter uma tag de legenda, caption, que descreva seu conteúdo:

<table>
  <caption>Idade dos cães</caption>
  <tr>
    <th>Cão</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Roger</td>
    <td>7</td>
  </tr>
</table>

Use atributos alt para imagens

Todas as imagens devem ter uma tag alt descrevendo o conteúdo da imagem. Não é apenas uma boa prática. É exigido pelo padrão HTML e seu HTML sem ele não é validado.

<img src="cao.png" alt="Imagem do meu cão">

Também é bom para os mecanismos de pesquisa, se isso for um incentivo para você adicioná-lo.

Use o atributo role

O atributo role permite atribuir funções específicas a vários elementos em sua página.

Você pode atribuir muitas funções diferentes: complementar complementary, lista list, item de lista listitem, principal main, navegação navigation, região region, aba tab, alerta alert, aplicação application, artigo article, banner, botão button, célula cell, checkbox, informação do conteúdo contentinfo, diálogo dialog, documento document, feed, imagem/figura figure, formulário form, grade grid, célula de grade gridcell, cabeçalho heading, imagem img, caixa de lista listbox, linha row, grupo de linhas rowgroup, busca search, troca switch, tabela table, painel de abas tabpanel, caixa de texto textbox e temporizador timer.

São muitas coisas. Para a referência completa de cada um deles, use este link da MDN. Você, no entanto, não precisa atribuir uma função a cada elemento na página. Leitores de tela podem inferir da tag HTML na maioria dos casos. Por exemplo, você não precisa adicionar uma tag de função em tags semânticas, como nav, button ou form.

Vamos pegar o exemplo da tag nav. Você pode usá-la para definir a navegação da página assim:

<nav>
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</nav>

Se você fosse forçado a usar uma tag div em vez de nav, você usaria a função de navigation:

<div role="navigation">
  <ul>
    <li><a href="/">Início</a></li>
    <li><a href="/blog">Blog</a></li>
  </ul>
</div>

Então, aqui, você tem um exemplo prático: role é usado para atribuir um valor significativo quando a tag ainda não transmite o significado.

Use o atributo tabindex

O atributo tabindex permite alterar a ordem de como pressionar a tecla Tab seleciona os elementos "selecionáveis". Por padrão, apenas links e elementos de formulário são "selecionáveis" por navegação usando a tecla Tab (e você não precisa definir tabindex nesses casos).

Adicionar tabindex="0" torna um elemento selecionável:

<div tabindex="0">
...
</div>

Usar tabindex="-1" remove um elemento dessa navegação baseada em guias e pode ser bastante útil.

Use o atributo aria

ARIA é um acrônimo em inglês para Accessible Rich Internet Applications (Aplicações Avançadas de Internet Acessíveis) e define a semântica que pode ser aplicada aos elementos.

aria-label

Este atributo é usado para adicionar uma string para descrever um elemento.

Exemplo:

<p aria-label="A descrição do produto">...</p>

Eu uso esse atributo na barra lateral do meu blog, onde tenho uma caixa de entrada para pesquisa sem um rótulo explícito, pois possui um atributo placeholder.

aria-labelledby

Esse atributo define uma correlação entre o elemento atual e aquele que o rotula.

Se você sabe como um elemento input pode ser associado a um elemento label, é semelhante.

Passamos o id do item que descreve o elemento atual.

Exemplo:

<h3 id="description">A descrição do produto</h3>

<p aria-labelledby="description">
...
</p>

aria-describedby

Esse atributo permite associar um elemento a outro elemento que serve como descrição.

Exemplo:

<button aria-describedby="payNowDescription">Pague agora</button>

<div id="payNowDescription">Clicar no botão enviará você para o formulário do Stripe!</div>

Use aria-hidden para esconder

Eu gosto de um design minimalista em meus sites. Meu blog, por exemplo, é basicamente apenas conteúdo, com alguns links na barra lateral. Algumas coisas na barra lateral, porém, são apenas elementos visuais que não contribuem para a experiência de uma pessoa que não pode ver a página, como a imagem do meu logotipo ou o seletor de tema escuro/claro.

Adicionar o atributo aria-hidden="true" fará com que os leitores de tela ignorem esse elemento.

Quer saber mais?

Esta é apenas uma introdução ao tema. Para saber mais, recomendo estes recursos (em inglês):

• https://www.w3.org/TR/WCAG20/
• https://webaim.org
• https://developers.google.com/web/fundamentals/accessibility/

Você chegou ao final do Manual de HTML. parabéns!

Clique aqui para obter uma versão em inglês em PDF/ePub/Mobi deste livro para ler off-line!

Uma apresentação de slides para a web é uma sequência de imagens ou de texto que consiste em mostrar um elemento da sequência em um determinado intervalo de tempo.

Para este tutorial, você pode criar uma apresentação de slides seguindo estes passos:

Escreva a marcação em HTML

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Slideshow</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <div id="slideshow-example" data-component="slideshow">
        <div role="list">
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
          <div class="slide">
            <img src="" alt="">
          </div>
        </div>
      </div>
    <script src="slideshow.js"></script>
    </body>
  </html>

Escreva os estilos para ocultar slides e mostrar apenas um slide.

Para ocultar os slides, você tem de dar a eles um estilo padrão. Isso orientará a mostrar apenas um slide se ele estiver ativo ou se você quiser mostrá-lo.

  [data-component="slideshow"] .slide {
    display: none;
  }

  [data-component="slideshow"] .slide.active {
    display: block;
  }

Altere os slides em um intervalo de tempo.

O primeiro passo para alterar quais slides aparecem é selecionar o(s) wrapper(s) dos slides e, depois, os slides em si.

Ao selecionar os slides, você tem de passar por cada slide e adicionar ou remover a classe active, dependendo do slide que você quer mostrar. Depois, basta repetir o procesos por um determinado intervalo de tempo.

Lembre-se de que, quando você remove a classe active de um slide, você o estará ocultando, em função dos estilos definidos no passo anterior. Porém, ao adicionar a classe active ao slide, você sobrescreverá o estilo display:none com o estilo display:block, o que fará com que o slide seja exibido aos usuários.

  var slideshows = document.querySelectorAll('[data-component="slideshow"]');
  
  // Aplica a todas as apresentações de slides que você define com o HTML escrito
  slideshows.forEach(initSlideShow);

  function initSlideShow(slideshow) {

    var slides = document.querySelectorAll(`#${slideshow.id} [role="list"] .slide`); // Obter um array de slides

    var index = 0, time = 5000;
    slides[index].classList.add('active');  
    
    setInterval( () => {
      slides[index].classList.remove('active');
      
      //Passar por cada slide, incrementando o índice
      index++;
      
      // Ao passar por todos os slides, reiniciar o índice para exibir o primeiro slide e iniciar novamente
      if (index === slides.length) index = 0; 
      
      slides[index].classList.add('active');

    }, time);
  }

Codepen de exemplo para seguir este tutorial

O Font Awesome é uma das formas mais populares de adicionar ícones ao seu site. No entanto, se você adicionar o CDN ao elemento <head> de sua página, pode ser que você veja apenas retângulos pretos?

Aqui vão algumas dicas para levar em consideração ao adicionar o Font Awesome ao seu próximo projeto.

Adicione o link à head

Imagine que você tenha o seguinte documento em HTML:

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" type="text/css" href="testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>

Do mesmo modo que ocorre com os outros CDNs, você precisa adicionar um elemento <link> à <head>. Para a versão 5.7.2 do Font Awesome, ele terá essa aparência:

<link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">

Nota da tradução: no momento em que a tradução está sendo realizada, o Font Awesome encontra-se na versão 6.2.0, de agosto de 2022.

On-line x local

Ao executar o código a seguir em um editor baseado na web, como o CodePen ou o CodeSandbox, ele renderizará os ícones adequadamente:

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
	<link rel="stylesheet" type="text/css" href="testing.css">
	<link rel="stylesheet" type="text/css" href="css/all.css">
	<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=no">
</head>
<body>
	<i class="fab fa-github-square"><a href="https://github.com/willyblackkeez" id="profile-link"></a></i>
	<i class="fab fa-facebook"></i>
</body>
</html>

Porém, ao tentar abrir a página localmente em um navegador, você verá apenas retângulos de cor preta no lugar dos ícones:

Dê outra olhada no href do elemento <link> no código acima. Percebe o problema?

O problema está no fato de que, ao carregar a página a partir do seu sistema de arquivos local, o navegador está tentando encontrar o arquivo CSS do Font Awesome na raiz do arquivo de sistema.

Para que as coisas funcionem on-line e localmente, certifique-se de adicionar o esquema de URL (HTTP, ou, se possível, HTTPS) ao href:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">

O que ocorre aqui?

Ao deixar de fora o esquema de URL (href="//use.fontawesome..."), o navegador usará o mesmo esquema de URL da página a qual ele carregou.

Assim, se estiver executando a página localmente, ao rodar um arquivo HTML em um navegador, href assumirá que o CSS do Font Awesome também seja um arquivo que está salvo localmente (file:).

Basta se certificar que os atributos href para seus elementos <link> apontem todos para o URL completo, incluindo o esquema de URL, e tudo dará certo.

O atributo <a target> especifica onde abrir o documento vinculado por uma tag a (elemento de âncora).

Exemplos de <a target>

Um atributo target com o valor de _blank abre o documento vinculado em uma nova janela ou aba.

<a href="https://www.freecodecamp.org" target="_blank">freeCodeCamp</a>

Um atributo target com o valor de _self abre o documento vinculado no mesmo frame no qual ele foi clicado (esse é o padrão e, em geral, não precisa ser especificado).

<a href="https://www.freecodecamp.org" target="_self">freeCodeCamp</a>

<a href="https://www.freecodecamp.org">freeCodeCamp</a>

Um atributo target com o valor de _parent abre o documento vinculado no frame do elemento pai.

<a href="https://www.freecodecamp.org" target="_parent">freeCodeCamp</a>

Um atributo target com o valor de _top abre o documento vinculado no corpo completo da janela.

<a href="https://www.freecodecamp.org" target="_top">freeCodeCamp</a>

Um atributo target com o valor de framename abre o documento vinculado em um frame nomeado e especificado.

<a href="https://www.freecodecamp.org" target="framename">freeCodeCamp</a>

Links relacionados (em inglês):

• Sobre o atributo <a href>
• Informações gerais sobre os atributos do HTML

A declaração de tipo de documento no HTML, também conhecida como DOCTYPE, é a primeira linha de código necessária em qualquer documento, HTML ou XHTML. A declaração de DOCTYPE é uma instrução para o navegador da web que diz em qual versão do HTML a página é escrita. Isso garante que a página da web seja analisada e exibida da mesma maneira por navegadores da web diferentes.

Em HTML 4.01, a declaração de DOCTYPE tem a ver com uma definição de tipo de documento (ou por sua sigla, DTD). Uma DTD define a estrutura e os elementos legais de um documento XML. Como o HTML 4.01 tinha como base a Standard Generalised Markup Language (SGML, ou linguagem de marcação generalizada padrão), a referência a uma DTD na declaração de DOCTYPE era necessária.

Além disso, doctype no HTML 4.01 exigia a declaração de uma DTD strict, transitional ou frameset, cada uma delas com um caso de uso diferente, como descrevemos abaixo.

• DTD 'strict': usado por páginas da web que excluíam atributos e elementos que a W3C esperava que saíssem de circulação conforme aumentava o suporte ao CSS
• DTD 'transitional': usado por páginas da web que incluíam  atributos e elementos que a W3C esperava que saíssem de circulação conforme aumentava o suporte ao CSS
• DTD 'frameset': usado por páginas da web com frames

Por outro lado, a declaração de DOCTYPE do HTML 5 é muito mais simples: ela já não precisa de uma referência às DTDs, pois já não se baseia mais em SGML. Veja os exemplos abaixo para ter uma comparação entre as declarações de DOCTYPE do HTML 4.01 e do HTML 5.

Exemplos

Sintaxe de doctype do HTML5 e posteriores:

<!DOCTYPE html>

Sintaxe de doctype do HTML 4.01 'strict':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Sintaxe de doctype do HTML 4.01 'transitional':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Sintaxe de doctype do HTML 4.01 para 'framesets':

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Histórico

Durante os primeiros anos do HTML, os padrões da web não eram aceitos do mesmo modo por todos os fabricantes de navegadores. Eles criavam os recursos do modo que eles mesmos queria, não havendo uma preocupação com os navegadores concorrentes.

O resultado foi a necessidade de os desenvolvedores da web precisarem escolher um navegador para o qual desenvolveriam os seus sites. Desse modo, os sites não renderizariam corretamente em navegadores não suportados. Essa era uma situação que não podia continuar.

O W3C (World Wide Web Consortium) escreveu um conjunto de padrões da web para lidar com essa situação. Todos os fabricantes de navegadores e desenvolvedores para a web deveriam aderir a esses padrões. Isso garantiria que os sites da web renderizariam corretamente em qualquer navegador.

As mudanças requeridas pelos padrões eram bastante diferentes de algumas práticas existentes. Aderir a elas poderia quebrar os sites da web existentes e que não estavam de acordo com os padrões.

Para lidar com esse problema, os fabricantes começaram a criar modos de renderizar por programação em seus navegadores. Os desenvolvedores para a web precisaram adicionar uma declaração de doctype à parte superior de seu documento de HTML. Essa declaração diria ao navegador qual o modo de renderização deveria ser usado para aquele documento.

Três modos de renderização separados estavam normalmente disponíveis em todos os navegadores:

• o modo totalmente nos padrões (ou Full standards mode), que renderizava as páginas de acordo com os padrões da web do W3C.
• o modo 'com peculiaridades' (ou Quirks mode), que renderizava as páginas criadas de modo não conforme aos padrões.
• o modo 'quase' nos padrões (ou Almost standards mode), que era próximo ao modo totalmente nos padrões, mas que ainda dava suporte a algumas das 'peculiaridades'.

No momento atual do HTML 5, os padrões da web estão totalmente implementados em todos os navegadores mais importantes. Os sites da web sites geralmente são desenvolvidos em conformidade com os padrões do W3C. Assim, a declaração de doctype do HTML 5 existe apenas para informar o navegador de que ele deve renderizar o documento no modo totalmente nos padrões.

Uso

A declaração de doctype deve ser a primeira linha de código de um documento em HTML, excetuando possíveis comentários, que podem vir antes, caso necessário. Para documentos de HTML 5 modernos, a declaração de doctype deve ser feita assim:

<!DOCTYPE html>

Para mais informações:

Embora não seja mais de uso geral, existem vários outros tipos de declarações de doctype vindas de versões anteriores do HTML. Também há versões específicas para documentos em XML. Para ler mais sobre isso e para ver exemplos de código para cada uma dessas versões, dê uma olhada nesse artigo da Wikipédia (em inglês – também há uma versão em português, mas com conteúdo bastante reduzido).

Confira também os sites abaixo:

Uma observação da W3 sobre Doctype (em inglês)

W3Schools (em inglês)

Entrada sobre Doctype no glossário da MDN

Uma rápida explicação da MDN sobre o modo de peculiaridades ("quirks") e sobre o modo padrão

Neste artigo, vamos explorar três maneiras diferentes de se fazer um botão em HTML agir como um link.

Estes são os métodos que vamos analisar:

1. Estilizar um link para parecer um botão
2. Usar os atributos action e formaction em um formulário
3. Usar o evento onclick do JavaScript

Primeiro, porém, vamos dar uma olhada na abordagem errada.

Por que esta abordagem com um elemento não funciona?

O trecho de código abaixo leva ao site do freeCodeCamp quando ele é clicado.

  <a href="https://www.freecodecamp.org/">
    <button>freeCodeCamp</button>
  </a> 

No entanto, essa não é uma marcação válida em HTML.

O elemento a pode ser envolvido por parágrafos inteiros, listas, tabelas e assim por diante. É possível usar até mesmo seções inteiras, desde que não haja conteúdo interativo dentro delas (por exemplo, botões ou outros links). - Fonte: Grupo de Trabalho de Tecnologia de Aplicação de Hipertexto Web

Essa é considerada uma má prática, pois torna difícil entender a intenção do usuário.

Os links devem navegar o usuário para outra parte da página da web ou para um site da web externo. Os botões devem realizar uma ação específica como o envio de um formulário.

Quando você aninha um dentro do outro, isso torna confusa a ação que você quer realizar. É por isso que é melhor não aninhar um botão dentro de um elemento de âncora.

Como estilizar um link que se pareça com um botão com CSS

Esta primeira abordagem não utiliza, de fato, um botão. Podemos estilizar uma tag de âncora para que se pareça com um botão usando o CSS.

Este é o estilo padrão do HTML para um elemento de âncora.

Podemos adicionar uma classe ao elemento de âncora e depois usar esse seletor de classe para estilizar o elemento.

  <a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se você quiser que o link abra em uma nova página, pode adicionar o atributo target="_blank", assim:

  <a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Então, podemos adicionar uma cor de fundo e mudar a cor da fonte, desse modo:

.fcc-btn {
  background-color: #199319;
  color: white;
}

O próximo passo é adicionar algum preenchimento (em inglês, padding) ao redor do texto:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

Finalmente, podemos usar a propriedade text-decoration para remover o sublinhado do texto:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

Agora temos um elemento de âncora que se parece com um botão.

Também podemos tornar este "botão" um pouco mais interativo mudando a cor de fundo, dependendo do estado do link.

.fcc-btn:hover {
  background-color: #223094;
}

Poderíamos deixar o design mais intrincado, mas a ideia é apenas mostrar o básico de como estilizar um link para que se pareça um botão.

Você também poderia optar por usar uma biblioteca do CSS, como o Bootstrap.

  <a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>  

Se o seu projeto já inclui o Bootstrap, você pode usar os estilos de botões incorporados. Eu, no entanto, não importaria o Bootstrap apenas para estilizar um link.

Quais são os problemas com esta abordagem?

Há algumas discussões sobre o fato de ser uma boa prática criar links estilizados como botões. Alguns argumentarão que os links devem sempre se parecer com links e que os botões devem sempre se parecer com botões.

No livro da web chamado Resilient Web Design, Jeremy Keith afirma que

Um material não deve ser usado como substituto para outro. Caso contrário, o resultado final será enganoso.

Por que eu me dei ao trabalho de trazer à tona esse debate?

O meu objetivo não é fazer com que você escolha um lado do debate em vez do outro. Só quero que vocês estejam cientes dessa discussão em andamento.

Como usar os atributos action e formaction para fazer um botão de formulário

Como usar o atributo action

Outra alternativa seria aninhar o botão dentro de um formulário e usar o atributo action.

Exemplo de entrada:

  <form action="https://www.freecodecamp.org/">
    <input type="submit" value="freeCodeCamp">
  </form>

Exemplo de botão:

  <form action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Este seria o estilo padrão do botão.

Poderíamos usar os mesmos estilos anteriores, mas teríamos que adicionar o ponteiro do cursor e definir o atributo border como none, assim:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

Como utilizar o atributo formaction

Similar à abordagem anterior, podemos criar um formulário e utilizar o atributo formaction.

Exemplo de entrada:

  <form>
    <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
  </form>

Exemplo de botão:

  <form>
    <button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
  </form>

Você só pode usar o atributo formaction com inputs e buttons que tenham os atributos type="image" ou type="submit".

Isso está semanticamente correto?

Embora essa pareça ser uma solução funcional, há uma questão a respeito de isso ser ou não semanticamente correto.

Estamos usando as tags de formulário, mas isso não funciona como um formulário real. O objetivo de um formulário é coletar e enviar dados do usuário.

Estamos, no entanto, usando o botão de envio para levar o usuário para outra página ou seção.

Quando se trata de semântica, essa não é uma boa prática de uso das tags de formulário.

Efeitos colaterais do uso dos atributos action e formaction

Quando você clica no botão, algo interessante acontece com o URL. O URL agora tem um ponto de interrogação ao final.

O motivo dessa mudança é porque o formulário está usando o método GET. Você poderia mudar para o método POST, mas pode haver casos onde isso também não seja o ideal.

  <form method="POST" action="https://www.freecodecamp.org/">
    <button type="submit">freeCodeCamp</button>
  </form>

Embora essa abordagem produza uma marcação válida em HTML, ela vem com esse efeito colateral não intencional.

Como usar o evento onclick do JavaScript para fazer um botão

Nas abordagens anteriores, analisamos as soluções em HTML e em CSS. Também podemos usar o JavaScript para alcançar o mesmo resultado.

Exemplo de input:

 <form>
    <input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
 </form>

Exemplo de button:

<button onclick="window.location.href='https://www.freecodecamp.org/';">freeCodeCamp</button>  

location.href representa a localização de um URL específico. Nesse caso, o window.location.href retornará https://www.freecodecamp.org/.

Desvantagens dessa abordagem

Embora essa solução funcione, há alguns problemas potenciais a serem considerados.

Se o usuário tiver decidido desativar o JavaScript em seu navegador, claramente, essa solução não funcionará. Infelizmente, isso poderá levar a uma má experiência para o usuário.

Conclusão

O objetivo deste artigo é mostrar três maneiras diferentes de se fazer botões agirem como links.

A primeira abordagem foi estilizar um link para que se parecesse com um botão. Também analisamos no debate se é uma boa ideia mudar a aparência dos links para se parecerem com outro elemento.

A segunda abordagem utilizou formulários e os atributos action e formaction. Também aprendemos, contudo, que essa abordagem tem alguns efeitos colaterais com o URL e não é semanticamente correta.

A terceira abordagem utilizou o evento onclick do JavaScript e window.location.href. Também aprendemos, porém, que essa abordagem pode não funcionar se o usuário decidir desativar o JavaScript em seu navegador.

Como desenvolvedor, é realmente importante observar os prós e os contras de uma abordagem específica antes de incorporá-la em seu projeto.

Espero que tenham gostado deste artigo e aprendido algumas coisas na leitura.

Desejo a você uma ótima programação! 😀