7SYVGI LXXT JV STIRGPEWWVSSQW GSQ MRJSVQEXMUYI GSYVW ETTVIRI^ E GVIIV ZSXVI WMXI [IF EZIG LXQP IX GWW
Partie 5 : Annexes 0MGIRGI LXXT GVIEXMZIGSQQSRW SVK PMGIRWIW F] RG WE 236/249
Mémento des balises HTML
Cette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML.
Nous en avons déjà vu certaines dans le cours, mais il y en a d'autres que nous n'avons pas eu l'occasion d'étudier.
Généralement, les balises que nous n'avons pas étudiées sont des balises un peu plus rarement utilisées. Peut-être trouverez-
vous votre bonheur dans ce lot de nouvelles balises.
Vous pouvez vous servir de cette annexe comme d'un aide-mémoire lorsque vous développez votre site web.
Attention, j'insiste : cette annexe n'est pas complète et c'est volontaire. Je préfère mettre moins de balises et garder
seulement celles qui me semblent les plus utiles dans la pratique.
Mémento
Balises de premier niveau
Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour
réaliser le « code minimal » d'une page web.
Balise Description
<html> Balise principale
<head> En-tête de la page
<body> Corps de la page
Code minimal d'une page HTML :
Code : HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
</body>
</html>
Balises d'en-tête
Ces balises sont toutes situées dans l'en-tête de la page web, c'est-à-dire entre <head> et </head> :
Balise Description
<link /> Liaison avec une feuille de style
<meta /> Métadonnées de la page web (charset, mots-clés, etc.)
<script> Code JavaScript
<style> Code CSS
<title> Titre de la page
[Link]
Partie 5 : Annexes 237/249
Balises de structuration du texte
Balise Description
<abbr> Abréviation
<blockquote> Citation (longue)
<cite> Citation du titre d'une œuvre ou d'un évènement
<q> Citation (courte)
<sup> Exposant
<sub> Indice
<strong> Mise en valeur forte
<em> Mise en valeur normale
<mark> Mise en valeur visuelle
<h1> Titre de niveau 1
<h2> Titre de niveau 2
<h3> Titre de niveau 3
<h4> Titre de niveau 4
<h5> Titre de niveau 5
<h6> Titre de niveau 6
<img /> Image
<figure> Figure (image, code, etc.)
<figcaption> Description de la figure
<audio> Son
<video> Vidéo
<source> Format source pour les balises <audio> et <video>
<a> Lien hypertexte
<br /> Retour à la ligne
<p> Paragraphe
<hr /> Ligne de séparation horizontale
<address> Adresse de contact
<del> Texte supprimé
<ins> Texte inséré
<dfn> Définition
<kbd> Saisie clavier
<pre> Affichage formaté (pour les codes sources)
<progress> Barre de progression
<time> Date ou heure
[Link]
Partie 5 : Annexes 238/249
Balises de listes
Cette section énumère toutes les balises HTML permettant de créer des listes (listes à puces, listes numérotées, listes de
définitions…)
Balise Description
<ul> Liste à puces, non numérotée
<ol> Liste numérotée
<li> Élément de la liste à puces
<dl> Liste de définitions
<dt> Terme à définir
<dd> Définition du terme
Balises de tableau
Balise Description
<table> Tableau
<caption> Titre du tableau
<tr> Ligne de tableau
<th> Cellule d'en-tête
<td> Cellule
<thead> Section de l'en-tête du tableau
<tbody> Section du corps du tableau
<tfoot> Section du pied du tableau
Balises de formulaire
Balise Description
<form> Formulaire
<fieldset> Groupe de champs
<legend> Titre d'un groupe de champs
<label> Libellé d'un champ
<input /> Champ de formulaire (texte, mot de passe, case à cocher, bouton, etc.)
<textarea> Zone de saisie multiligne
<select> Liste déroulante
<option> Élément d'une liste déroulante
<optgroup> Groupe d'éléments d'une liste déroulante
[Link]
Partie 5 : Annexes 239/249
Balises sectionnantes
Ces balises permettent de construire le squelette de notre site web.
Balise Description
<header> En-tête
<nav> Liens principaux de navigation
<footer> Pied de page
<section> Section de page
<article> Article (contenu autonome)
<aside> Informations complémentaires
Balises génériques
Les balises génériques sont des balises qui n'ont pas de sens sémantique.
En effet, toutes les autres balises HTML ont un sens : <p> signifie « Paragraphe », <h2> signifie « Sous-titre », etc.
Parfois, on a besoin d'utiliser des balises génériques (aussi appelées balises universelles) car aucune des autres balises ne
convient. On utilise le plus souvent des balises génériques pour construire son design.
Il y a deux balises génériques : l'une est inline, l'autre est block.
Balise Description
<span> Balise générique de type inline
<div> Balise générique de type block
Ces balises ont un intérêt uniquement si vous leur associez un attribut class, id ou style :
class : indique le nom de la classe CSS à utiliser.
id : donne un nom à la balise. Ce nom doit être unique sur toute la page car il permet d'identifier la balise. Vous pouvez
vous servir de l'ID pour de nombreuses choses, par exemple pour créer un lien vers une ancre, pour un style CSS de type
ID, pour des manipulations en JavaScript, etc.
style : cet attribut vous permet d'indiquer directement le code CSS à appliquer. Vous n'êtes donc pas obligés d'avoir
une feuille de style à part, vous pouvez mettre directement les attributs CSS. Notez qu'il est préférable de ne pas utiliser
cet attribut et de passer à la place par une feuille de style externe, car cela rend votre site plus facile à mettre à jour par la
suite.
Ces trois attributs ne sont pas réservés aux balises génériques : vous pouvez aussi les utiliser sans aucun problème dans la
plupart des autres balises.
[Link]
Partie 5 : Annexes 240/249
Mémento des propriétés CSS
Cette page est une liste non exhaustive des propriétés CSS qui existent en CSS3. Pour la plupart, ce sont des propriétés que
nous avons vues dans le cours, mais vous trouverez aussi quelques nouvelles propriétés que nous n'avons pas abordées.
La liste est non exhaustive car mon but n'est pas de faire la liste de toutes les propriétés CSS qui peuvent exister : il y en a
vraiment trop (plus de deux cents !) et certaines sont très rarement utilisées.
Mémento
Propriétés de mise en forme du texte
Je résume ici la plupart des propriétés de mise en forme du texte.
Qu'est-ce que la mise en forme de texte ? C'est tout ce qui touche à la présentation du texte proprement dit : le gras, l'italique, le
souligné, la police, l'alignement, etc.
Propriété Valeurs (exemples) Description
font- police1, police2, police3, serif,
Nom de police
family sans-serif, monospace
@font-face Nom et source de la police Police personnalisée
font-size 1.3em, 16px, 120%... Taille du texte
font-
bold, normal Gras
weight
font-style italic, oblique, normal Italique
text- underline, overline, line-through,
Soulignement, ligne au-dessus, barré ou clignotant
decoration blink, none
font-
small-caps, normal Petites capitales
variant
text-
capitalize, lowercase, uppercase Capitales
transform
Super propriété de police. Combine : font-weight, font-style,
font -
font-size, font-variant, font-family.
text-align left, center, right, justify Alignement horizontal
vertical- baseline, middle, sub, super, top, Alignement vertical (cellules de tableau ou éléments inline-block
align bottom uniquement)
line-
18px, 120%, normal... Hauteur de ligne
height
text-
25px Alinéa
indent
white-
pre, nowrap, normal Césure
space
word-wrap break-word, normal Césure forcée
5px 5px 2px blue
text-
(horizontale, verticale, fondu, Ombre de texte
shadow
couleur)
Propriétés de couleur et de fond
[Link]
Partie 5 : Annexes 241/249
Propriété Valeurs (exemples) Description
nom, rgb(rouge,vert,bleu),
color rgba(rouge,vert,bleu,transparence), Couleur du texte
#CF1A20...
background-
Identique à color Couleur de fond
color
background-
url('[Link]') Image de fond
image
background-
fixed, scroll Fond fixe
attachment
background-
repeat-x, repeat-y, no-repeat, repeat Répétition du fond
repeat
background-
(x y), top, center, bottom, left, right Position du fond
position
Super propriété du fond. Combine : background-image,
background - background-repeat, background-attachment,
background-position
opacity 0.5 Transparence
Propriétés des boîtes
Propriété Valeurs (exemples) Description
width 150px, 80%... Largeur
height 150px, 80%... Hauteur
min-
150px, 80%... Largeur minimale
width
max-
150px, 80%... Largeur maximale
width
min-
150px, 80%... Hauteur minimale
height
max-
150px, 80%... Hauteur maximale
height
margin-
23px Marge en haut
top
margin-
23px Marge à gauche
left
margin-
23px Marge à droite
right
margin-
23px Marge en bas
bottom
Super-propriété de marge.
23px 5px 23px 5px
margin Combine : margin-top, margin-right, margin-
(haut, droite, bas, gauche)
bottom, margin-left.
padding-
23px Marge intérieure à gauche
left
padding-
23px Marge intérieure à droite
[Link]
Partie 5 : Annexes 242/249
23px Marge intérieure à droite
right
padding-
23px Marge intérieure en bas
bottom
padding-
23px Marge intérieure en haut
top
Super-propriété de marge intérieure.
23px 5px 23px 5px
padding Combine : padding-top, padding-right, padding-
(haut, droite, bas, gauche)
bottom, padding-left.
border-
3px Épaisseur de bordure
width
border- nom, rgb(rouge,vert,bleu),
Couleur de bordure
color rgba(rouge,vert,bleu,transparence), #CF1A20...
border- solid, dotted, dashed, double, groove, ridge,
Type de bordure
style inset, outset
Super-propriété de bordure. Combine border-width,
border-color, border-style.
border 3px solid black
Existe aussi en version border-top, border-right,
border-bottom, border-left.
border-
5px Bordure arrondie
radius
box- 6px 6px 0px black
Ombre de boîte
shadow (horizontale, verticale, fondu, couleur)
Propriétés de positionnement et d'affichage
Propriété Valeurs (exemples) Description
block, inline, inline-block, table, table-cell, Type d'élément (block, inline, inline-block,
display
none... none…)
visibility visible, hidden Visibilité
rect (0px, 60px, 30px, 0px)
clip Affichage d'une partie de l'élément
rect (haut, droite, bas, gauche)
overflow auto, scroll, visible, hidden Comportement en cas de dépassement
float left, right, none Flottant
clear left, right, both, none Arrêt d'un flottant
position relative, absolute, static Positionnement
top 20px Position par rapport au haut
bottom 20px Position par rapport au bas
left 20px Position par rapport à la gauche
right 20px Position par rapport à la droite
Ordre d'affichage en cas de superposition.
z-index 10
La plus grande valeur est affichée par-dessus les autres.
Propriétés des listes
[Link]
Partie 5 : Annexes 243/249
Propriété Valeurs (exemples) Description
list-
disc, circle, square, decimal, lower-roman,
style- Type de liste
upper-roman, lower-alpha, upper-alpha, none
type
list-
style- inside, outside Position en retrait
position
list-
style- url('[Link]') Puce personnalisée
image
list- Super-propriété de liste. Combine list-style-type,
-
style list-style-position, list-style-image.
Propriétés des tableaux
Propriété Valeurs (exemples) Description
border-collapse collapse, separate Fusion des bordures
empty-cells hide, show Affichage des cellules vides
caption-side bottom, top Position du titre du tableau
Autres propriétés
Propriété Valeurs (exemple) Description
cursor crosshair, default, help, move, pointer, progress, text, wait, e-resize, ne-resize, auto... Curseur de souris
[Link]
