Pour identifier un document comme étant de l’HTML5, on commence par déclarer son doctype :
<!DOCTYPE html>
- <html>, <head> & <body> :
Ce sont des tags facultatifs.
– L’élément <html> est la racine du document. En plus des attributs habituels, il possède un attribut manifest qui référence l’adresse du cache manifest du document. il contient les éléments <head> et <body>.
– L’élément <head> contient les informations relatif au document : il possède obligatoirement un élément <title> qui indique le titre du document. Il peux également contenir les éléments suivant :
– Définir le charset :
<head>
<meta charset="UTF-8">
</head>
– Paire name/content pour les keywords, informations sur l’auteur, ou autres metadata :
<head>
<meta name="keywords" content="HTML5, Microsoft, 70-480">
<meta name="author" content="Lucrèce">
</head>
– Entête HTTP (ex : rafraichissement de la page, ou redirection)
<head>
<meta http-equiv="refresh" content="10">
</head>
Permet de définir une région CSS dans le <head>. Cette balise peux également être utilisée dans le body en précisant l’attribut scoped.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Titre de la page</title>
<style>
body {background: black; }
p {color: red;}
</style>
</head>
<body>
<p>
Paragraphe rouge.
</p>
<div>
<style scoped="scoped">
p {color: blue;}
</style>
<p>
Paragraphe bleu.
</p>
</div>
</body>
</html>
Cette balise définie un lien vers une ressource externe, la plupart du temps une feuille de style CSS :
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Cette balise permet de définir une url de base pour les liens relatifs ainsi que leur comportement. Dans cette exemple les url relatives seront préfixées par « http://dev.lucrece.net/images/ », et tous les liens seront ouverts dans une nouvelle fenêtre.
<head>
<base href="http://dev.lucrece.net/images/" target="_blank">
</head>
cette balise définie ou inclut du script client (comme du Javascript) : Elle peux définir le type de langage et son charset par ses attributs type et charset. Elle peut inclure un fichier externe par son attribut src (la balise est alors vide). Les attributs defer et async permettent d’exécuter le script après le chargement de la page (defer) ou de façon asynchrone (async).
<head>
<script type="text/javascript">
alert("Hello World");
</script>
<script src="javascript.js" defer="defer" ></script>
</head>
Cette balise permet d’ajouter du contenu spécifique si les scripts sont désactivés sur le client.
<head>
<script>
alert("Hello World");
</script>
<noscript>
<link rel="stylesheet" type="text/css" href="noscript_style.css">
</noscript>
</head>
<body>
<noscript>Les scripts sont désactivés</noscript>
</body>
– L’élément <body> défini le corps du document.
<!DOCTYPE html>
<html>
<head>
<title>Titre de la page</title>
</head>
<body>
<h1>Titre</h1>
<p>Paragraphe.</p>
</body>
</html>
On sélectionne la catégorie « Clock, Language, and Region » :
