La norme HTML5 a été finalisée et publiée en 2014, et c'est ce que le HTML aurait dû être lorsque la première version a été lancée il y a toutes ces années. HTML 2.0 a été le premier véritable «standard», publié en 1995. Deux ans plus tard, HTML 3 a été publié. Deux ans plus tard, HTML 4.01 a été introduit et il est depuis lors le cheval de bataille d'Internet.
Le premier `` brouillon de travail '' de HTML5 a été introduit en 2008, avec une prise en charge étonnamment large du navigateur à l'époque. Le HTML5 que nous connaissons aujourd'hui est très différent du HTML du passé, et ici nous allons discuter de ce que la dernière norme a changé avec sa sortie. Depuis le lancement de HTML5, il a été largement accepté et toutes ses fonctionnalités et capacités sont désormais prises en charge par tous les principaux navigateurs. Il y a encore quelques hoquets ici et là, mais HTML5 dans l'ensemble s'est bien assimilé à l'expérience en ligne moderne.
En tant que développeur Web, vous pouvez être un ancien pro qui maîtrise les anciennes normes ou un débutant observant curieusement le développement de nouvelles normes en marge. Quoi qu'il en soit, vous devez finalement commencer la transition vers HTML5.
Infographie HTML Vs HTML5
La première étape de la transition vers HTML5 ou de l'apprentissage consiste à comprendre la différence entre l'ancienne norme et la dernière. Voici quelques différences clés entre HTML et HTML5:
-
HTML5 est une langue vivante
HTML5 est une langue vivante, un travail en cours. Il est étonnant de voir ce que HTML5 peut faire, mais il est également important de savoir que HTML5 n'est pas une version entièrement standardisée comme HTML4, qui a plus de dix ans et un standard défini, immuable.
Si vous vous lancez dans HTML5, vous devrez faire quelques mises à jour. Des attributs et éléments sont ajoutés et régulièrement modifiés chaque année. Cela dépend également de la façon dont vous utilisez les éléments riches, mais c'est certainement l'un des risques impliqués lors de l'utilisation d'un langage fluide et changeant comme HTML5.
-
HTML5 est plus simple
Bien que HTML5 présente des risques comme les mises à jour constantes, il est généralement facile de suivre les modifications et les mises à jour en raison de la syntaxe plus simple par rapport à HTML4. Par exemple, vous avez une déclaration très simple au début de la page pour la définir comme une page HTML5:
La simple déclaration Doctype est l'une des simplifications apportées à la syntaxe HTML, qui est compatible avec toutes les versions de HTML4 et jusqu'à XHTML1. Cependant, HTML5 n'est pas compatible avec SGML.
Cours recommandés
- Formation gratuite à la programmation Python
- Cours de certification de test de logiciel gratuit
- Cours de programmation Java gratuits
- Cours PERL complet
-
Le nouvel élément
HTML5 est livré avec un certain nombre de nouveaux éléments et en élimine plusieurs autres (que nous couvrirons dans un certain temps), mais l'un de ses principaux éléments ajoutés est, ce qui a eu un impact énorme sur l'utilisation d'Adobe Flash dans les sites Web. Bien que Flash soit toujours utilisé par plusieurs sites Web, HTML5 a été adopté par beaucoup et beaucoup de gens pensent qu'il rendra Flash obsolète à terme. Seul le temps en décidera; jusque-là, l'élément en cascade de HTML5 s'est avéré être une bonne alternative à Flash.
L'élément peut être utilisé pour dessiner des graphiques avec différentes formes et couleurs via des scripts, généralement JavaScript. L'élément est simplement un conteneur pour les graphiques; vous devez utiliser un script pour définir les graphiques. Par défaut, un canevas est une zone rectangulaire sans contenu ni bordures. Le marché est comme ça:
Il est important de spécifier un attribut id ainsi que la largeur et la hauteur pour définir la taille du canevas. Vous pouvez ajouter un attribut de style pour définir des bordures.
Vous pouvez également utiliser JavaScript, comme dans l'exemple suivant:
var c = document.getElementById ("myCanvas");
var ctx = c.getContext ("2d");
ctx.fillStyle = "# FF0000";
ctx.fillRect (0, 0, 150, 75);
-
Le nouveau et les éléments
Un autre gros ajout de HTML5 est le nouveau et les éléments, indiquant une nouvelle anatomie Web. Avec ces nouvelles balises, il n'est plus nécessaire d'identifier les deux éléments avec une balise.
Les spécifications définissent l'élément d'en-tête comme représentant un groupe d'aides «de navigation» ou «d'introduction». En tant que tel, l'élément peut être utilisé pour définir une introduction à une section d'une page ou à la page entière elle-même. Voici un extrait de code qui utilise l'élément d'en-tête.
Titre
Par auteur Classé dans Web 2.0
Corps du texte
Les spécifications HTML5 font référence à l'élément foot comme représentant `` un pied de page pour le contenu de section de son ancêtre le plus proche ou un élément racine de section '', et contenant généralement des informations concernant la section, comme le nom de l'auteur, les données de copyright, les liens vers les documents, etc.
Logiquement, le pied de page est placé en bas de la page Web. Mais il peut également être placé à la fin d'une section de page. Voici un exemple de codage qui utilise l'élément pied de page:
Titre du contenu
Par auteur Classé dans Web 2.0
Corps du texte.
Tags: invite de commande, boussole, CSS, Sass, terminal
10 mentions J'aime
Ici, le pied de page contient des balises de publication et la publication «J'aime Facebook».
-
Les éléments et
Maintenant, si vous aviez parcouru les exemples ci-dessus, vous auriez remarqué quelques nouveaux éléments, comme le. Cet élément, ainsi que l'élément, vous permet de marquer des sections spécifiques de votre mise en page et sont extrêmement bénéfiques pour l'optimisation des moteurs de recherche. L'élément article est spécifié comme représentant un composant autonome d'une page Web devant être réutilisable ou distribuable indépendamment. Cela peut être un journal, un message sur un forum, un article de magazine, une entrée de blog ou autre
L'élément article a généralement son propre en-tête dans un élément d'en-tête, et peut-être même un pied de page, comme vous l'avez vu dans l'exemple ci-dessus. Vous pouvez simplement considérer l'élément comme une entrée de blog ou un élément de contenu indépendant; la partie délicate consiste à identifier ce qui est indépendant. En termes simples, un contenu indépendant est un contenu qui a du sens en soi.
Un bon moyen de savoir si un élément de contenu est indépendant consiste à se demander s'il est logique dans un flux RSS. Les articles de blog et les pages statiques ont du sens, et certains sites ont des flux de commentaires. Mais un paragraphe dans l'article n'aurait aucun sens séparé du reste du contenu. Voici un extrait de code avec pied de page et balises de publication.
Titre du contenu
Publié: 2016-02-24
Corps du texte
Licence Creative Commons Attribution-Partage dans les mêmes conditions
L'élément section, selon les spécifications du W3C, représentant une «section générique» d'une application ou d'un document. Il pourrait être confondu avec la balise, alors effaçons la confusion maintenant. La balise de section est utilisée lorsque le contenu qu'il contient doit être groupé séparément du reste de la page avec un seul thème et lorsqu'il doit être considéré comme une entrée dans le plan de la page. L'élément div, cependant, est spécifié comme un «conteneur générique», ce qui signifie qu'il n'est pas séparé de la page principale elle-même, à part ses propres attributs de titre, de langue et de classe.
-
Nouveau et éléments
Les nouveaux éléments et éléments HTML5 font partie des spécifications des éléments interactifs mais font partie des éléments les moins parlés par les développeurs. Étant donné que le Web s'est transformé en pagination et documents plus simplement liés, ces éléments sont un ajout bienvenu pour une plus grande interactivité Web.
L'élément ne doit pas être confondu avec l'élément, qui est défini comme une balise de navigation HTML qui représente le bloc de navigation de page. Il contient généralement des liens permettant aux utilisateurs de parcourir les sections de la page ou vers une autre page. D'autre part, la balise de menu représente les commandes de menu pour la simplicité dans les applications de bureau et mobiles. Voici un exemple de l'élément en action:
Bonjour le monde
Pendant ce temps, l'élément est une autre façon d'organiser les images et le texte. Il est utilisé avec l'élément pour marquer les illustrations, les diagrammes et les photos. Ci-dessous est un extrait de code court qui présente les deux éléments en action.
-
Nouveau et éléments
Ce sont deux ajouts majeurs à la norme HTML5. La balise audio, comme la balise vidéo, permet aux développeurs d'intégrer de la musique et de l'audio sur leur site Web. Contrairement à la norme précédente, vous n'êtes pas limité à l'ajout de musique midi, bien qu'il existe encore quelques limitations sur le type de fichiers utilisés. La plupart des navigateurs liés à Webkit prennent en charge les fichiers MP3 normaux, mais d'autres ne prennent en charge que le format OGG. La bonne nouvelle est qu'il existe des tonnes de convertisseurs de fichiers et que vous pouvez simplement fournir deux versions du fichier audio; la bonne version sera récupérée automatiquement.
Vous pouvez utiliser la balise audio comme n'importe quel autre élément. Voici un exemple d'extrait:
La balise audio possède également un certain nombre d'attributs pour des contrôles supplémentaires, y compris des attributs d'événement, et les événements incluent des événements de fenêtre, des événements de formulaire, des événements de média et des événements de souris. L'élément vidéo a également un certain nombre d'attributs de contenu, y compris SRC, attributs globaux, boucle, contrôle, précharge et affiche. Les attributs SRC, boucle, lecture automatique et contrôles sont assez explicites et identiques pour tous les éléments multimédias, tandis que les attributs globaux sont communs à tous les éléments. Ils incluent dir, masqué, menu contextuel et plus encore.
Il existe quelques autres attributs et éléments multimédias fournis avec HTML5, comme l'élément piste qui fournit des pistes de texte pour l'élément vidéo.
-
De nouveaux formulaires
HTML5 est désormais livré avec le formulaire et les éléments. Si vous ne prévoyez pas d'utiliser de nombreux tableaux sur la page, vous pouvez également supprimer l'attribut et consulter les modifications apportées avant d'aller de l'avant.
-
Plus d' éléments et
Cela signifie que tous les attributs qui permettent aux développeurs de créer un tableau teinté parfaitement disposé, tels que la bordure, bgcolor, align, hauteur, règles et plus encore. Tous ces attributs sont remplacés par CSS.
-
Pas plus, et
C'est génial pour les développeurs qui ont travaillé au début du HTML. Les attributs frameset, frame et noframes ont été entièrement supprimés, ainsi que d'autres comme blink, basefont et plus encore. Vous devrez gérer sans utiliser de tableaux pour la mise en page. Les tableaux font toujours partie de HTML5, mais ils ne sont plus destinés aux pixels. Les spécifications indiquent que les tableaux ne doivent pas être utilisés pour les aides à la mise en page et pour contrôler la mise en page.
Conclusion
Comme vous pouvez le voir clairement, il y a beaucoup de changements dans HTML5 et vous devez l'utiliser avec soin et prudence. Vous devez également mettre à jour vos connaissances sur la langue car elle change avec le temps et obtient plus de mises à jour. Vous devez arrêter l'utilisation des éléments que HTML5 a supprimés de lui-même et utiliser les nouveaux éléments HTML5 qui resteront définitivement, comme les balises d'en-tête ou de pied de page.
Ce que vous avez vu ci-dessus est juste la version simplifiée du nombre de modifications apportées par HTML5 à son lancement. Mais soyons honnêtes ici; il n'y a rien de simple ou de lent dans la façon dont HTML5 est adopté, et la nouvelle norme ajoute de nombreuses fonctionnalités qui sont cruciales pour une expérience utilisateur moderne. Vous devez suivre le nouveau langage et également apprendre quelques CSS, qui ont un rôle plus important qu'auparavant.
La bonne chose à propos de ces changements est que, même s'ils sont importants, ils sont pour le mieux et cela est compris par toutes les parties prenantes impliquées ici. Les navigateurs seront plus puissants lorsqu'ils se dirigeront vers le cloud, avec la possibilité de gérer davantage par eux-mêmes. Avec des choses comme Ajax et avec l'intégration vidéo et audio et ainsi de suite, il sera tellement plus facile de coder dans une méthode simple et de permettre au navigateur d'assumer la lourde tâche. Par exemple, les nouveaux éléments de structure tels que la figure, le pied de page, le résumé et la section sont tous référés à la structure du document et le rendu est laissé au navigateur.
Articles Liés:-
Voici quelques articles qui vous aideront à obtenir plus de détails sur HTML vs HTML5, il vous suffit donc de parcourir le lien.
- HTML et XML
- HTML5 vs Flash Top 9 différences (avec infographie)
- HTML vs XHTML
- HTML5 vs Flash
- Différences étonnantes HTML5 vs JavaScript
- 10 conseils utiles impressionnants sur la programmation Python (astuces)