Le HTML (HyperText Markup Language) constitue la base fondamentale de la création de pages web. Il s'agit d'un langage de balisage qui permet de structurer le contenu sémantiquement à l'aide d'éléments définis par des balises.
1. Architecture d'un document standard
Tout fichier HTML commence par une déclaration de type et une structure imbriquée qui sépare les métadonnées du contenu visible.
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ma première page web</title>
</head>
<body>
<header>
<h1>Bienvenue sur mon site</h1>
</header>
<main>
<p>Ceci est un exemple de structure HTML5 propre.</p>
</main>
</body>
</html>
- <!DOCTYPE html> : Indique au navigateur que le document utilise la norme HTML5.
- <html> : L'élément racine qui englobe tout le code.
- <head> : Contient les informations techniques (encodage, scripts, styles) non visibles directement.
- <body> : Regroupe l'ensemble des éléments affichés à l'écran.
2. Syntaxe des balises et attributs
Les éléments HTML fonctionnent généralement par paires (balise ouvrante et fermante), bien que certaines soient auto-fermantes. Les attributs fournissant des réglages supplémentaires pour ces éléments.
<!-- Lien vers un site externe avec attribut cible -->
<a href="https://www.mozilla.org" target="_blank">Visiter Mozilla</a>
<!-- Insertion d'un média avec texte alternatif -->
<img src="assets/logo-site.png" alt="Logo officiel de l'entreprise">
<!-- Champ de saisie avec texte indicatif -->
<input type="email" placeholder="votre@adresse.com">
Les attributs comme href, src, ou type définissent le comportement ou la source de la ressource. Ils s'écrivent toujours dans la balise ouvrante.
3. Organisation du texte
HTML propose une hiérarchie stricte pour l'organisation textuelle afin d'optimiser le référenecment (SEO) et l'accessibilité.
- Titres : De
<h1>(le plus important) à<h6>. - Paragraphes : L'élément
<p>pour les blocs de texte. - Formatage sémantique :
<strong>pour l'importance forte (gras) et<em>pour l'emphase (italique). - Sauts de ligne :
<br>pour forcer un retour à la ligne sans changer de paragraphe.
4. Listes et énumérations
Le balisage des listes permet d'organiser des éléments de manière ordonnée ou non.
<!-- Liste non ordonnée (puces) -->
<ul>
<li>Développement Frontend</li>
<li>Design UI/UX</li>
</ul>
<!-- Liste ordonnée (numérotée) -->
<ol>
<li>Analyse des besoins</li>
<li>Conception du prototype</li>
</ol>
5. Tableaux de données
Pour présenter des données structurées, on utilise une combinaison de balises spécifiques définissant les lignes, les colonnes et les entêtes.
<table>
<thead>
<tr>
<th>Service</th>
<th>Prix mensuel</th>
</tr>
</thead>
<tbody>
<tr>
<td>Hébergement</td>
<td>10€</td>
</tr>
<tr>
<td>Maintenance</td>
<td>50€</td>
</tr>
</tbody>
</table>
6. Commentaires dans le code
Il est essentiel de documenter son code pour faciliter la collaboration. Les commentaires HTML ne sont pas interprétés par le moteur de rendu du navigateur.
<!-- Section dédiée au formulaire de contact -->
<div id="contact">
<!-- Formulaire à venir -->
</div>