TOP extraits HTML et + ...pour les tâches HTML les plus fréquemment utilisées - 2022

29 extraits HTML pour les tâches HTML les plus fréquemment utilisées

extraits HTML pour les tâches HTML les plus fréquemment utilisées

Les extraits de code sont utiles lorsque vous créez une page Web et que vous ne souhaitez pas réinventer la roue. Ces petits blocs de code peuvent vous aider à accélérer votre temps de développement frontal en vous fournissant des méthodes éprouvées pour obtenir les résultats souhaités.

Il y a environ 140 balises HTML , selon que vous consultez le Mozilla Developer Network ou HTML.com. C'est beaucoup à retenir. Donc, pour vous donner un coup de main, nous avons répertorié ci-dessous 30 extraits de code HTML couramment utilisés lorsque vous ne vous souvenez tout simplement pas de ce dont vous avez besoin pour votre page.

7 extraits HTML pour les formulaires

1. Restreindre les téléchargements à un type MIME spécifique

L'attribut accept a été ajouté à la spécification HTML5 pour vous permettre de désigner le type de fichiers pouvant être téléchargés dans un formulaire. Vous pouvez spécifier les fichiers autorisés avec une liste délimitée par des virgules. Le champ ci-dessous autorise les gifs, jpegs et pngs :

<input type="file" name="my_image" accept="image/gif,image/jpeg,image/jpg,image/png">

2. Ajouter la saisie semi-automatique à une entrée sans JavaScript

L'élément de liste de données HTML5 vous permet d'ajouter des valeurs de saisie semi-automatique à un champ de saisie.

<input name="frameworks" list="frameworks" /> <datalist id="frameworks"> <option value="React"> <option value="Angular"> <option value="Vue.js"> <option value="Ember.js"> </datalist>

3. Ajouter une validation par e-mail à un champ

Le champ de saisie ci-dessous rendra l'adresse e-mail requise et la validera :

<input type="text" title="email_address" required pattern="[^@]+@[^@]+.[a-zA-Z]{2,6}" />

4. Ajouter la recherche Google Places à un formulaire

Le code ci-dessous permettra à un utilisateur d'entrer son adresse et d'obtenir l'itinéraire vers l'emplacement dans le champ d'adresse masqué :

<form action="http://maps.google.com/maps" method="get" target="_blank"> <label for="saddr">Enter your location</label> <input type="text" name="saddr" /> <input type="hidden" name="daddr" value="1600 Pennsylvania Avenue NW, Washington, DC 20500" /> <input type="submit" value="Get directions" /> </form>

5. Désactiver la saisie semi-automatique dans une entrée

Ce code HTML désactivera les fonctions de saisie semi-automatique d'un navigateur afin que vous puissiez utiliser les vôtres :

<input name="query" type="text" autocomplete="off"/>

6. Publier un formulaire dans une nouvelle fenêtre/onglet

Le code ci-dessous ouvrira une nouvelle fenêtre lorsque vous soumettez le formulaire :

<form action="#" method="post" target="_blank"> ... </form>

7. Ajoutez un formulaire de recherche Google pour votre site

Ce code ajoutera un formulaire à votre site qui recherchera uniquement votre site dans Google :

<form action="http://www.google.com/search" method="get"> <fieldset> <input type="hidden" name="sitesearch" value="yoursite.com" /> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /> </fieldset> </form>

5 extraits HTML pour les liens

8. Créez des liens téléphoniques

Étant donné que les internautes peuvent visiter votre site à partir d'un téléphone mobile, il est conseillé de lier tous les numéros de téléphone afin qu'ils puissent composer le numéro en cliquant simplement sur le lien. Voici comment procéder :

<a href="tel:1-888-555-5555">1-888-555-5555</a>

9. Créer des liens SMS

Vous pouvez également créer un lien redirigeant les utilisateurs vers leur application de messagerie texte :

<a href="sms:1-888-555-5555">Send Text Message</a>

10. Créer des liens e-mail

