Mémo : HTML5 4 è m e S I 1 - STI
Balises Description Attriibuts
< !-- écrire ici un Ecrire un commentaire pour mieux
commentaire -- > documenter le code source de la page
< !DOCTYPE Indiquer au navigateur qu’il
html> s’agit d’un document HTML5
Balises de 1er niveau – Code minimal d’une page web
<html> Balise principale ▪ lang = "ar|fr|de|en|… " :
indiquer la langue du contenu de
<head> En-tête de la page la page HTML
<body> Corps de la page
Balises d’en-tête – Situées entre les balises <head> et </head>
<title> Titre de la page, important pour le
référencement
25
<script> Code Javascript
<style> Code CSS
<meta /> Métadonnées de la page (charset, ▪ charset = "utf-8"
mots-clés, auteur, etc) ▪ name = "author" content = "nom
2K
de l’auteur" : permet d’indiquer le
nom de
l’auteur du site
▪ name="keywords"
content="mettre ici des mots-clés"
FO
: indiquer aux moteurs de
recherche des mots clés.
▪ name = "description"
<link /> Lier la page web à une feuille de ▪ content = "présenter ici
rel = "stylesheet"
style votre site" : 200 caratères
type = "text/css"
IN
▪
▪ au maximum.
href="lien pour la feuille de style"
Balises de structuration de texte
<h1> à <h6> Indiquer le niveau d’un titre
C
<p> Paragraphe
<mark> Marqueur de texte
BA
<br /> Saut de ligne
<a> Lien hypertexte ▪ Href : spécifier l’adresse de la
page à ouvrir
▪ target : spécifier l’endroit où
ouvrir le document
<b> Texte en gras
<i> Italique
<hr /> Ligne horizontale
<address> Définit les coordonnées de
l’auteur/proriétaire d’un document ou
d’un article
<details> Spécifier des détails supplémentaires
que l’utilisateur peut ouvrir ou fermer
à la demande
<summary> Définit un entête visible pour
l’élément <details>
1 Lycée Secondaire Ben Arous | Enseignant : Haythem CHEBLI
Mémo : HTML5 4 è m e S I 1 - STI
Balises de listes
<ul> Liste à puces, non numérotée
<ol> Liste numérotée
<li> Élément de la liste
<dl> Liste de définitions
<dt> Terme à définir
<dd> Définition du terme
Balises de tableau
<table> Tableau ▪ border: bordure du tableau
<caption> Titre du tableau
<tr> Ligne d’un tableau
25
<th> Cellule d’en-tête d’un tableau
<td> Cellule d’un tableau ▪ colspan : fusionner des cellules
adjacentes sur la même ligne
▪ rowspan : fusionner des cellules
2K
adjacentes sur la même colonne
<thead> En-tête du tableau
<tbody> Corps du tableau
<tfoot> Bas du tableau
FO
Balises multimédia
<img /> Image ▪ src : source de l’image
▪ width : largeur de l’image
▪ height : hauteur de l’image
IN
▪ alt : texte de description
<audio> Son ▪ src : source de la vidéo
▪ controls = "controls" : boutons de
contrôle (play, stop, mute, avancer,…)
▪ poster = "source d’une image" :
C
<video> Vidéo
indiquer une image à afficher par
défaut
BA
<source> Sources multiples du média pour
les balises <audio> et <video>
<progress> Barre de progression
<figure> Groupe d’éléments multimédia
<figcaption> Description de la figure
Balises de structuration de la page web – Squelette du site web
<header> Définit l'en-tête d'une section ou
d'une page
<footer> Définit le bas d'une section ou
d'une page
<menu> Définit un menu en forme de liste
<section> Définit une section
<article> Définit un article
<aside> Définit un élément latéral
2 Lycée Secondaire Ben Arous | Enseignant : Haythem CHEBLI
Mémo : HTML5 4 è m e S I 1 - STI
<nav> Définit un groupe de liens de ▪ class : indique le nom de la classe CSS
à utiliser
navigations
<iframe> Définit un cadre en ligne pour ▪ id : donne un identifiant unique à la
intégrer un document dans la balise
page HTML courante ▪ style : indique le style CSS à appliquer
directement
<div> Balise générique de type block
<span> Balise générique de type inline ▪ hidden : rensigne la visibilité de
l’élément
➔ Ces attributs peuvent être utilisés avec
la plupart des autres balises
HTML
Balises de formulaire
<form> Formulaire
25
<fieldset> Groupe d’éléments du formulaire
<legend> Description d’un groupe
<label> Titre d’un élement
2K
<input /> Champ de formulaire : texte, mot "text" : zone de texte
de passe, date, case à cocher,… "password" : zone de mot de
passe
"checkbox" : case à cocher
FO
"radio" : bouton radio
"submit" : bouton d’envoi
"reset" : bouton de
réinitialisation
type = "file" : sélection d’un
IN
fichier
"date" : zone date
"time" : zone heure
"range" : indiquer une valeur
numérique entre 2 bornes
C
"email" : zone e-mail
"url" : zone de saisie d’une URL
BA
<textarea> Zone de saisie multilignes
<select> Liste déroulante
<option> Elément d’une liste
<datalist> Spécifie une liste d’options
prédéfinies connectée à un élément
<input>
<button> Bouton cliquable
Evènements HTML5
onClick Se déclenche lors d’un clic sur un élément
onFocus Se déclenche au moment où l’élément prend le focus
onBlur Se déclenche au moment où l’élément perd le focus
onLoad Se déclenche au chargement du document web
onMouseOver Se déclenche lorsque le pointeur de la souris survole l’élément
onSubmit Se déclenche lors de la soumission (envoi) d’un formulaire
3 Lycée Secondaire Ben Arous | Enseignant : Haythem CHEBLI