Le développement Web est un domaine en constante évolution et, même si les technologies que nous utilisons peuvent changer, certains éléments fondamentaux restent cohérents. L'une de ces fondations est le HTML.
Que vous soyez un développeur chevronné ou débutant, disposer d'une bibliothèque d'extraits de code HTML essentiels à portée de main peut vous faire gagner du temps et des efforts. Dans ce guide complet, nous examinerons les extraits de code HTML les plus couramment utilisés que tout développeur devrait connaître.
1. Balise méta réactive
À une époque où la navigation mobile domine, il est crucial de garantir que votre page Web évolue correctement sur tous les appareils.
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
Cet extrait indique au navigateur d'afficher la largeur de la page en fonction de la largeur de l'écran de l'appareil et de définir le niveau de zoom initial sur 1,0. En savoir plus sur les conceptions réactives dans notre Guide ultime du HTML .
2. Intégration de vidéos
Les vidéos peuvent améliorer l’expérience utilisateur, et des plateformes comme YouTube ont facilité leur intégration.
< iframe width = "560" height = "315" src = "https://www.youtube.com/embed/VIDEO_ID" frameborder = "0" allowfullscreen > </ iframe >
Remplacez VIDEO_ID par l'ID de la vidéo spécifique de YouTube. Vous voulez en savoir plus sur l’intégration du multimédia ? Consultez notre section sur le multimédia dans le guide ultime.
3. Lien de favicon
L’image de marque est vitale. Favicon est cette petite icône que vous voyez dans l'onglet du navigateur et elle fait partie de l'identité de votre marque.
< link rel = "icon" href = "path_to_favicon.ico" type = "image/x-icon" >
Pour connaître les différents formats de favicon et leur compatibilité avec les navigateurs, reportez-vous à notre Guide ultime .
4. Ouvrez le lien dans un nouvel onglet
Lors de la création de liens vers des ressources externes, l’ouverture dans un nouvel onglet peut améliorer l’expérience utilisateur.
< a href = "https://www.example.com" target = "_blank" rel = "noopener noreferrer" > Visit Example </ a >
Le rel="noopener noreferrer" est crucial pour des raisons de sécurité. Plongez plus profondément dans les attributs des liens hypertexte ici .
5. Lecteur vidéo HTML5
L'intégration native de vidéos sans plates-formes tierces n'a jamais été aussi simple.
< video width = "320" height = "240" controls >
< source src = "movie.mp4" type = "video/mp4" >
< source src = "movie.ogg" type = "video/ogg" >
Votre navigateur ne prend pas en charge la balise vidéo.
</ vidéo >
Vous souhaitez personnaliser le lecteur ou ajouter des sous-titres ? Découvrez-en plus dans la section vidéo de notre guide.
6. Lecteur audio HTML5
De même, pour l'audio :
< audio controls >
< source src = "audio.ogg" type = "audio/ogg" >
< source src = "audio.mp3" type = "audio/mpeg" >
Votre navigateur ne prend pas en charge la balise audio.
</audio>
Des podcasts à la musique de fond, découvrez-en plus sur l'intégration audio ici .
7. Formulaire de contact simple
Interagir avec les utilisateurs est souvent l’objectif principal d’un site Web. Un formulaire de contact est une passerelle pour cette interaction.
< form action = "/submit.php" method = "post" >
Name: < input type = "text" name = "name" > < br >
Email: < input type = "text" name = "email" > < br >
Message : < nom de la zone de texte = "message" > </ textarea > < br >
< type d'entrée = "soumettre" valeur = "Soumettre" >
</formulaire>
Pour des formulaires et une validation plus avancés, reportez-vous à la section de notre guide sur les formulaires .
8. Chargement de CSS et JavaScript externes
Le style et l'interactivité sont les piliers du développement Web moderne.
< link rel = "stylesheet" type = "text/css" href = "styles.css" >
< script src = "script.js" > </ script >
Plongez dans la relation entre HTML, CSS et JavaScript dans notre Guide ultime .
9. Définition du jeu de caractères
S'assurer que le texte s'affiche correctement sur tous les navigateurs :
< meta charset = "UTF-8" >
Le jeu de caractères, l'encodage et leur importance sont expliqués plus en détail ici .
10. Balise méta sans index et sans suivi
Le référencement est crucial, mais nous avons parfois besoin que les moteurs de recherche ignorent des pages spécifiques.
< meta name = "robots" content = "noindex, nofollow" >
Pour comprendre quand et pourquoi utiliser cela, référez-vous à notre section SEO .
11. Commentaires HTML
Parfois, vous devez laisser une note pour vous-même ou pour d'autres développeurs sans qu'elle soit affichée sur la page.
<!-- This is an HTML comment -->
Apprenez-en plus sur les commentaires et leurs meilleures pratiques dans notre guide .
12. Entités HTML
Les caractères spéciaux peuvent être délicats. Les entités HTML en font un jeu d'enfant.
© 2023 CoderChamp
Ce code s'affiche comme © 2023 CoderChamp. En savoir plus sur les entités ici .
13. Définition de l'URL de base
Lorsque vous avez des URL relatives dans un document, l'élément de base peut définir l'URL de base pour la page entière.
< base href = "https://www.example.com/" >
Découvrez comment cela peut simplifier votre flux de travail de développement dans le guide HTML .
14. Citation de bloc
Citer quelqu'un ? Donnez-leur du crédit avec l’attribut cite .
< blockquote cite = "https://www.sourceurl.com" >
"A relevant quote here."
</ blockquote >
Plongez dans les bonnes pratiques de citation ici .
15. Bouton qui déclenche JavaScript
Exécutez facilement une fonction JavaScript d’un simple clic.
< button onclick = "myFunction()" > Click Me! </ button >
Comprenez la synergie entre HTML et JavaScript dans notre section intégration .
16. Chargement paresseux des images
Améliorez les temps de chargement des pages en chargeant les images paresseusement.
< img src = "image.jpg" alt = "Description" loading = "lazy" >
Optimisez vos performances Web avec les conseils de notre section image .
17. Texte préformaté avec <pre>
Afficher le texte avec des espaces et des sauts de ligne.
< pre >
Text in a pre element
est affiché dans une largeur fixe
police, et il préserve
les espaces et les sauts de ligne.
</ pré >
Maîtrisez les techniques de formatage de texte dans notre guide .
18. Surligner du texte avec <mark>
Signifiez visuellement des morceaux de texte importants.
< p > This is a < mark > highlighted </ mark > text. </ p >
Pour en savoir plus sur la mise en valeur du contenu, consultez notre guide HTML .
19. Abréviations avec info-bulles
Expliquez clairement les abréviations avec la balise <abbr> .
< abbr title = "Hypertext Markup Language" > HTML </ abbr >
Découvrez des info-bulles conviviales et bien plus encore dans notre guide .
20. Barre de progression
Indiquer l'avancement d'une tâche.
< progress value = "70" max = "100" > </ progress >
Les éléments visuels et leur signification sont explorés plus en détail ici .
21. Listes déroulantes
Proposez une liste d’options via les balises <select> et <option> .
< select >
< option value = "volvo" > Volvo </ option >
< option value = "saab" > Saab </ option >
</ sélectionner >
Découvrez les éléments du formulaire et les choix des utilisateurs dans notre section Formulaires .
22. Entrées clavier
Marquez le texte comme saisie au clavier de l'utilisateur à l'aide de la balise <kbd> .
< p > Press < kbd > Ctrl </ kbd > + < kbd > C </ kbd > to copy. </ p >
D'autres sémantiques et leur importance sont détaillées ici .
23. Réglage de la langue
Informez le navigateur de la langue de votre document pour une meilleure accessibilité.
< html lang = "en" >
Maîtrisez l'art de créer des sites Web inclusifs dans notre section accessibilité .
24. Intégration de SVG en ligne
Intégrez des graphiques évolutifs directement dans votre document.
< svg width = "100" height = "100" >
< cercle cx = "50" cy = "50" r = "40" trait = "noir" trait-largeur = "3" remplissage = "rouge" />
</svg>
Découvrez le potentiel du SVG et des graphiques dans notre guide multimédia .
25. Index des onglets
Définissez l’ordre de tabulation pour les éléments focalisables.
< input type = "text" tabindex = "1" >
Plongez plus profondément dans les interactions des utilisateurs et la gestion des formulaires ici .
26. Saisie de la date
Un type d’entrée astucieux pour la sélection de date.
< input type = "date" name = "birthdate" >
Explorez un monde de types d'entrée HTML dans notre guide complet .
27. Résumé et détails
Créez un widget interactif pour masquer et afficher le contenu.
< details >
< résumé > Détails épiques </ résumé >
C'est le contenu qui était masqué !
</ détails >
Libérez des éléments HTML interactifs et bien plus encore dans notre section interactive .
28. Mise au point automatique sur le champ du formulaire
Attirez l’attention de l’utilisateur sur un champ de formulaire spécifique lors du chargement de la page.
< input type = "text" autofocus >
Améliorez l'expérience utilisateur avec notre guide détaillé sur les améliorations des formulaires ici .
29. Élément de sortie
Afficher le résultat d'un calcul.
< form oninput = "result.value=parseInt(a.value)+parseInt(b.value)" >
< input type = "range" id = "a" value = "50" > +
< type d'entrée = "numéro" id = "b" valeur = "25" >
= < nom de la sortie = "résultat" pour = "ab" > 75 </ sortie >
</formulaire>
Découvrez des moyens d'améliorer l'interactivité des utilisateurs dans notre section formulaire .
30. Cadres en ligne (iFrames)
Incorporez un autre document dans le document HTML actuel.
< iframe src = "https://www.example.com" title = "Description" > </ iframe >
Comprenez la puissance des cadres et leurs applications ici .
S'armer de ces extraits de code peut accélérer considérablement votre flux de travail et améliorer vos projets de développement Web . Chaque fois que vous avez besoin de plus d’informations, d’explications plus approfondies ou simplement de parfaire vos connaissances, notre Guide ultime du HTML constitue une référence fiable et complète. Bon codage !