Étant donné que les noms des liens en HTML ne suivent pas le même schéma, il peut être difficile de se rappeler comment créer un lien e-mail. Voici comment procéder :

<a href="mailto:me@mysite.com">Email Me</a>

11. Ouvrir un lien dans une nouvelle fenêtre/onglet

Ce type de lien est pratique lorsque vous ne souhaitez pas que les utilisateurs quittent complètement votre site lorsqu'ils cliquent sur un lien :

<a href="http://google.com" target="_blank">Open Google in a new window/tab</a>

12. Masquer l'url d'un lien

Ce code masquera l'URL du lien lorsqu'il est survolé :

<a href="hiddenurl" target='blank' onMouseOver="self.status='displayed_url'; return true;" onMouseOut="self.status='';">Label</a>

7 extraits HTML pour la section principale

13. Empêcher l'indexation d'une page

Parfois, vous ne voulez pas que votre page s'affiche dans Google. Voici comment empêcher un moteur de recherche d'indexer une page :

<meta name="robots" content="noindex, nofollow"> <!-- Just for Google --> <meta name="googlebot" content="noindex, nofollow">

14. Charger JavaScript de manière asynchrone

Si vous chargez le JavaScript sur une page Web de manière asynchrone, la page se chargera beaucoup plus rapidement. Voici comment procéder :

<script src="https://mysite.com/script.js" async></script>

15. Rendez votre page responsive

La balise meta suivante indiquera aux navigateurs de restituer la largeur d'une page à la largeur de l'écran plutôt que de faire un zoom arrière :

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

16. Rediriger une page vers une autre

Lorsque vous ajoutez le code ci-dessous à l'en-tête d'une page HTML, il redirige vers Google après cinq secondes :

<meta http-equiv="refresh" content="5;url=http://google.com/" />

17. Extrait de code JavaScript de secours

Le code ci-dessous essaiera d'abord de charger jQuery depuis l'url distante, et si cela échoue, utilisera le fichier local :

<script src="//code.jquery.com/jquery.min.js"></script> <script>window.jQuery || document.write("<script src='js/jquery.min.js'></script>")</script>

18. Définir un favicon

Si vous souhaitez définir un favicon pour votre site, vous n'avez pas besoin de le nommer favicon et de le télécharger dans un répertoire spécifique. Vous pouvez le spécifier dans l'en-tête de votre HTML.

<link rel="shortcut icon" href="/favicon.ico">

19. Définir l'icône tactile Apple

Vous pouvez également définir l'icône d'Apple dans l'en-tête de votre HTML :

<link rel="apple-touch-icon" href="/apple-touch-icon.png">

3 extraits HTML pour le texte

20. Ajouter une info-bulle au texte

Vous pouvez utiliser JavaScript sophistiqué pour le faire, ou vous pouvez simplement utiliser HTML comme ci-dessous :

<span title="This is the tooltip.">Hover your mouse here</span>

21. Bienvenue dans le paragraphe lui-même

Voici une balise de paragraphe pré-remplie avec du texte lorem ipsum pour vous aider à tester l'apparence d'une page avec du contenu :

<p> Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>

22. Préserver la mise en forme du code

Si vous souhaitez que le code ressemble à du code au lieu d'être formaté comme le reste de votre page, entourez-le de balises de code.

<code> a = 6; b = 9; c = 12; </code>

2 extraits HTML pour les images

23. Créez un gif d'espacement sans fichier

De temps en temps, vous aurez peut-être besoin d'un gif d'espacement de 1px pour donner une apparence correcte à un style. Voici comment vous pouvez le faire sans ajouter un autre fichier image à votre projet :

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

24. Ajouter une image d'arrière-plan au texte

Vous pouvez utiliser HTML comme celui ci-dessous pour ajouter une image d'arrière-plan à une section spécifique de votre texte :

<span style="background-image: url(https://www.mysite.com/Background-Image.jpg); font-size: 20pt">I have a background.</span>

2 extraits de modèle

25. Modèle HTML5

Cet extrait de code vous donnera une page HTML5 valide comme point de départ pour votre projet :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> </body> </html>

