HTML
RESUME

Syntaxe générale

<!DOCTYPE html>
<!-- Commentaires -->
<html>

<head>
  <meta charset="utf-8">
  ...
</head>

<body>
  ...
  <!-- Commentaires -->
  ...    
</body>

</html>

Explications :

<!DOCTYPE html>	Prologue indiquant la version du HTML, ici la version 5
<html> ... </html>	Balises principales de toutes les pages web
<head> ... </head>	Balises d'en-tête de la page
<body> ... </body>	Balises du corps de la page
<!-- ... -->	Commentaires pour le code
Indentation	Facultative, améliore la lisibilité du code

Balises d'en-tête

Elles se situent dans l'en-tête de la page, entre les balises <head> et </head>.

<meta ... >	Balise contenant les métadonnées de la page
<title> ... </title>	Titre de la page affiché dans l’onglet du navigateur
<link rel="stylesheet" href="...">	Lien vers une ressource externe, ici une feuille de style
<style> ... </style>	Code en CSS
<script> ... </script>	Code en JavaScript

Balises structurantes

Elles permettent de disposer des blocs dans la page contenant du texte, des images...

<h1> à <h6> ... </h1> à </h6>	Titre de différents niveaux
<p> ... </p>	Paragraphe
<br>	Retour à la ligne
<hr>	Ligne de séparation horizontale
<b> ... </b>	Texte en gras
<i> ... </i>	Texte en italique
<u> ... </u>	Texte souligné
<sub> ... </sub>	Mise en indice
<sup> ... </sup>	Mise en exposant
<q> ... </q>	Citation courte
<a href="..."> ... </a>	Lien hypertexte et son attribut href
<pre> ... </pre>	Texte pré-formaté
<code> ... </code>	Extrait de code
<img src="...">	Image et son attribut src
<video src="..."> ... </video>	Vidéo et son attributs src
<audio src="..."> ... </audio>	Son et son attributs src

Balises de listes

Elles permettent de créer des listes à puces ou numérotées.

<ul> ... </ul>	Liste à puces, non numérotée
<ol> ... </ol>	Liste numérotée
<li> ...	Elément de la liste

Balises de tableau

Elles ont pour but de créer un tableau structuré avec des lignes et des colonnes.

<table> ... </table>	Tableau
<tr> ... </tr>	Ligne de tableau
<th> ... </th>	Cellule d’en-tête
<td> ... </td>	Cellule

Balises sectionnantes

Ces balises sert à construire les éléments de base d'un site web.

<header> ... </header>	En-tête
<nav> ... </nav>	Liens principaux de navigation
<footer> ... </footer>	Pied de page
<section> ... </section>	Section de page
<article> ... </article>	Article (contenu autonome)
<aside> ... </aside>	Informations complémentaires

Balises génériques

Il y a deux balises génériques : L'une est de type en ligne, l'autre est de type bloc. Elles n'ont pas de sens sémantique.

<span> ... </span>	Balise générique de type en ligne Autorise les autres éléments à venir s'asseoir à gauche et à droite Ne se redimensionne pas avec width et height Respecte les marges gauches et droites, mais pas les marges haut et bas
<div> ... </div>	Balise générique de type bloc Force un passage à la ligne Ne tolère pas d'élément à gauche ou à droite Se redimensionne avec width et height Respecte toutes les marges

Attributs de balise

Nous avons déjà vu les attributs src et href. Il en existe d'autres.

class	Souvent associé aux balises génériques, il indique le nom de la classe CSS à utiliser
id	Donne un identifiant à la balise, obligatoirement unique pour toute la page
style	Permet d'écrire directement le code CSS à appliquer dans la balise