Pare de codificar demais o seu site: em vez disso, use estas 8 tags HTML nativas

Você deve estar familiarizado com as tags HTML mais comuns, como p, ae imgmas e quanto progress ou details? HTML é muito mais expressivo do que você imagina, e as tags a seguir contêm muitas funcionalidades.

Descubra para que você pode usar cada uma dessas joias escondidas e por que elas são tão úteis.

O HTML suporta elementos multimídia – imagens, vídeo, áudio – há muitas décadas, mas os dois últimos exigiam plug-ins de navegador como o Flash da Adobe para funcionar. Felizmente, o HTML5 trouxe recursos nativos audio e video elementos para a web e as implementações têm melhorado desde então.

O elemento de áudio de hoje é um player limpo e minimalista com os controles que você esperaria: um botão reproduzir/pausar, detalhes de tempo e uma barra de progresso interativa. Você pode até estilizar este player, até certo ponto, tornando-o um elemento de largura total, por exemplo.

O widget varia de navegador para navegador. O Chrome, por exemplo, inclui controle de volume e mudo. Mas, em todos os navegadores, essa tag fornece uma maneira trivial de suportar a reprodução de áudio, com recursos programáveis ​​para estender seu comportamento, se desejar.

HTML é uma linguagem de marcação declarativa, preocupada com o significado do conteúdo e não com a forma como ele aparece em um navegador. Aparentemente, existe CSS, mas mesmo essa linguagem é responsiva e pode ser renderizada de maneira muito diferente de um dispositivo para outro.

Entretanto, se você estiver trabalhando em um componente que exige precisão de pixels, o elemento canvas é para você. Usando canvasvocê pode escrever texto na página com uma fonte exata e desenhar gráficos com certeza.

Isso não significa que você deva pegar a tela o tempo todo; não é um bom substituto para o conteúdo real de suas páginas. Mas se você estiver criando um jogo ou uma interface altamente personalizada para uso restrito, canvas pode ser um meio eficaz de o fazer.

Este elemento obscuro pode estender certos tipos de entradas, oferecendo um conjunto de valores sugeridos para escolha. Por exemplo, quando combinado com uma entrada de texto, você obterá o preenchimento automático sem nenhum código, apenas declarando o conjunto de opções válidas:

Você pode então conectar um elemento de entrada a esta lista usando seu id:

Mas não para por aí; datalist funciona com outros tipos de elementos. Combina bem com entradas de cores, onde os navegadores podem oferecer uma paleta de cores preferidas:

O details element é possivelmente o exemplo mais claro de um elemento HTML altamente funcional que muitas pessoas ignoram ou simplesmente não conhecem. Ele pode ser altamente eficaz quando usado sozinho e pode até substituir o código JavaScript para produzir um componente moderno quando combinado com CSS.

details cria um widget de divulgação, uma parte do seu conteúdo que o leitor pode alternar para exibir ou ocultar. Eles são ótimos para testes, informações complementares e podem até aproximar interfaces com guias mais complexas.

Na sua forma mais simples, esta tag é fácil de usar:

Hello, world!
 

Você também pode emparelhá-lo com um summary elemento para personalizar a legenda na parte superior do widget:

     
     ...     
      Content goes here... 
 

Este elemento já existe há algum tempo e sua simplicidade pode levar você a pensar que não é tão útil, mas está longe de ser o caso. Você pode usar o mark elemento para chamar a atenção para um trecho específico de texto que é semanticamente idêntico ao texto que o rodeia.

O estilo padrão do navegador geralmente renderiza o mark elemento com fundo amarelo:

Isso aponta para um estilo de caneta marca-texto, o que implica destacar uma série de textos como particularmente importantes ou relevantes para um determinado contexto.

Um dos melhores usos para mark é destacar os resultados da pesquisa. Você também pode usá-lo para destacar conteúdo que foi comentado ou destacar diferenças entre um trecho de texto e outro.

Meus elementos preferidos são aqueles que fazem muito com pouco. Eles pegam necessidades existentes que foram atendidas com inúmeras implementações de JavaScript e as satisfazem com HTML padrão, consistente e confiável.

progress é um caso em questão. Esta tag produz uma barra de progresso estilizável e programável para representar o status de conclusão de uma tarefa:

Você pode usar o progresso com um valor de ponto flutuante entre 0 e 1:

Ou você pode fornecer um máximo e um valor relativo a ele:

Sem nenhum valor, você descobrirá que seu navegador anima a barra de progresso para indicar atividade em andamento sem um status conhecido.

O picture tag é apenas um equivalente moderno de imgcerto? Não exatamente: a imagem tem muito mais a oferecer, a maior parte sob o pretexto de um design responsivo.

Os resultados podem parecer iguais aos de uma imagem, mas essa tag é sobre como você chega ao destino. Usando imagem, você pode selecionar uma imagem de acordo com:

• Formato, o que significa que você pode oferecer suporte a uma variedade maior de dispositivos.
• Tamanho do arquivo, para que você possa melhorar o desempenho e economizar largura de banda dos usuários.
• Layout, para que você possa adaptar seu design ao tamanho da tela.

Tudo isso é conseguido com uma estrutura que permite diversas opções de imagens em vez de uma:

Cada elemento de origem fornece detalhes de uma imagem candidata, além de atributos que descrevem quando ela deve ser usada. O elemento img ainda é usado, mas aqui é uma alternativa caso uma fonte apropriada não possa ser determinada.

Usando picture envolve um pouco mais de trabalho do que um único imgmas é muito mais fácil do que tentar manter sites inteiros separados para cada uso.

Encerrarei com uma tag avançada que depende de JavaScript, mas pode transformar significativamente o processo de trabalho com conteúdo dinâmico.

Como o próprio nome sugere, um elemento de modelo define a marcação que você pode usar para criar facilmente uma nova marcação. Por padrão, os elementos do modelo não aparecerão, mas fazem parte do DOM e você pode usá-los para criar elementos que aparecerão.

Sem templateadicionar conteúdo ao DOM requer muito código (usando createElement, createTextNode, appendChilde métodos semelhantes) ou muito processamento de strings, com innerHTML, que pode ser inseguro se você não tomar cuidado. Usando o modelo, você pode definir um pedaço de marcação como este:

Você pode então replicar esse conteúdo com uma simples chamada para clone e adicione-o ao DOM usando importNode. Isso é muito menos trabalhoso do que a alternativa:

const clone = document.importNode(template.content, true); tbody.appendChild(clone);