HTML5 - ce qu'apportera la nouvelle norme. Ceci est un titre de texte

L'utilisation de nouveaux éléments nous offre certains avantages. Lorsque nous les utilisons en combinaison avec des éléments de titre, ..., cela nous permet d'utiliser plus que les six niveaux de titres présents dans les versions précédentes de HTML pour baliser les sections imbriquées d'un document. La nouvelle spécification fournit des conseils détaillés sur la formation d'une architecture de document, qui est représentée par une structure formée de nouveaux éléments de section et maintient en même temps une compatibilité ascendante avec les versions précédentes.

Ce guide est utilisé par les développeurs dans leur travail et par les navigateurs lors de la génération du contenu d'un document pour faciliter la navigation dans une page Web.

Par exemple, le balisage suivant utilise des sections imbriquées et des titres de premier niveau :


Niveau 1

Niveau 2

Niveau 3


Pour assurer la compatibilité avec versions actuelles navigateurs, vous pouvez également appliquer des en-têtes d'autres niveaux... en remplaçant les en-têtes par eux aux endroits appropriés.

En définissant les sections d'une page Web en fonction de leur objectif à l'aide d'éléments de section spéciaux, nous contribuons à bon fonctionnement Accédez à des technologies qui permettent à un utilisateur de naviguer beaucoup plus facilement sur une page. Dans certaines situations programmes spécialisés peut facilement passer d'un article à un autre, tout en contournant les sections du document qui remplissent d'autres fonctions (navigation, barre latérale, etc.), et les développeurs n'ont pas besoin de créer des liens de transition spéciaux pour cela.

Un autre avantage de l'utilisation de nouveaux éléments pour les développeurs est la possibilité de remplacer de nombreux div par l'un des nouveaux éléments ayant un objectif correspondant, ce qui rend le code plus propre et plus lisible.

L'élément est destiné à représenter le titre d'une section spécifique du document. En effet, outre le titre, il peut contenir d'autres types d'informations. Par exemple, il serait tout à fait raisonnable de placer entre ses balises des sous-titres, des informations sur l'auteur et/ou des informations sur les versions du document, ses modifications, etc.


Un aperçu de HTML 5


L'élément représente le pied de page de la section du document à laquelle il appartient. En règle générale, il contient des informations de l’auteur sur le contenu de la section, des liens vers des articles thématiques, etc. :

2007 Exemple Inc.

L'élément est destiné à contenir des liens de navigation. Il convient également à la navigation sur le site et à la diffusion de contenus de documents :



L'élément sert à présenter des informations qui, à un degré ou à un autre, correspondent au sujet du contenu environnant. Cet élément est très pratique pour implémenter des barres latérales (colonnes latérales) :


Les archives


Un élément représente une section générale d'un document ou d'une application, comme un chapitre, par exemple :


Chapitre 1 : La période

C'était le meilleur des temps, c'était le pire des temps,
c'était l'âge de la sagesse, c'était l'âge de la folie,
c'était l'époque de la croyance, c'était l'époque de l'incrédulité,
c'était la saison de la Lumière, c'était la saison des Ténèbres,


(Extrait de « Un conte de deux villes »)

Un élément est une section indépendante d'un document, d'une page ou d'un site dans son ensemble. Il est pratique à utiliser pour publier du contenu tel que des actualités, des articles de blog, des articles de forum ou des commentaires individuels :



Commentaire n°2
par Jack O'Niell

29 août 2007 à 13:58

C'est un autre excellent article !


Vidéo et audio.

Dans l'environnement Web, des types de données tels que la vidéo et l'audio sont récemment devenus de plus en plus pertinents. Et de nombreux sites comme YouTube, Viddler, Revver et MySpace permettent à tout internaute de publier facilement des informations vidéo et audio en ligne. Du fait que sur ce moment le standard HTML n'a pas moyens nécessaires l'inclusion et la gestion du contenu multimédia, la plupart des sites actuels utilisent la technologie Flash pour fournir les fonctionnalités requises. De plus, il est possible d'activer le multimédia via des plugins (tels que QuickTime, Windows Media et autres). Mais c'est quand même la technologie Flash qui est la plus utilisée et qui constitue une solution multi-navigateurs qui fournit l'API nécessaire aux développeurs.

À en juger par la présentation des différents lecteurs multimédias Flash, on peut affirmer sans se tromper que les développeurs souhaitent pouvoir créer leur propre type d'interface utilisateur permettant un contrôle complet de la lecture d'un fichier multimédia - contrôle du volume, arrêt, pause, recherche et lecture. Mais l'objectif principal pour le moment est la prise en charge native de ces fonctionnalités dans les navigateurs sans aucun plugin, ce qui vous permettra d'inclure des composants vidéo et audio avec l'API nécessaire pour contrôler la lecture à partir des scripts.

Et les éléments nouvellement présentés rendent cette tâche beaucoup plus facile. La plupart des fonctionnalités API disponibles sont communes aux deux éléments, avec des différences mineures propres aux informations visuelles et non visuelles.

Les moteurs Opera et WebKit ont déjà implémenté une prise en charge partielle de l'élément. Pour voir par vous-même, vous pouvez télécharger et essayer la version expérimentale d'Opera et la version de test automatisé de WebKit. Opera introduit la prise en charge du codec Ogg Theora et WebKit prend en charge tous les formats pris en charge dans QuickTime, y compris un certain nombre de codecs tiers.

La manière la plus simple d'inclure une vidéo dans un document est d'utiliser un élément sans aucune paramètres additionnels. Dans ce cas, le navigateur fournira des éléments d'interface utilisateur par défaut. Pour activer ou désactiver les contrôles de contenu multimédia par défaut, les contrôles d'attribut booléen sont utilisés avec les valeurs suivantes :


Télécharger le film

L'attribut facultatif poster est utilisé pour définir une image qui sera affichée à la place de l'élément vidéo avant que sa lecture ne commence. Et bien que certains formats vidéo fournissent leur propre écran de démarrage, qui leur est propre, comme c'est le cas dans MPEG-4, l'attribut poster est manière alternative définir un écran de démarrage qui sera affiché quel que soit le format vidéo utilisé.

La situation est également simple avec l'inclusion de contenu audio sur la page utilisant l'élément. La plupart des attributs spécifiques à un élément sont également appliqués à l'élément, bien que ce dernier ne permette pas de définir la largeur, la hauteur ou l'affiche.


Télécharger la chanson

La norme HTML5 introduit également un élément pour indiquer des sources alternatives de données vidéo et audio, qui permet au navigateur de sélectionner le format pris en charge par l'appareil et/ou le codec. L'attribut media peut être utilisé pour indiquer le type de périphérique, afin de sélectionner la source de données requise en fonction des limitations du périphérique utilisé, et l'attribut type pour spécifier le type de données et les codecs. Gardez à l'esprit que lors de l'utilisation d'un élément, son ou ses éléments parents ne doivent pas avoir l'attribut src, sinon les sources de données alternatives seront ignorées par le navigateur.









Dans les cas où le focus d'une ressource Web nécessite que le développeur crée controle total au-dessus de interface utilisateur, à ces fins, il peut utiliser des capacités API avancées, qui fournissent un certain nombre de méthodes et d'événements grâce auxquels les scripts peuvent contrôler le processus de lecture d'un fichier multimédia. Les représentants les plus simples de ces capacités sont les méthodes play() et pause(), ainsi que la propriété currentTime, conçues pour définir la position de lecture actuelle d'un fichier multimédia au début ou à un autre emplacement souhaité. Ci-dessous un exemple de leur utilisation :



var video = document.getElementById("video");

Jouer
Pause

Partager