Tutoriel HTML5

HTML5

Découvez les bases et les nouveautés du HTML5 dans ce tutoriel.

HTML CSS Dreamweaver Bootstrap PHP

La balise head en HTML5

Dans ce tutoriel, je vous propose de découvrir quels sont les nouveaux éléments que nous insérons dans la balise head en HTML5.

Exemple

<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<!-- Permet l'adaptation de la surface aux tablettes et mobiles -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Facultatif, permet de désactiver le mode de compatibilité d'IE-->
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->
<title>Titre de ma page</title>
<meta name="description" content="Description de ma page">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<!-- Si la version du navigateur est inférieure à IE 9, on charge ces Javascripts -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
Contenu de ma page
<!-- Fichiers Jasvascripts, positionné en fin de document pour optimiser les temps de chargement-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Les nouveautés ou modifications

Définition de l'encodage simplifié

Pour définir un encodage en utf-8, il vous suffit d'écrire cette ligne.

<meta charset="utf-8">

meta name="viewport"

Cette balise permet l'adaptation de la surface aux tablettes et mobiles.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Valeurs possibles

Propriété Description

height

La propriété height spécifie la hauteur de la fenêtre en pixels. La propriété height accepte comme valeur un entier positif ou le mot clé device-height qui correspond à la hauteur de l'appareil disponible. device-height est variable suivant les appareils.
<meta name="viewport" content="height=device-height">

initial-scale

La propriété initial-scale spécifie l'échelle de la fenêtre (zoom). La propriété initial-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0. la valeur multiplié par width ou height;
La propriété initial-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone.
<meta name="viewport" content="initial-scale=1.0">

maximum-scale

La propriété maximum-scale spécifie l'échelle maximale de la fenêtre (zoom). La propriété maximum-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0
Si la propriété maximum-scale a comme valeur 1.0 alors la modification l'échelle de la fenêtre n'est pas possible.
Dans l'exemple, l'internaute ne pourra pas zoomer au dessus de 5.
La propriété maximum-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone.
<meta name="viewport" content="maximum-scale=5.0">

minimum-scale

La propriété minimum-scale spécifie l'échelle minimale de la fenêtre (zoom). La propriété minimum-scale accepte comme valeur un nombre comprit entre > 0.0 et 10.0.
Dans l'exemple, l'internaute ne pourra pas dé-zoomer au dessous de 0.5.
La propriété minimum-scale n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone.
<meta name="viewport" content="minimum-scale=0.5">

user-scalable

La propriété user-scalable spécifie si l'internaute modifier l'échelle de la fenêtre (zoomer). La propriété user-scalable peut prendre de yes autorise la modification l'échelle de la fenêtre ou no interdit la modification l'échelle de la fenêtre. La propriété user-scalable n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone.
<meta name="viewport" content="user-scalable=no">

target-densitydpi

La propriété target-densitydpi spécifie la densité de pixel cible pour lequel la page Web est conçu. La propriété target-densitydpi est devenue obsolète sur webkit, cependant il semble que Chrome, Opera l'utilisent.
La propriété target-densitydpi n'est pas reconnue pour le moment pour Internet Explorer pour Windows Phone (04-2013). La propriété target-densitydpi peut prendre la valeur de :
device-dpi : Indique que la densité de pixels d'origine de l'appareil qui doit être utilisée. Mise à l'échelle par défaut ne se produit jamais.
high-dpi : Indique que le contenu est destiné aux écrans à haute densité.
medium-dpi : Indique que le contenu est destiné aux écrans de moyenne densité.
low-dpi : Indique que le contenu est destiné aux écrans à faible densité.
nombre entier positif : Indique une valeur dpi entre 70 et 400 pour l'utiliser comme cible dpi.
<meta name="viewport" content="target-densitydpi=medium-dpi">
Source http://media-queries.aliasdmc.fr

meta http-equiv="X-UA-Compatible"

Cette balise de désactiver le mode de compatibilité d'IE.

Les bouts de code suivants <!--[if IE]> et <![endif]--> permettent de conditionner et l'éxécuter que pour IE.

<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<![endif]-->

Les balises meta acceptées par Google

En savoir +