- Accueil
- Info légales
- Aide (FAQ)
- Les tags de ce site
- Bloc note
- Articles techniques
- Notes system
- Divers articles
- Drupal
- Notes ITIL 2007
- Notes MS
- Dans le quartier...
- Emploi
- Recettes de cuisine et adresses gourmandes
- mes applis ubuntu préferées
- Divers acronymes du monde social
- Internet 2018
- P2 meublé à louer - quartier du Poteau 75018
- apcos - réseaux sociaux et outils
- Articles techniques
- Divers liens
- Fun
- Mon CV IT
- Nouveautés
balises HTML 5
Voir le mémento du 0 (now openclassrooms).
Comparer Navigateurs: http://caniuse.com/#cats=HTML5
Plus de structure
ajout de header et footer ; nav pour navigation (ul et li) ; section Chaque section peut avoir son <h1> (autre ex: l'en-tête peut contenir un titre <h1> lui aussi). Chacun de ces blocs étant indépendant des autres, il n'est pas illogique de retrouver plusieurs titres <h1> dans le code de la page web. On a ainsi « Le titre <h1> du <header> », « Le titre <h1> de cette <section> », etc.
<aside> pour les info complémentaires
<article> sert à englober une portion généralement autonome de la page. C'est une partie de la page qui pourrait ainsi être reprise sur un autre site. C'est le cas par exemple des actualités (articles de journaux ou de blogs).
Note: ce sch positionne arbitrairement :)
On peux aussi avoir une 2e balise <header>, placée cette fois à l'intérieur d'une <section> ; elle sera considérée comme étant l'en-tête de la section.
Et une section ne peux contenir qu'un seul paragraphe... Voir ces ex.
.js et soucis de compatibilité
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Inclusion de HTML5shiv pour IE 8à6 </title>
</head>
<body>
</body>
</html>
commentaire conditionnel lu par IE seul, v 6 7 ou8 seulement, mais pas lu par firefox
Eviter les span inutiles (<span class="important">
alors que strong existe) et div inutiles (<div class="titre">
alors que h1). voir marging et padding en anglais sur ce site
en bref
-
type block (<p>, <h1>…) : ces balises créent un retour à la ligne et occupent par défaut toute la largeur disponible. On peut modifier la taille d'une balise de type block avec les propriétés CSS width (largeur) et height (hauteur).
On peut définir des minima et maxima autorisés pour la largeur et la hauteur : min-width, max-width, min-height, max-height. - Le type inline (<a>, <strong>…) : ces balises délimitent du texte au milieu d'une ligne. Elles se suivent de gauche à droite.
- Les éléments de la page disposent chacun de marges intérieures (padding) et extérieures (margin).
- S'il y a trop de texte à l'intérieur d'un bloc de dimensions fixes, il y a un risque de débordement. Dans ce cas, il peut être judicieux de rajouter des barres de défilement avec la propriété overflow ou de forcer la césure avec word-wrap.
overflow pour si le txt est trop grand pour la div
- visible (par défaut) : si le texte dépasse les limites de taille du bloc, il reste visible et sort volontairement du bloc.
- hidden : si le texte dépasse les limites, il sera tout simplement coupé.
- scroll : coupé + barres de défilement (pour lire le reste).
- auto : le navigateur décide de mettre ou non des barres de défilement.
word-wrap pour couper les textes trop larges
ex: pas d'espace ni tiret (pas de passage à la ligne) ou cas URL longue affichée ds block trop petit en largeur (ou entrée user) car passe à la ligne dès que cela risque de dépasser:
p
{
word-wrap: break-word;
}
Plus sur le web...
https://html.spec.whatwg.org/multipage/index.html
https://wiki.whatwg.org/wiki/MetaExtensions lists the allowed extension values for the name="" attribute of the <meta> element in HTML5.