HTML

HTML5 Les bases (1 sur 4)

La prochaine version de HTML a suscité l'enthousiasme de certains, le dégoût des autres et la confusion / peur de tous les autres. Que vous l’aimiez ou le détestiez, HTML 5 définira bientôt la façon dont vous construisez des sites Web. Cet article est le premier d'une série de quatre articles qui présente HTML5 et ses fonctionnalités de base et explique les principales différences entre HTML4.01 et XHTML 1.0 afin que vous puissiez commencer à vous préparer, ainsi que vos sites, à la transition. Au cours de la semaine prochaine, nous nous concentrerons sur trois domaines principaux:

1. Nouveaux éléments
2. Changements sémantiques
3. Le faire fonctionner aujourd'hui

Cet article présente brièvement chacun de ces sujets pour vous préparer aux articles approfondis à venir.

Apis

Avant de plonger dans les sujets énumérés ci-dessus, je voudrais prendre quelques instants pour examiner une fonctionnalité extrêmement importante que nous ne couvrirons pas dans son propre article dédié: les nouvelles API. HTML5 inclut plusieurs nouvelles API intégrées à certains des nouveaux éléments HTML5 (que nous examinerons plus tard). Voici la liste complète directement de W3.org:

  • API de dessin 2D pouvant être utilisée avec le nouvel élément de toile.
  • API pour la lecture de fichiers vidéo et audio pouvant être utilisés avec les nouveaux éléments vidéo et audio.
  • Une API qui active les applications Web hors connexion.
  • API qui permet à une application Web de s'inscrire pour certains protocoles ou types de média.
  • Modification de l'API en combinaison avec un nouvel attribut global contenteditable.
  • API glisser-déposer en combinaison avec un attribut déplaçable.
  • API qui expose l'historique et permet aux pages de s'y ajouter pour éviter de casser le bouton Précédent.
  • Messagerie entre documents.

    • Comme vous pouvez le constater, l'objectif principal de ces API est de faciliter la création d'applications Web. Notez que la troisième API active les applications Web hors connexion. C’est une excellente nouvelle pour les utilisateurs et les programmeurs, car elle permet d’utiliser de riches applications Internet dans un environnement hors ligne. Vous pouvez vous attendre à voir un grand nombre de vos applications préférées suivre Gmail en introduisant un accès hors connexion.

    Nouveaux éléments en HTML5

    HTML5 introduit pas mal de nouveaux éléments. L'article deux de cette série en examinera quelques-uns en détail, mais pour l'instant, voici la liste complète avec une brève description (source: w3schools):


  •  Définit le contenu externe

  •  Définit un contenu en dehors de l'article dans lequel il est placé
  • Définit le son, tel que la musique ou d'autres flux audio
  • Définit un graphique, tel que des graphiques ou d'autres images
  • Définit un bouton de commande, comme un radiobutton, une case à cocher ou un bouton
  • Définit une liste de données sélectionnables. La grille de données est affichée sous forme d'arborescence
  • Définit une liste de données sélectionnables. Utilisez cet élément avec l'élément input pour créer une liste déroulante de la valeur de l'entrée
  • Définit un conteneur pour le modèle de données. Cet élément doit avoir des éléments enfants pour définir un modèle: elements

  •  Définit les détails d'un élément, que l'utilisateur peut voir et cliquer pour masquer
  • Définit une boîte de dialogue, telle qu'une conversation
  • Définit le contenu incorporé, tel qu'un plug-in
  • Définit une source pour les événements envoyés par un serveur

  •  Utilisé pour regrouper certains éléments

  •  Définit le pied de page d'une section ou d'un document. Contient généralement le nom de l'auteur, la date à laquelle le document a été écrit et / ou les informations de contact.

  •  Définit l'en-tête d'une section ou d'un document
  • Définit le texte marqué. Utilisez la balise si vous souhaitez mettre en évidence des parties de votre texte.
  • Définit une mesure. Utilisé uniquement pour les mesures avec une valeur minimale et maximale connue

  •  Définit une section de liens de navigation
  • Définit un point d'imbrication dans un modèle de données pour les éléments enfants. Utilisé avec les éléments et
  • Définit différents types de sortie, tels que la sortie écrite par un script
  • Définit le travail en cours. Utilisez l'élément progress pour afficher la progression d'une fonction qui prend du temps en JavaScript.
  • Définit les règles pour la mise à jour d'un modèle de données. Utilisé avec les éléments et

  • Définit les sections dans un document. Tels que les chapitres, les en-têtes, les pieds de page ou toute autre section du document
  • Définit les ressources média pour les éléments média, tels que et
  • Définit une heure ou une date, ou les deux
  • Définit une vidéo, telle qu'un clip vidéo ou d'autres flux vidéo

    • Bien que nous n’ayons pas le temps d’examiner chacune d’elles en détail, nous examinerons quelques-unes des plus importantes, telles que et.

    Changements sémantiques

    C'est la partie qui devrait fondamentalement changer la façon dont vous structurez vos sites. La liste ci-dessus contient six nouveaux éléments structurels qui contribueront à la cohérence du cadre de base des sites sur le Web. Ces six éléments sont:

    1.

    2.

    3.

    4.

    5.

    6.

    Considérez-les comme le remplacement de la plupart des DIV que vous utilisez actuellement pour structurer votre site. Donc au lieu de?

    , vous aurez simplement?

    . Remarquez que j'ai inclus? Div class? au lieu de? div id.? En effet, ces éléments sont reproductibles dans une page de la même manière que les classes. Nous étudierons cela plus tard cette semaine à l'article trois.

    Faire fonctionner HTML5 aujourd'hui

    Ne soyez pas trop excité par ce titre. Comme tout bon développeur Web le sait, tous les principaux navigateurs Web diffèrent encore (certains sont pires que d'autres, vous savez de qui je parle) en ce qui concerne le support de HTML4.01 et XHTML 1.0. Maintenant, imaginez ce que cela signifie pour un changement aussi important et nouveau que HTML5. Bien que les méga-développeurs tels que Google insistent sur l’acceptation du HTML5, celui-ci ne sera pas pris en charge de manière générale pendant un certain temps. Cependant, cela ne signifie pas que vous ne devriez pas commencer à vous préparer au grand changement aujourd'hui, ni à aucune astuce astucieuse pour vous permettre de commencer à jouer avec HTML5 tout de suite. Dans l'article quatre, nous verrons comment vous pouvez commencer votre voyage HTML5 le plus tôt possible.

    Conclusion

    Cet article présente brièvement les nouveaux éléments et API inclus dans HTML5.Nous avons expliqué comment vous devriez être enthousiasmé par les changements qu'apportera HTML5 aux applications Web de demain. Nous avons également eu un aperçu des changements sémantiques à venir et de la nouvelle structure que nos pages Web devraient adopter à l'avenir. Enfin, nous avons appris que même si le HTML5 n’était pas encore prêt pour les masses, nous pouvions tout de même mettre nos doigts de développeurs sales à l’état et commencer à expérimenter aujourd’hui. Revenez souvent ici la semaine prochaine pour approfondir chacun de ces sujets!