balises HTML 5

Portrait de Jenny
Soumis par Jenny le 17 sep 2013 - 13:27

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

ex html5

  • 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.

https://developer.mozilla.org/fr/docs/Web/Guide/HTML/HTML5