26. Modèle de tableau

Il est parfois difficile de se souvenir de toutes les balises qui entrent dans la création d'un tableau HTML. Voici un modèle pour cela :

<table> <thead> <tr> <th></th> <th></th> <th></th> <th></th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table>

3 extraits HTML généraux

27. Ajouter des commentaires au HTML

Les commentaires vous aident à vous rappeler pourquoi vous avez fait quelque chose dans votre code. Voici comment ajouter un commentaire au HTML :

<div id="main"> <p>Content</p> </div> <!-- END main -->

28. Intégrer une vidéo dans une page HTML

Utilisez un code comme celui-ci pour intégrer une vidéo au format HTML :

<video poster="images/preview.png" width="800" height="600" controls="controls" preload="none"> <source src="media/my_video.mp4" type="video/mp4"></source> </video>

29. Intégrer l'audio dans HTML

Ce code intégrera un fichier audio dans une page HTML et permettra aux utilisateurs de le lire :

<audio controls="controls" preload="none"> <source src="audio/my_music.mp3" type="audio/mpeg"> </audio>

Éléments

Un élément HTML est une partie du contenu d'un document HTML.

Syntaxe

<opening-tag> content </closing-tag>

<self-closing-element />

La plupart des éléments sont constitués de balises ouvrantes et fermantes, mais certains se ferment automatiquement. De plus, certains éléments à fermeture automatique comme <br>peuvent avoir une barre oblique à la fin comme ceci : <br />.

Éléments imbriqués

Les éléments HTML peuvent être imbriqués, ce qui signifie que les éléments peuvent contenir d'autres éléments à l'intérieur, ou imbriqués. Tous les documents HTML sont constitués d'éléments HTML imbriqués.

L'exemple suivant contient quatre éléments HTML : <html>, <body>, <h1>et <p>:

< ! DOCTYPE > 
< html >
  < corps >
    < h1 > Article de blog </ h1 >
    < p > Mon premier paragraphe. </ p >
  </ corps >
</ html >

Éléments

<a>

Crée un lien vers une autre page ou vers un emplacement de la page actuelle.

<abr>

Indique un acronyme ou une abréviation d'un mot ou d'une expression plus longue.

<acronyme>

Crée du texte qui sera affiché lors du survol.

<applet>

Utilisé pour incorporer des applets Java dans des documents HTML, mais n'est plus pris en charge.

<audio>

Représente une interface pour ajouter du contenu audio à la page.

<b>

Utilisé pour attirer l'attention sur une section de texte, généralement affiché en gras.

<basefont>

Utilisé pour être utilisé pour définir la police du texte. Ceci est maintenant obsolète.

<clignoter>

Utilisé pour faire clignoter le texte et est maintenant obsolète, obsolète et non standard.

<blockquote>

Représente une section d'un document qui contient une citation plus longue, s'étendant généralement sur plusieurs lignes.

<br>

Représente une rupture dans le texte. Il est utilisé lorsque le texte doit s'étendre sur plusieurs lignes plutôt que d'être en ligne, comme dans une adresse.

<bouton>

Représente un bouton destiné à être cliqué par l'utilisateur.

<toile>

Crée des graphiques et des animations dans la page pour que JavaScript et WebGL interagissent avec

<centre>

Affiche son contenu centré horizontalement dans l'élément conteneur. Ceci est maintenant obsolète et CSS devrait être utilisé à la place.

<cite>

Représente une citation d'une œuvre référencée telle qu'un livre, une chanson ou une peinture.

<code>

Représente le code source contenu dans le texte.

<jj>

Décrit les détails trouvés dans un élément <dl>. Il est généralement accompagné d'au moins une balise de terme <dt> correspondante.

<div>

Représente une division générique de contenu. Il n'a aucune signification sémantique, mais séparera son contenu du reste du document.

<dl>

Affiche les termes et les détails, généralement à des fins de métadonnées.

<dt>

Décrit un terme trouvé à l'intérieur d'une balise <dl>. Il est généralement accompagné d'au moins une balise de détails <dd> correspondante.

