Balise qui contient l'ensemble du code de la page.
<head>
Aussi appelé « en-tête », c'est une balise qui contient des informations sur la page, ces informations ne seront pas affichées dans le navigateur.
<meta>
La balise meta avec son attribut chartset définit l'encodage de la page, c'est-à-dire qu'il s'assure du bon affichage des caractères spéciaux (accents, idéogrammes chinois et japonais, caractères arabes, etc.).
<title>
Indique le titre de la page web. (élément très important, car tout site doit avoir un titre décrivant ce qu'il contient. Il nomme également l'onglet de votre navigateur.
<body >
La balise body représente le contenu du document que l'on veut voir afficher dans la page web de notre navigateur.
Les titres d'une page
Il existe 6 niveaux de titre d'importances différentes
<h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
Du plus important au moins important, le <h6> est donc le titre le moins important.
<h1> Il est le titre de la page, il doit donc être unique.
<h2> C'est un titre principal, de très haute importance.
<h3> Il s'agit d'un sous-titre.
<h4> On peut le définir comme un titre de catégorie à l'intérieur d'un sous-titre.
<h5> Il peut s'agir d'une sous-catégorie.
<h6> C'est un titre de très faible importance.
Le texte et les paragraphes
Le texte s'inscrit la plupart du temps dans une balise de paragraphe <p>.
Mais il existe aussi d'autres balises plus précises pour mettre en forme ou indiquer de quel type de contenu il s'agit.
Mise en forme du texte
Balises
Description
<br>
Permet de forcer le retour à la ligne tout en restant dans le même paragraphe.
<b>
Sert à attirer l'attention sur une partie d'un texte sans y ajouter une importance particulière.
<em>
Met l'accent sur un contenu particulier.
<i>
Change la manière de lire le texte par rapport au contenu principal, c'est une indication complémentaire.
<mark>
C'est un marqueur qui sert à faire une mise en évidence pour l'utilisateur.
<sub>
Utilisé pour mettre du texte en indice.
<sup>
Utilisé pour mettre un élément en exposant.
Les types de contenu textuel
Balises
Description
<strong>
Indique qu'il s'agit d'un texte d'une forte importance.
<small>
Indique un contenu d'une importance secondaire.
<figcaption>
Légende d'une image de son parent figure.
<adress>
Présente une information de contact lié à une adresse.
<time>
Indique qu'il s'agit d'une date ou d'une heure.
<q>
Indique qu'il s'agit d'une citation de source extérieure.
<cite>
Représente une référence d'une citation ou d'une source.
<dfn>
Représente le terme qui est en train d'être défini.
<abbr>
Indique qu'il s'agit d'un acronyme ou d'une abréviation.
Il est possible de commencer par un autre numéro en utilisant l'attribut start,
la valeur de l'attribut correspond au numéro par lequel on souhaite commencer la liste.
Un tableau s'inscrit dans une balise <table>,
il se construit par ligne avec la balise <tr>,
on découpe ensuite ces lignes en colonne avec la balise <td>.
Pour ajouter une en-tête sur les colonnes avec les balises <thead>,
la colonne est alors remplacée par <th>. Sur un tableau l'en-tête peut aussi se mettre sur les lignes en plus des colonnes.
Le corp du tableau avec la balise <tbody> et le pied de page <tfoot>.
Pour regrouper des cellules on va utiliser deux attributs rowspan pour fusionner les lignes
et colspan pour fusionner les colonnes. La valeur de l'attribut correspond au nombre de cellule qu'elle doit occuper.
Il faudra donc déduire cette cellule sur la ligne ou la colonne suivante.
On découpe une page en plusieurs parties distinctes :
Balises
Description
<header>
En-tête de la page, sert de présentation et d'introduction.
<nav>
Navigation entre les différentes rubriques de la page.
<main>
Contenu principal de la page.
<section>
Définit les différentes sections du contenu d'une page.
<article>
Élément de contenu complèt et autonome.
<aside>
Contenu indépendant, relatif au contenu principal.
<figure>
Indique que le contenu sera une image.
<footer>
Le pied de page, contient des informations complémentaires au reste de la page.
<div>
Balise générique qui n'a pas de sens particulier, elle sert à structurer à l'intérieur des différentes sections.
Les balises <header>, <nav>, <main> et <footer>
sont uniques, il ne peut donc y en avoir qu'une par page HTML.
Les Liens
Un lien peut être sur un mot, une image, etc. Il peut diriger vers une url, une ancre, un document, etc. Il est mis en place avec la balise <a>.
Un lien a besoin de son attribut href pour lui indiquer sa destination. On lui donne un attribut title pour préciser son intitulé.
<ahref="#rubrique"title="une ancre vers l'id nommée rubrique"> vers la rubrique </a>
<ahref="https://www.wikipedia.net"title="un lien vers l'url de la page wikipedia"> wikipédia </a>
<ahref="mon-document.pdf"title="un lien vers un document pdf"> voir le document </a>
Les images
Une image s'affiche grâce à la balise orpheline <img>.
Elle a besoin de son attribut src pour lui indiquer sa source, qui se compose de son chemin, le nom de l'image et de son extension (jpg, png, gif pour les principaux).
On lui donne aussi un attribut alt qui est un texte dit alternatif, en cas de non affichage.
<imgsrc="chemin/nom.extension"alt="description de l'image">
On peut également indiquer différentes sources à afficher, selon la taille de l'écran :
<picture>
<sourcemedia="(min-width: 700px)"srcset="img/logo-mobile.png">
<sourcemedia="(max-width: 1200px)"srcset="img/logo-tablette.png">
<imgsrc="img/logo.png"alt="logo du site">
</picture>
Balises associées
Balises
Description
<figure>
Indique que le contenu sera une image.
<figcaption>
Légende d'une image de son parent figure.
Les formulaires
Un formulaire se trouve dans un conteneur dont la balise est <form>. Ils peuvent se composer de plusieurs éléments, dont voici la liste des balises associées :
Balises
Description
<form>
Indique qu'il s'agit d'un formulaire.
<input>
Champs d'un formulaire définit par son attribut type.
<label>
Intitulé lié à un champs du formulaire.
<fieldset>
Définit la zone d'un formulaire regroupant plusieurs label.
Les champs des formulaires sont faits avec les balises <input>. On peut différencier les types de champs grâce à l'attribut type.
Voici la liste des différents types :
Type
Description
text
Indique qu'il s'agit d'un texte, peut être composé de lettre ou de chiffre.
password
Indique qu'il s'agit d'un mot de passe, crypte le texte inscrit.
email
Demande un format d'adresse mail valide.
url
Demande un format d'url valide.
tel
Demande un format de numéro de téléphone valide, selon l'attribut pattern.
date
Ouvre un calendrier et permet de saisir une date, on peut définir une date minimum et maximum.
time
Format de type heure et minute.
number
Indique qu'il s'agit d'un contenu numérique, on peut y définir un minimum, un maximum et un cape.
range
Contenu numérique sous forme de barre sélectionnable.
radio
Case à cocher à réponse unique.
checkbox
Case à cocher à réponses multiples possible.
file
Permet de téléverser un fichier.
color
Permet de sélectionner une couleur.
reset
Remet à zéro les informations du parent form.
submit
Permet de valider les informations du parent form.
Permettent de définir une valeur minimale pour un champ.
max
Permettent de définir une valeur maximale pour un champ.
placeholder
Donne des indications sur les données attendues.
autocomplete
Permet l'auto-complétion d'un champ.
required
Force le remplissage du champ.
Les lecteurs audio et vidéo
Afficher un lecteur audio
On utilise la balise <audio> en lui donnant l'attribut et sa valeur controls="controls".
Il faut aussi lui indiquer sa source <src>.
<audiocontrols="controls"src="media/birds.mp3">
Votre navigateur ne supporte pas le lecteur audio.
</audio>
Afficher un lecteur vidéo
Comme pour l'audio on utilise la balise correspondante <video> en lui donnant l'attribut et sa valeur controls="controls".
Il faut aussi lui indiquer sa source <src>.
Sur un lecteur audio comme vidéo il est préferable d'ajouter plusieurs sources pour optimiser la bonne lecture du média.
