9 astuces HTML utiles

Salutations, Habr! Je vous présente la traduction de l'article «9 astuces HTML extrêmement utiles» de Klaus .

HTML a de nombreux secrets pratiques que vous pourriez trouver utiles.


Voici 9 astuces HTML extrêmement utiles.

1. La balise "figure"

Il peut être utilisé pour marquer des photos.

L'élément figure peut également contenir 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> 

Et voici à quoi cela ressemblera:


Fig.1 - SWAT Kats

2. Le tag "vidéo"

Il vous permet d'intégrer un lecteur multimédia pour la lecture vidéo.

Par exemple, vous pouvez télécharger votre vidéo sur AWS S3 et utiliser la balise «video» pour l'intégrer à votre site Web.

Utiliser YouTube pour cela peut sembler non professionnel.

Et Vimeo ne vous permet pas d'intégrer vos vidéos sans paiement.

Vous pouvez spécifier des caractéristiques spécifiques, telles que la largeur, la hauteur, le démarrage automatique, le cycle, les commandes, 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> 

Et voici à quoi cela ressemblera:


Vous pouvez également intégrer des diffusions en direct à l'aide de getUserMedia () ou WebRTC

3. La balise "image"

Cette balise permet d'afficher des images sous une forme publique, montrant une version alternative de l'image pour les petites fenêtres de visualisation.

Il doit contenir une ou plusieurs balises "source" et une balise "img" .

La balise img ne sera utilisée que si la visionneuse ne correspond à aucune des balises source ou si elle n'est pas prise en charge par le navigateur.

 <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. Le tag "progrès"

La balise de progression affiche la progression de la tâche.

Cette balise ne doit pas être confondue avec la balise "mètre" (qui est un capteur).

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

Voici à quoi ça ressemble:


5. Tag "mètre"

Vous pouvez utiliser la balise «mètre» pour mesurer des données dans une plage donnée (capteur).

Le résultat peut être défini via les valeurs minimale et maximale ou en pourcentage.

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

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

Et les voici:

6. La balise "map"

La balise de carte est utilisée pour définir une carte d'image client.

Une carte d'image est une image avec des zones interactives.

Il vous suffit de saisir les coordonnées X et Y dans les éléments de la carte .

Cela signifie que vous créez une carte de notre système solaire, définissez une zone pour chaque planète et redirigez les visiteurs vers une page distincte pour chaque planète sur laquelle ils ont cliqué.

 <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. Attribut contentable

Cet attribut indique si le contenu d'un élément est modifiable.

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

8. Suggestions de contribution

 <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> 

J'espère que cela ne vous dérange pas que je n'ajoute pas une variété de styles.

Je préfère concevoir des exemples à mon goût, aussi beaux que possible.


9. La balise "noscript"

Le contenu à l' intérieur de l' élément noscript n'est affiché par le navigateur que si JavaScript est désactivé.

Cela fournit un mécanisme de secours pour les composants qui cessent de fonctionner sans JavaScript.

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

Je pense que c'est vraiment cool que vous recherchiez des astuces HTML, mais êtes-vous sûr que votre application Web fonctionne correctement sur tous les navigateurs et appareils?

Vous pouvez utiliser Endtest pour créer rapidement des tests automatisés et les exécuter dans un cloud multi-navigateur.

Vous n'avez même pas besoin de code pour l'utiliser.

Sérieusement, il suffit de lire les documents .