9 truques úteis em HTML

Saudações, Habr! Apresento a você a tradução do artigo “9 truques HTML extremamente úteis” de Klaus .

O HTML possui muitos segredos práticos que você pode achar úteis.


Abaixo estão 9 truques HTML extremamente úteis.

1. A tag "figure"

Pode ser usado para marcar fotos.

O elemento figura também pode conter figcaption :

<figure> <img src="https://thepracticaldev.s3.amazonaws.com/i/g84et7kjgp2phal89140.jpg" alt="Swat Kats" style="width:100%"> <figcaption>Fig.1 - SWAT Kats</figcaption> </figure> 

E é assim que ficará:


Fig. 1 - SWAT Kats

2. A tag "video"

Permite incorporar um media player para reprodução de vídeo.

Por exemplo, você pode fazer upload do seu vídeo para o AWS S3 e usar a tag "video" para incorporá-lo ao seu site.

Usar o YouTube para isso pode parecer pouco profissional.

E o Vimeo não permite que você incorpore seus vídeos sem pagamento.

Você pode especificar características específicas, como largura, altura, início automático, ciclo, controles etc.

 <video autoplay="" loop="" controls="" width="640" height="480"> <source type="video/mp4" src="https://endtest-videos.s3-us-west-2.amazonaws.com/documentation/endtest_data_driven_testing_csv.mp4"> </video> 

E é assim que ficará:


Você também pode incorporar transmissões ao vivo usando getUserMedia () ou WebRTC

3. A tag "imagem"

Essa tag ajuda a exibir imagens de forma pública, mostrando uma versão alternativa da imagem para pequenas janelas de visualização.

Ele deve conter uma ou mais tags "de origem" e uma tag "img" .

A tag img será usada apenas se o visualizador não corresponder a nenhuma das tags de origem ou se não for suportado pelo navegador.

 <picture> <source media="(min-width: 968px)" srcset="large_img.jpg"> <source media="(min-width: 360px)" srcset="small_img.jpg"> <img src="default_img.jpg" alt="avatar"> </picture> 

4. A tag "progresso"

A tag de progresso exibe o progresso da tarefa.

Esta etiqueta não deve ser confundida com a etiqueta "medidor" (que é um sensor).

 <progress value="63" max="100"> </progress> 

Aqui está o que parece:


5. Etiquete "medidor"

Você pode usar a etiqueta "medidor" para medir dados em um determinado intervalo (sensor).

O resultado pode ser definido através dos valores mínimo e máximo ou em porcentagem.

 <meter value="2" min="0" max="10">2 out of 10</meter> 

 <meter value="0.6">60%</meter> 

E aqui estão eles:

6. A tag "map"

A tag map é usada para definir um mapa de imagem do cliente.

Um mapa de imagem é uma imagem com áreas interativas.

Tudo o que você precisa fazer é inserir as coordenadas X e Y nos elementos do mapa .

Isso significa que você cria um mapa do nosso sistema solar, define uma área para cada planeta e redireciona os visitantes para uma página separada para cada planeta em que clicaram.

 <img src="solar_system.png" width="500" height="300" alt="Planets" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,52,92" href="earth.htm" alt="Earth"> <area shape="circle" coords="60,48,5" href="mars.htm" alt="Mars"> <area shape="circle" coords="135,48,12" href="saturn.htm" alt="Saturn"> </map> 

7. atributo Contenteditable

Este atributo indica se o conteúdo de um item é editável.

 <p contenteditable="true">This is an editable paragraph.</p> 

8. Sugestões para entrada

 <input type="text" list="planets"> <datalist id="planets"> <option value="Mercury"></option> <option value="Venus"></option> <option value="Earth"></option> <option value="Mars"></option> <option value="Jupiter"></option> <option value="Saturn"></option> <option value="Uranus"></option> <option value="Neptune"></option> </datalist> 

Espero que você não se importe de não adicionar uma variedade de estilos.

Eu prefiro criar exemplos da minha maneira, o mais bonito possível.


9. A tag "noscript"

O conteúdo dentro do elemento noscript é exibido pelo navegador apenas se o JavaScript estiver desativado.

Isso fornece um mecanismo de fallback para componentes que param de funcionar sem JavaScript.

 <noscript><h2>JavaScript is disabled in your browser.</h2></noscript> 

Acho muito legal que você esteja procurando truques em HTML, mas tem certeza de que seu aplicativo Web funciona corretamente em todos os navegadores e dispositivos?

Você pode usar o Endtest para criar rapidamente testes automatizados e executá-los em uma nuvem entre navegadores.

Você nem precisa de código para usá-lo.

Sério, basta ler os documentos .