Avec la sortie HTML5, de nombreuses nouvelles fonctionnalités ont été ajoutées à HTML. Et ce qui est encore mieux, certains navigateurs supportent déjà certaines de ces fonctionnalités alors que d'autres s'y dirigent. Vous pouvez suivre l'ajout de ces fonctionnalités aux navigateurs sur cette page.
1. Nouveau Doctype et Charset.
L'une des forces de HTML5 est sa simplicité.
Oui c'est tout. Littéralement deux mots. Cette simplicité est probablement due au fait que HTML5 existe par lui-même et ne reste pas une partie de SGML.
Charset est également très simple, il utilise utf-8 et est défini de la même manière, littéralement avec une balise :
2. Nouvelle structure
HTML5 comprend qu'une page Web a une structure, tout comme, par exemple, un livre. 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 la page
- définit le titre de la page
– définit l'article ou le contenu principal de la page
– définit une image, un résumé d'article
3. Nouveaux éléments intégrés.
Ces nouveaux éléments définissent certains concepts de base et désignent des éléments de page :
- pour indiquer le contenu
– pour indiquer certaines mesures, 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, il existe donc de nombreuses nouvelles fonctionnalités pour prendre 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 qu'il ne ralentisse pas le 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 lorsque l'é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 :
date-heure
datetime-local
mois
nombre
gamme
e-mail
6. Nouveaux éléments
Il y a quelques nouveaux éléments dans 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 lors de vos déplacements.
7.Éléments supprimés
Il existe également des éléments HTML4 qui ne peuvent plus être utilisés dans HTML5. La plupart d'entre eux sont obsolètes, de telles actions ne sont donc pas surprenantes.
Traduction
Les technologies Web évoluent constamment. De nouveaux sites Web sont créés chaque jour qui étendent la puissance 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 langues et des navigateurs limite certaines de ses capacités.
Pour offrir aux développeurs un produit plus flexible et interopérable et pour rendre les projets plus interactifs et intéressants, HTML 5 introduit et étend une gamme de fonctionnalités, notamment les contrôles de formulaire, 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 en cours dans le cadre d'un effort de collaboration 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 différents.
Notez que la spécification est encore en cours de développement et est loin d'être complète. En tant que tel, il est possible que toutes les fonctionnalités mentionnées dans cet article soient modifiées à l'avenir. Cet article a pour but de décrire les nouveautés du format HTML version 5.
Structure
HTML 5 introduit un certain nombre de nouveaux éléments qui simplifient considérablement la structure de la page. La plupart des pages HTML4 contiennent une série de structures communes, par exemple, les en-têtes et les pieds de page (en-tête et pied de page) et les colonnes, et il devient aujourd'hui une tradition de les mettre en évidence à l'aide d'éléments div, en lui attribuant une classe ou un identifiant.
L'illustration montre une mise en page typique à 2 colonnes utilisant des éléments div, avec une classe ou un identifiant qui leur est attribué. La structure contient - le "header" de la page, le pied de page, le menu de navigation et le contenu, divisés en 2 colonnes -
L'utilisation d'éléments div est préférable, car dans l'actuel Versions HTML 4 n'a pas la sémantique pour décrire ces parties plus spécifiquement. HTML5 ce problème résout en introduisant de nouveaux éléments, chacun ayant son propre nom distinct.
Le code du document ressemble à ceci :
...
...
...
...
...
Il y a plusieurs avantages à utiliser ces éléments. Lorsqu'il est utilisé en combinaison avec des en-têtes d'éléments (h1 - h6), cela permet d'intégrer une sous-section avec un en-tête à chaque niveau, par opposition 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 bordures. 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 un document.
Par exemple, la structure suivante est superposée avec des éléments h1 imbriqués :
Niveau 1
Niveau 2
Niveau 3
Notez que pour une compatibilité maximale avec différents navigateurs, vous pouvez utiliser différents niveaux de titre comme h2, h3, etc.
En définissant l'objectif des sections d'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 naviguer rapidement d'un article à l'autre sans qu'un développeur ait besoin de créer un tel lien de navigation. Les développeurs peuvent également se réjouir, car en remplaçant les éléments div par les éléments appropriés, le code source sera plus simple et "plus propre".
L'élément "en-tête" représente le titre de la page. Cette section peut contenir non seulement le titre en tant que tel, mais également tous les 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'élément "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 liée de manière tangentielle au contenu de la page, le plus souvent utilisée comme pièce jointe.
Introduction
HTML 4 est avec nous depuis environ 10 ans. Pendant ce temps, il n'y a pas eu de mesures sérieuses pour l'améliorer. Bien sûr, XHTML est apparu, cependant, il ne fait que resserrer les règles et vous oblige à écrire du code de mieux en mieux. En même temps, vous vous souciez pleinement du respect de la norme. HTML 5 est conçu pour faire plus. Il ajoute une série d'innovations très importantes.
Le travail sur HTML5 a commencé en 2004, mais ce n'est que maintenant (2009) qu'il commence à susciter un intérêt sérieux. La prise en charge des navigateurs augmente et l'élément que j'aime le plus (CANVAS) est pris en charge par 4 des 5 navigateurs les plus courants. Cependant, il n'est pas tout à fait réaliste, bien que possible, d'utiliser HTML 5, puisque nouvelle norme non pris en charge dans MSIE.
Alors quoi de neuf dans HTML 5 ?
Étiqueter
Étiqueter
Menus contextuels
HTML5 fournit également une méthode pour ajouter facilement des menus contextuels à une page Web. Peut-être que de tels menus ne sont pas très utiles pour les sites réguliers. Mais pour les applications dans lesquelles de nombreuses fonctions aimeraient être regroupées et affichées de manière contextuelle, cette fonctionnalité est parfaite.
Nouveaux éléments structurels
Le HTML 4 étant peu structuré, de nouveaux éléments ont été ajoutés à la 5e version de la spécification pour corriger cette lacune :
section ou paragraphe.
- en-tête de page (à ne pas confondre avec )
- cette balise peut inclure, par exemple, un article de blog.
- peut être utilisé, par exemple, pour créer des diagrammes.
Nouveaux éléments en ligne
La norme HTML5 introduit de nouveaux éléments qui vous permettent de sélectionner des fragments de texte contenant des heures et des nombres d'une manière particulière :
- marque un morceau de texte. Vous pouvez, par exemple, marquer les termes trouvés dans la liste des résultats de la recherche.
- pour représenter des nombres dans une plage spécifique. Il peut avoir différents attributs : valeur, min, max, bas, haut et optimal.
Nouveaux types de champs de saisie
HTML5 ajoute un certain nombre de nouveaux types pour les champs de saisie :
date-heure
datetime-local
mois
nombre
gamme
e-mail
Certains d'entre eux sont largement utilisés dans les interfaces utilisateur des applications de bureau. Et, très probablement, ils seront déjà bien connus de tous vos utilisateurs.
Éléments obsolètes
Les éléments HTML suivants sont obsolètes :
acronyme
applet
police de base
centre
cadre
jeu de cadres
estindex
pas de cadres
pas de script
frapper
Syntaxe pour spécifier le codage
La syntaxe pour paramétrer l'encodage d'un document en HTML5 est maintenant très simple :
Innovations interactives
Plusieurs innovations qui rendront la création de sites et d'applications web plus facile et plus agréable :
- des informations supplémentaires sur quelque chose. Par exemple, cette balise peut être utilisée dans les navigateurs pour implémenter une info-bulle. La balise peut avoir un attribut ouvert indiquant si le contenu de la balise sera initialement affiché à l'utilisateur ou non.
- Contrairement aux tableaux traditionnels (qui sont conçus pour être statiques), cette balise peut être utilisée pour représenter un ensemble de données interactif. Par exemple, pour un tableau avec sélection de lignes ou de colonnes, édition de données en ligne, tri, etc.
Nouvelle définition de type de document (DTD)
En HTML5, il est beaucoup plus simple de déclarer une DTD :La déclaration DTD est devenue plus jolie et, je suppose, plus facile à retenir. Ceci est probablement dû au fait que HTML n'est plus associé à SGML.
HREF facultatif dans les liens
L'attribut href est désormais facultatif car les liens peuvent être utilisés conjointement avec des scripts. Il sera probablement utile dans les applications Web.
attribut asynchrone
L'attribut indique au navigateur que le bloc de script peut être exécuté de manière asynchrone, au lieu d'attendre que la page soit complètement chargée.
Conclusion
Naturellement, tous les navigateurs ne prendront pas en charge l'intégralité de la norme (je pense que le lecteur s'est maintenant souvenu du MSIE "favori"). Mais le soutien viendra avec le temps. Et les nouveaux éléments HTML 5 ont été conçus en tenant compte de la situation actuelle. D'autre part, la plupart des navigateurs prennent déjà partiellement en charge la spécification. Ainsi, par exemple, la balise
Donc, nous l'attendons avec impatience.
Pour les personnes intéressées, la spécification HTML 5 peut être trouvée sur le lien suivant -
Alors, quoi de neuf dans HTML5 qui n'était pas dans HTML4 ?
Et fondamentalement, tout est nouveau. La spécification HTML5 apporte avec elle de nombreux changements de niveaux et d'importance variables. Les changements fondamentaux peuvent être divisés en plusieurs blocs :
La sémantique du langage. HTML5 a introduit un certain nombre de nouvelles balises sémantiques pour aider à organiser la structure interne des pages Web de manière plus significative.
Considérez le plus célèbre d'entre eux:
navigation- utilisé pour créer une barre de navigation ;
de côté- est une balise fédératrice, 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 qui ne sont pas de 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 directement sur la page en sections distinctes ;
article- sert à diviser la page en articles séparés. Les balises de section et d'article ont un certain nombre de fonctionnalités intéressantes. Par exemple, vous pouvez désormais utiliser en toute sécurité le titre H1 de premier niveau sur la même page plusieurs fois, ce qui était auparavant inacceptable ;
hgroupe- la balise est conçue pour regrouper les titres des pages en une seule unité logique ;
vidéo- sert à l'insertion simple de vidéo sur les pages du site ;
l'audio- également conçu pour faciliter l'insertion de contenu multimédia sur les pages du site ;
toile- crée une zone dans laquelle, à l'aide de JavaScript, vous pouvez dessiner différents objets, afficher des images, les transformer et modifier les propriétés.
Vous pouvez en savoir plus sur le reste des balises sur htmlbook.ru.
Multimédia. HTML5 prend désormais en charge le contenu multimédia (lecteur audio et vidéo) dans le balisage HTML prêt à l'emploi - avec l'API appropriée pour contrôler la lecture et les codecs.
Arts graphiques. Travailler avec des graphiques est devenu beaucoup plus facile grâce à la balise canvas et à une API JavaScript spéciale pour travailler avec elle. La balise svg est également officiellement incluse dans HTML5, qui vous permet d'intégrer graphiques vectoriels, décrit 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, les invites de formulaire.
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 (History API), ainsi qu'un certain nombre de petites choses, comme la possibilité de rendre le contenu modifiable directement à l'endroit actuel en utilisant Contenu Attributs modifiables.
Beaucoup plus. Amélioration des communications réseau. Stockage des données considérablement amélioré. Outils Web Ouvrier d'exécution Processus en arrière-plan. Interface WebSocket pour établir une connexion persistante entre une application résidente et un serveur. Amélioration de la vitesse d'enregistrement et de chargement des pages. Prise en charge de CSS3 dans le contrôle de l'interface utilisateur, ce qui garantit l'orientation du contenu HTML5.
Ainsi, il est évident que le format HTML5 démontre une approche fondamentalement nouvelle pour créer des graphiques spectaculaires et mémorables, des éléments interactifs et d'autres composants de conception et d'interface Web de haute qualité. Cela donne un avantage indéniable - la possibilité de refuser les éléments flash, qui créent certaines difficultés lors du chargement des pages. Dans le même temps, un certain temps est nécessaire pour charger ces pages. De plus, pour fonctionner correctement avec HTML5, vous avez besoin d'un ordinateur avec 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.
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 certains nouveaux éléments et attributs ont été ajoutés, et certains anciens ont été supprimés (par exemple, Police de caractère Et centre).
Les éléments suivants ont été ajoutés :
1) entête.
2) bas de page.
4) section.
5) article.
6) de côté.
7) Les figures.
8) dialogue.
9) m (marque).
10) temps.
11) mètre.
12) progrès.
13) vidéo.
14) l'audio.
15) détails.
16) grille de données.
17) menu.
18) commande.
Tout le reste est resté inchangé. Autrement dit, il n'y aura aucun problème avec, à condition que vous connaissiez la norme. En fait, tout est resté comme avant, seules de nouvelles fonctionnalités ont été ajoutées.
Grâce aux nouveautés HTML5 Vous pouvez rendre le travail des webmasters beaucoup plus facile 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 : "Oui, bien sûr, mais les nouveaux éléments ne seront bien sûr pas affichés." Ou en d'autres termes, tout le monde verra les nouvelles pages, mais les propriétaires de versions modernes de navigateurs verront un peu plus et différemment.
Je suis sûr que bientôt HTML5 pourront voir le même pourcentage d'utilisateurs qu'ils voient actuellement HTML4 qui a plus de 10 ans.
À propos de l'utilisation des nouvelles fonctionnalités HTML5 nous vous en parlerons dans les articles suivants.
sushiandbox.ru Mastering PC - Internet. Skype. Réseaux sociaux. Cours sur Windows.
