Éléments et structure de base
<!DOCTYPE html>- Le doctype HTML5, doit être placé en préambule.
<html>- Élément racine d'une page html. Cette balise contient tout le code html et est placée à la suite directe du préambule.
@lang- Langue principale de la page web (liste des codes langues).
<head>- Rassemble les métadonnées du document, incluant son titre, des scripts, des feuilles de style ou des liens vers des scripts et des feuilles de style.
<title>- Titre de la page web (affiché dans la barre du navigateur ou dans l'onglet de la page).
<title> ne peut contenir que du texte.
<meta/>- Métadonnées.
@charset- Attribut spécifiant l'encodage utilisépour la page. On utilise généralement UTF-8.
<body>- Corps de la page web. L'élément
<body/> contient le contenu du document html.
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma première page</title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
Formattage du texte
<h1/> à <h6/>- Éléments de titre.
<p>- Paragraphe.
<ul>- Liste non ordonnée.
<ol>- Liste ordonnée.
<li>- Item de liste.
<dl>- Liste de description.
<dt>- Terme à décrire.
<dd>- Définition d'un terme.
<strong>- Élément de haute importance. Affiché par défaut en gras.
<em>- Emphase (mise en valeur). Affiché par défaut en italique.
<cite>- Élément de citation, contenant le titre d'une œuvre.
<q>- Élément de citation en incise.
<blockquote>- Élément de bloc de citation.
<sub>- Indice.
<sup>- Exposant.
<small>- Petits caractères.
<pre>- Texte préformaté (les espaces sont conservés).
<code>- Élément de code en ligne.
<u>- Soulignement.
<i>- Italique.
<b>- Gras.
Les liens
<a>- Un lien hypertexte.
@href- Contient une URL absolue ou relative.
@href="mailto:adressMail"- Un lien hypertexte vers une adresse mail.
@href="tel:+33123456789"- Un lien vers un numéro de téléphone.
@target- Contexte d'affichage de l'URL. Valeurs
"_blank" (nouvel onglet) | "_self" (onglet actuel, par défaut).
Les sections
<header>- En-tête de la page web. Elle peut contenir un titre et/ou la navigation par exemple.
<footer>- Pied de page.
<nav>- Navigation.
<article>- Contenu autonome.
<section>- Regroupe des contenus liés.
<aside>- Aparté.
Balises et attributs génériques
<div>- Conteneur générique de type bloc.
<span>- Conteneur générique de type inline.
@id- Un identifiant unique.
@class- Une liste de classes associées à l'élément courant pour être manipulé avec CSS et/ou Javascript.
@contenteditable="true"- Contenu éditable.
@dir- Direction du texte.
dir="ltr" (gauche à droite) | dir="rtl" (droite à gauche)
Formulaires
<form>- Un formulaire.
<fieldset>- Un groupe de champs dans un formulaire.
<legend>- Une description pour un groupe de champs.
<input>- Un champ de formulaire.
<input type="text">- Un champ texte.
<input type="checkbox">- Un champ case à cocher.
<input type="radio">- Un champ bouton radio.
<input type="submit">- Un bouton de soumission.
<input type="email">- Un champ texte pour un adresse mail.
<input type="url">- Un champ texte pour une url.
<input type="number">- Un champ texte pour un nombre.
<textarea>- Une boite de texte.
<label>- Le nom d'un champ de formulaire.
<select>- Une liste d'option.
<option>- Une option (choix) dans une liste de formulaire.
<optgroup>- Un groupe d'options (choix) dans un liste de formulaire.
Les médias
<img/>- Image.
@src- Url d'un média. Peut être utilisé avec les balises
<img/>, <audio>, <video> et <source>.
@alt- Description de l'image.
@width- La largeur d'une image (
<img/>) ou d'une vidéo (<video>).
<audio>- Contenu sonore. S'utilise avec un attribut
@src ou avec un ou plusieurs sous-éléments <source>.
<video>- Contenu vidéo. S'utilise avec un attribut
@src ou avec un ou plusieurs sous-éléments <source>.
@control="true"- Utiliser les contrôles du navigateur pour les contenus audio et vidéo.
<source/>- Contenu média pour les balises
<audio>, <video> et <picture> (en remplacement de l'attribut @src).
@type- Le type MIME de la ressource.
@media- Contenu média pour les balises
<audio>, <video> et <picture> (en remplacement de l'attribut @src).
<figure>- Un contenu autonome. Généralement une image, une figure, un graphe, un diagramme, ou un fragment de code.
<figcaption>- Une légende pour un élément
<figure>.
<audio controls="true" src="/audio/piste01.mp3" />
<audio controls="true">
<source src="piste01.mp3">
<source src="piste01.ogg">
<p>
Audio HTML5 non pris en charge.
<a href="piste01.mp3">Télécharger l'audio</a>.
</p>
</audio>
Médias adaptatifs
<picture>- Image responsive. S'utilise conjointement avec un sous-élément
<img/> et un ou plusieurs sous-éléments <source>.
@srcset- Une liste d'images sous la forme de chaînes de caractères séparées par une virgule. Chaque chaîne est composée d'une URL et, séparé par un espace, soit d'un indicateur de largeur suivi directement de 'w', soit d'un indicateur de densité de pixel suivi directement de 'x'. Pour les balises
<img> et <source> (en remplacement de l'attribut @src).
@sizes- Une liste de conditions sous la forme de chaînes de caractères séparées par une virgule afin de définir quelle image afficher. Chaque chaîne est composée d'une condition (media) et, séparé par un espace, la largeur de l'image si la condition est vraie. Pour les balises
<img> et <source>.
@media- Une condition pour un média.
<picture>
<!-- Un @média par source,
si @srcset ne contient pas de liste -->
<source
srcset="bassedet.jpg"
media="(max-width: 500px)">
<source
srcset="hautedef.jpg"
media="(max-width: 1024px)">
<!-- Un img pour le chargement par défaut -->
<img
src="hautedef.jpg"
alt="paysage">
</picture>
<!-- ou -->
<img
srcset="bassedef.jpg 495w,
hautedef.jpg 1024w"
sizes="(max-width: 500px) 495px,
1024px"
src="hautedef.jpg"
alt="paysage">
<!-- @sizes si @srcset
contient une liste et un @src pour
le traitement par défaut. -->
Tableau
<table>- Un tableau.
<thead>- En-tête d'un tableau.
<tbody>- Corps d'un tableau.
<tfoot>- Pied d'un tableau.
<th>- En-tête d'une ligne ou d'une colonne.
<tr>- Ligne d'un tableau.
<th>- Cellule d'en-tête d'une ligne ou d'une colonne.
<td>- Une cellule.
@colspan- Nombre de colonnes sur lesquelles s'étend la cellule.
@rowspan- Nombre de lignes sur lesquelles s'étend la cellule.
<table>
<thead>
<tr>
<th>Achat boulangerie</th>
<th>Prix</th>
</tr>
</thead>
<tbody>
<tr>
<th>Baguette</td>
<td rowspan="2">1€</td>
</tr>
<tr>
<th>Croissant</td>
</tr>
<tr>
<th>Pain de campagne</td>
<td>2€</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>total</td>
<td>4€</td>
</tr>
</tfoot>
</table>