Quoi de neuf dans HTML5 qui n'était pas dans HTML4 ?
Et au fond, tout est nouveau. La spécification HTML5 apporte de nombreux changements de différents niveaux et importances. Les changements fondamentaux peuvent être divisés en plusieurs blocs :
Sémantique du langage. HTML5 introduit un certain nombre de nouvelles balises sémantiques qui vous permettent d'organiser de manière plus significative la structure interne des pages Web.
Regardons les plus célèbres d'entre eux :
navigation- sert à créer un panneau de navigation ;
de côté- est une balise unificatrice, la plus adaptée pour mettre en évidence une barre latérale. Il peut inclure à la fois des blocs de navigation et d’autres éléments non liés à la navigation (bannières publicitaires, photo de l’auteur, boutons de réseaux sociaux, etc.) ;
section- également un tag fédérateur. De plus, il peut jouer différents rôles : soit diviser la page en plusieurs zones thématiques, soit diviser l'article lui-même sur la page en sections distinctes ;
article- sert à diviser la page en articles distincts. Les balises de section et d’article présentent un certain nombre de fonctionnalités intéressantes. Par exemple, vous pouvez désormais utiliser plusieurs fois en toute sécurité le titre H1 de premier niveau sur une même page, ce qui était auparavant inacceptable ;
hgroupe- la balise est conçue pour regrouper les titres de page en une seule unité logique ;
vidéo- sert à une simple insertion vidéo dans les pages du site Web ;
audio- également conçu pour une insertion simple de contenu multimédia sur les pages d'un site Web ;
toile- crée une zone dans laquelle, à l'aide de JavaScript, vous pouvez dessiner divers objets, afficher des images, les transformer et modifier leurs propriétés.
Vous pouvez découvrir d'autres balises sur htmlbook.ru.
Multimédia. HTML5 prend désormais en charge le contenu multimédia (lecteur audio et vidéo) dans le balisage HMTL prêt à l'emploi - avec l'API correspondante pour contrôler la lecture et les codecs.
Graphique. Travailler avec des graphiques est devenu beaucoup plus facile grâce à la balise canvas et à une API JavaScript spéciale pour travailler avec. De plus, HTML5 inclut officiellement la balise svg, qui permet d'implémenter des graphiques vectoriels décrits par le standard Web correspondant (SVG, Scalable Vector Graphics).
Formulaires Web. Nouveaux éléments de formulaire Web : types et attributs qui vous permettent d'étendre les capacités des formulaires traditionnels avec des outils intégrés, sans utiliser de bibliothèques supplémentaires pour valider les données d'entrée et les info-bulles dans les formulaires.
API JavaScript. Une API pour travailler avec des graphiques et du multimédia, de nouvelles fonctionnalités avancées pour déplacer des objets et travailler avec l'historique des transitions (API History), ainsi qu'un certain nombre de petites choses, comme la possibilité de rendre le contenu modifiable directement à l'emplacement actuel à l'aide de Content Attributs modifiables.
Bien plus. Communications réseau avancées. Stockage des données considérablement amélioré. Outils Web Worker pour exécuter des processus en arrière-plan. Interface WebSocket pour établir une connexion persistante entre une application résidente et le serveur. Vitesse accrue de sauvegarde et de chargement des pages. Prend en charge CSS3 pour le contrôle de l'interface utilisateur, ce qui rend le contenu HTML5 centré.
Il est donc évident que le format HTML5 démontre une approche fondamentalement nouvelle pour créer des graphiques efficaces et mémorables, des éléments interactifs et d'autres composants de conception et d'interface Web de haute qualité. Cela donne un avantage incontestable : la possibilité d'éviter les éléments flash, qui créent certaines difficultés de chargement des pages. Dans le même temps, le chargement de ces pages prend encore un certain temps. De plus, pour fonctionner correctement avec HTML5, vous avez besoin d'un ordinateur doté de la capacité système appropriée, et les développeurs de navigateurs sont trop paresseux pour ajouter une prise en charge complète de toutes les fonctionnalités HTML5.
Traduction
Les technologies Web évoluent constamment. Chaque jour, de nouveaux sites sont créés pour étendre les capacités du HTML. HTML 4 existe depuis près d'une décennie, mais les éditeurs recherchent de nouvelles façons d'étendre les fonctionnalités du format. Cependant, la variété des langages et des navigateurs limite certaines de ses capacités.
Pour offrir aux développeurs un produit plus flexible et interopérable qui rend les projets plus interactifs et intéressants, HTML 5 introduit et étend une gamme de fonctionnalités, notamment les contrôles de formulaires, les API, le multimédia, la structure et la sémantique.
Les travaux sur HTML 5 ont commencé en 2004. Des développements sont actuellement réalisés dans le cadre d'un effort conjoint entre le W3C HTML WG et le WHATWG. De nombreuses entreprises bien connues sont impliquées dans le développement, notamment : Apple, Mozilla, Opera et Microsoft, ainsi qu'un certain nombre d'autres organisations et individus ayant des intérêts et des antécédents variés.
Notez que la spécification est encore en cours de développement et est loin d’être complète. Par conséquent, il est possible que les fonctionnalités mentionnées dans cet article changent à l’avenir. Cet article a pour but de décrire les nouveautés du format HTML version 5.
Structure
HTML 5 introduit toute une série de nouveaux éléments qui simplifient grandement la structure des pages. La plupart des pages HTML4 contiennent un certain nombre de structures communes, telles que des en-têtes et des colonnes, et aujourd'hui, il devient une tradition de les mettre en évidence à l'aide d'éléments div, en leur attribuant une classe ou un identifiant.
L'illustration montre une disposition typique à 2 colonnes utilisant des éléments div, en leur attribuant une classe ou un identifiant. La structure contient un en-tête de page, un pied de page, un menu de navigation et un contenu divisé en 2 colonnes -
L'utilisation d'éléments div est préférentielle car la version actuelle de HTML 4 ne dispose pas de sémantique pour décrire ces parties plus spécifiquement. HTML 5 résout ce problème en introduisant de nouveaux éléments, chacun ayant son propre nom.
Le code du document ressemble à ceci :
...
...
...
...
...
L’utilisation de ces éléments présente plusieurs avantages. Lorsqu'il est utilisé en combinaison avec les en-têtes d'éléments (h1 - h6), cela permet d'introduire une sous-section avec un en-tête dans chaque niveau, contrairement aux 6 niveaux possibles dans la version précédente de HTML. La spécification comprend un algorithme détaillé pour générer des limites. Ces éléments peuvent être utilisés comme outils de création et de navigation pour générer une table des matières et aider les utilisateurs à naviguer dans le document.
Par exemple, la structure suivante est divisée en niveaux avec des éléments h1 imbriqués :
Niveau 1
Niveau 2
Niveau 3
Notez que pour une compatibilité maximale avec les différents navigateurs, vous pouvez utiliser différents niveaux de titres, tels que h2, h3, etc.
En définissant l'objectif des sections sur une page à l'aide d'éléments de section spécifiques, cette technologie peut aider l'utilisateur à naviguer plus facilement dans la page. Par exemple, un utilisateur peut facilement naviguer vers une section de menu ou passer rapidement d'un article à l'autre sans que le développeur ait à créer un tel lien de saut. Les développeurs peuvent également se réjouir car en remplaçant les éléments div par les éléments correspondants, le code source sera plus simple et plus propre.
Élément d'en-tête représente le titre de la page. Cette section peut contenir non seulement le titre lui-même, mais également des sous-titres qui aideront l'utilisateur à mieux comprendre le contenu de la page.
Un aperçu de HTML 5
Par Lachlan Hunt
Exemple de blog
Insérez le slogan ici.
Élément de pied de page représente le « pied de page » de la page. Cette partie de la page contient généralement un lien vers les droits d'auteur, les compteurs, etc.
élément "nav"- définit la section de navigation du site :
élément "à part" définit une section indirectement liée au contenu de la page, le plus souvent utilisée comme application.
HTML5 est une nouvelle version du langage de balisage le plus populaire.
Depuis plus de 10 ans, le langage de balisage hypertexte HTML n'a pratiquement pas changé, ce qui était très étrange, compte tenu de l'énorme vitesse de développement des technologies Web, et maintenant, enfin, le changement s'est produit et est apparu HTML5.
DANS HTML5 plusieurs nouveaux éléments et attributs ont été ajoutés et plusieurs anciens ont été supprimés (par exemple, fonte Et centre).
Les éléments suivants ont été ajoutés :
1) en-tête.
2) pied de page.
4) section.
5) article.
6) de côté.
7) chiffre.
8) dialogue.
9) m (marque).
10) temps.
11) mètre.
12) progrès.
13) vidéo.
14) audio.
15) détails.
16) grille de données.
17) menu.
18) commande.
Tout le reste reste inchangé. Autrement dit, cela ne posera aucun problème, à condition que vous connaissiez le modèle standard. En fait, tout reste pareil, seules de nouvelles fonctionnalités ont été ajoutées.
Grâce aux nouveautés HTML5 Vous pouvez grandement faciliter le travail des webmasters en simplifiant le même balisage.
Vous vous demandez sûrement : « Est-ce que ça marchera ? HTML5 avec des navigateurs plus anciens ?" La réponse est : "Bien sûr, oui, mais les nouveaux éléments, bien sûr, ne seront pas affichés." En d'autres termes, tout le monde verra les nouvelles pages, mais ceux qui disposent de versions de navigateur modernes verront un message un peu plus et différemment.
Je suis sûr que dans un avenir proche HTML5 pourra voir le même pourcentage d’utilisateurs qu’il voit actuellement HTML4, qui a déjà plus de 10 ans.
Et sur l'utilisation de nouvelles opportunités HTML5 nous vous en parlerons dans les articles suivants.
Avec la sortie HTML5, de nombreuses nouvelles fonctionnalités ont été ajoutées au HTML. Et ce qui est encore mieux, c'est que certains navigateurs prennent déjà en charge certaines de ces fonctionnalités tandis que d'autres sont encore en train de s'y rapprocher. Vous pouvez suivre ces fonctionnalités ajoutées aux navigateurs sur cette page.
1. Nouveaux Doctype et Charset.
L'un des avantages du HTML5 est sa simplicité.
Oui, c'est tout. Littéralement deux mots. Cette simplicité est probablement due au fait que HTML5 est autonome plutôt que de faire partie de SGML.
Charset est également très simple, il utilise utf-8 et est spécifié de la même manière, littéralement avec une seule balise :
2. Nouvelle structure
HTML5 comprend qu'une page Web a une structure, tout comme un livre par exemple. Il s'agit généralement de la navigation, du contenu lui-même, du menu latéral (barre latérale) et de l'en-tête. Et HTML5 fournit des balises pour tous ces éléments.
– définit les sections de page
– définit le titre de la page
– définit l’article ou le contenu principal de la page
– définit l’image, annotation de l’article
3. Nouveaux éléments intégrés.
Ces nouveaux éléments définissent quelques concepts de base et représentent des éléments de page :
– pour indiquer le contenu
– pour indiquer certaines dimensions, comme l’espace disque
4. Nouveau support pour les pages dynamiques
HTML 5 a été conçu pour simplifier les tâches des développeurs Web, c'est pourquoi de nombreuses nouvelles fonctionnalités prennent en charge les pages dynamiques.
Menu contextuel – HTML 5 prendra en charge la création et l'utilisation de menus contextuels dans les pages Web et les applications
Attribut asynchrone - Cette balise indique au navigateur que le script doit être chargé de manière asynchrone afin de ne pas ralentir le chargement et le rendu du reste de la page.
– contient des informations détaillées sur l’élément.
– crée une table créée à partir d'une base de données ou d'une autre source de page dynamique
– définit les actions qui doivent se produire lorsqu'un élément dynamique est activé
5. Nouveaux types de formulaires
HTML5 prend en charge tous les anciens types de formulaires, mais de nouveaux ont également été ajoutés :
dateheure
dateheure-local
mois
nombre
gamme
e-mail
6. Nouveaux éléments
Il y a quelques nouveaux éléments en HTML5 :
Cela peut vous permettre d'ajouter des images ou des graphiques aux info-bulles, ou simplement de créer des graphiques dynamiques sur la page à la volée.
7. Éléments supprimés
Il existe également des éléments HTML4 qui ne peuvent plus être utilisés en HTML5. La plupart d’entre eux sont obsolètes depuis longtemps, de telles actions ne sont donc pas surprenantes.
