HTML est un pilier du web depuis des décennies. Maîtrisez ses fondamentaux : définition, fonctionnement et éléments clés pour coder vos premières pages.
Avant de plonger, découvrez notre guide des éditeurs HTML en ligne gratuits et des meilleurs exemples HTML de qualité.
HTML (HyperText Markup Language) est le langage standard pour structurer les pages web. Il s'agit d'un ensemble d'instructions que votre navigateur interprète pour afficher le contenu.
C'est un langage de balisage, non de programmation. Contrairement aux langages comme JavaScript, il ne gère pas la logique (calculs, données dynamiques), mais définit la mise en page et la structure.
Le HTML repose sur des balises (tags), instructions prédéfinies pour styliser ou structurer le contenu (images, liens, boutons, etc.). Imaginez-les comme des plans de construction : balises = fenêtres/portes.
Exemple de page HTML basique :
<html>
<head>
<title>Site Web MUO</title>
</head>
<body>
</body>
</html>La plupart des balises s'ouvrent (<tag>) et se ferment (</tag>). Elles ne s'affichent pas à l'écran, mais quiconque peut inspecter le code source.
Pas besoin de tout mémoriser : concentrez-vous sur les essentielles.
Les attributs ajoutent des propriétés aux balises (taille, couleur, etc.). Ils s'insèrent dans la balise d'ouverture :
<p width="123" height="567"></p>Balises et attributs sont standardisés par le W3C.
HTML5 est la version actuelle, enrichie de nouvelles balises et API (audio, vidéo, etc.). Les navigateurs l'interprètent globalement de façon cohérente, mais testez toujours (Chrome vs. Edge).
Pour approfondir : notre guide HTML5.
Les commentaires sont ignorés par le navigateur, utiles pour noter ou masquer du code temporairement :
<!-- N'oubliez pas d'ajouter le XYZ ici ! --><!--
<p width="123" height="567"></p>
-->Utilisez <img> (balise auto-fermante) :
<img src="MUO_logo.jpg" alt="Logo MakeUseOf">src = chemin image ; alt = texte alternatif (accessibilité/SEO).
La balise <font> (obsolète) permettait de changer police, taille ou couleur :
<font face="Arial">Texte Arial</font>
<font size="12">Texte large</font>
<font color="red">Texte rouge</font>
Préférez CSS pour le styling moderne. Imbriquez les balises si besoin :
<p><font color="red">Texte rouge</font></p>Balise <a> :
<a href="https://www.makeuseof.com">MakeUseOf.com</a>href = URL cible.
Utilisez <table>, <tr> (lignes), <td> (cellules) :
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>Évitez les tableaux pour la mise en page (utilisez CSS Grid/Flexbox). Réservez-les aux données tabulaires.
Pour un design avancé, intégrez CSS :
<html>
<head>
<style type="text/css">
/* Règles CSS */
</style>
</head>
</html>Simple et accessible ! Pour un site complet, consultez notre guide du débutant.
[]