<em>

Représente le texte mis en évidence. Les navigateurs afficheront le texte inclus en italique, par défaut."

<intégrer>

Insère du contenu externe tel qu'une vidéo, une image, une page, etc.

<font>

Utilisé pour être utilisé pour définir les caractéristiques de la police d'un texte. Ceci est maintenant obsolète.

<forme>

Représente une interface pour collecter et soumettre les informations fournies par l'utilisateur. Cela peut inclure des entrées de texte ouvertes, des boutons radio, des informations de calendrier, etc.

<h1> - <h6>

Représente un en-tête de texte pour une section de contenu, <h1> étant le niveau d'en-tête le plus élevé et <h6> le plus bas.

<tête>

Représente une collection de métadonnées liées au document actuel. C'est un enfant immédiat de l'élément `<html>` et peut inclure d'autres balises telles que <title>, <link>, <style> et <script>.

<html>

Représente l'intégralité du document HTML.

<i>

Utilisé pour définir du texte HTML pour une raison quelconque, comme idiomatique, technique, taxonomique, etc. Généralement rendu en italique.

<iframe>

Représente un conteneur utilisé pour intégrer une deuxième page Web dans la page actuelle. Il peut être utilisé pour le contenu du même domaine que le parent, ou même d'un deuxième domaine.

<image>

Affiche une image sur la page Web.

<entrée>

Crée un élément interactif, généralement utilisé dans un formulaire pour permettre la saisie de l'utilisateur. Il peut être utilisé pour créer des zones de texte, des sélecteurs de couleurs, des sélecteurs de dates et d'autres éléments d'interface utilisateur.

<kbd>

Accentue les caractères pour qu'ils ressemblent aux touches d'un clavier.

<li>

Représente un élément unique dans une liste d'éléments. Celui-ci et les autres éléments de la liste doivent être enveloppés dans une balise <ol>, <ul> ou <menu>.

<lien>

Relie la page en cours à un fichier externe.

<menu>

Représente une liste non ordonnée d'éléments avec une signification sémantique plus importante qu'un élément ul normal.

<méta>

Représente une interface pour fournir des métadonnées relatives au document. Les métadonnées sont des données utilisées pour décrire le document qui les contient.

<noscript>

Affiche le contenu si Javascript est désactivé dans le navigateur ou n'est pas pris en charge.

<objet>

Représente une ressource externe telle qu'une image, un contexte de navigation imbriqué ou un contenu à gérer par un plug-in de navigateur.

<ol>

Représente une liste ordonnée d'éléments.

<option>

Représente une option dans une liste déroulante créée par la balise select.

<sortie>

Affiche le résultat d'un calcul ou d'une action de l'utilisateur.

<param>

Utilisé pour passer des paramètres à une ressource définie dans une balise d'objet.

<image>

Représente plusieurs sources d'images possibles à appliquer à différents appareils et tailles d'écran.

<q>

Utilisé pour représenter une brève citation en ligne.

<script>

Utilisé pour insérer du code exécutable dans un document, généralement JavaScript. Peut être utilisé à la fois pour inclure un script dans le document HTML ou pour charger un script externe à partir d'une autre source.

<sélectionner>

Crée une liste déroulante que l'utilisateur peut sélectionner parmi un certain nombre d'éléments d'option.

<source>

Représente une interface pour ajouter du contenu source à la page.

<span>

Utilisé pour regrouper du texte ou des éléments associés pour le style et les scripts.

<fort>

Utilisé pour identifier un texte très important ou urgent.

<tableau>

Représente une interface pour ajouter des données tabulaires à la page. Les tableaux sont bidimensionnels, composés de lignes et de colonnes, et peuvent contenir de nombreux types de contenu.

<u>

Utilisé pour afficher du texte HTML avec une annotation non textuelle. Le rendu par défaut de ceci est un soulignement plein.

<ul>

Représente une liste non ordonnée d'éléments.

<vidéo>

Représente une interface pour ajouter du contenu vidéo à la page.