J'ai vu ce site et ce site , mais c'est beaucoup à digérer. Quelles sont les principales caractéristiques de HTML5 qui le rendent différent / meilleur que l'ancien (X) HTML / CSS ordinaire?
23
HTML5 est énorme , mais aussi génial .
À mon avis, il s'agit principalement d' interopérabilité . La spécification va et spécifie les cas de bord pairs pour essayer de s'assurer que tous les navigateurs lisent le balisage de la même manière .
En deuxième place, HTML5 propose la vidéo et l'audio, qui font exactement ce que son nom l'indique. Si vous souhaitez inclure de la vidéo ou de l'audio, HTML5 devrait réduire vos besoins en plugins.
En troisième position, HTML5 comprend de nombreuses fonctionnalités d'accessibilité et d'aide sémantique. Par exemple, des éléments comme <section>et <article>aident les machines à comprendre ce que le contenu est censé être. De nouveaux types d'entrée comme <input type=email>peuvent également être utiles pour les mêmes raisons, bien que les nouveaux types d'entrée incluent des interfaces utilisateur personnalisées qui les rendent utiles même pour les lecteurs humains "courants".
Notez que les nouvelles fonctionnalités des formulaires sont bien plus que de nouveaux types d'entrée. Il inclut également la prise en charge du texte d'espace réservé et de plusieurs autres attributs.
HTML5 comprend <canvas>, qui permet de dessiner des formes 2D (et, avec WebGL, 3D) comme des graphiques ou même de rendre des jeux.
L'ancien comportement est désormais standardisé, comme l'ancien d'Internet Explorer contentEditable.
Le DOCTYPE est enfin décent! Vous pouvez maintenant le mémoriser!<!DOCTYPE html>
La spécification de l'encodage est également plus simple, avec <meta charset=utf-8>.
Si vous souhaitez envoyer des données au client et les associer à des éléments, vous pouvez désormais le faire avec des attributs personnalisés. Par exemple, <div data-status=open>Open</div>est désormais enfin autorisé. Notez que les noms d'attributs personnalisés doivent être précédés de data-.
Vous pouvez désormais inclure SVG et MathML dans les documents HTML. Auparavant, vous ne pouviez le faire qu'avec des documents XHTML.
Parmi les multiples nouvelles fonctions et champs définis par HTML5, l'un des plus impressionnants est classList, qui vous permet de manipuler plus facilement l'attribut de classe. Au lieu d'avoir à obtenir getAttribute / setAttribute et à utiliser des hacks complexes pour déterminer quelles classes a un élément et supprimer une classe spécifique de cet élément, classList rend ces situations difficiles très simples.
Il existe également plusieurs spécifications connexes, telles que Web Workers, Web Sockets et IndexedDB, qui ne font pas vraiment partie de HTML5, mais tout le monde en parle comme si elles l'étaient. Ils sont très utiles pour tirer parti des ordinateurs multicœurs, communiquer avec les serveurs et stocker les données localement.
Quant à CSS3, il prend en charge les animations , les transitions , les bordures arrondies et le modèle de boîte flexible .
Autre nouveauté dans CSS3: les nouveaux sélecteurs, qui facilitent la mise en correspondance d'éléments spécifiques sur une page (comme uniquement les lignes impaires ou paires d'un tableau).
L'opacité, les nouvelles unités, le chapiteau et le rubis font également partie de CSS3.
Je pense que cela couvre à peu près toutes les parties importantes.
Pour suivre la prise en charge des fonctionnalités et des spécifications, vous pouvez vérifier quand puis-je l'utiliser . Il comprend des fonctionnalités HTML5 et CSS3 et des choses comme SVG, PNG, CSS2.1 et CSS2. Il suit également leur statut d'approbation (recommandation, proposition de recommandation, recommandation de candidat, projet de travail, norme IETF). FindMeByIP gère les matrices des fonctionnalités CSS3 prises en charge uniquement, par navigateur.
Des modifications et une simplification de la syntaxe ont eu lieu dans les écrous et les boulons:
<!DOCTYPE html>languageAttribut simplifié pour la<html>balise:<html lang="en">(peut toujours inclure
xmlnsetxml:langsi vous voulez la conformité XML)<meta>Tag dédié pourcharset:<meta charset="utf-8" />scriptn'accepte plus d'typeattribut, nécessitecharsetdes scripts distants:<script src="/media/js/jquery.js" charset="utf-8"></script>(les scripts en ligne ne nécessitent aucun attribut supplémentaire)HTML5 apporte la possibilité pour votre balisage d'être beaucoup plus sémantique , et globalement beaucoup plus facile à lire / écrire et à avoir des tailles de fichier plus petites. Au lieu d'avoir
<div id="nav">, vous avez juste<nav>. Cela ne semble pas beaucoup, mais ça s'additionne.De nombreux éléments de XHTML1 et HTML4 sont obsolètes. Les éléments suivants sont pas pris en charge HTML5:
<acronym>,<applet>,<basefont>,<big>,<center>,<dir>,<font>,<frame>,<frameset>,<noframes>,<s>,<strike>,<tt>,<u>et<xmp>.Plusieurs nouveaux éléments en HTML5 ne sont censés ajouter que du balisage sémantique supplémentaire et ne feront rien d'autre que fournir une alternative plus significative à
<div>. Ces nouveaux éléments sont les suivants:<article>,<section>,<aside>,<hgroup>,<header>,<footer>,<nav>,<time>,<mark>,<figure>et<figcaption>.Les formulaires HTML5 sont considérablement améliorés.
Nouveaux types d'entrée
Nouveaux attributs:
De nouveaux éléments
<keygen>,<datalist>,<output>,<meter>Et<progress>Nous pourrions entrer dans les formulaires toute la journée, mais voici quelques ressources pour mieux expliquer toutes ces nouvelles choses.
CSS3 apporte le merveilleux de Media Queries . Les requêtes média sont tellement, tellement, tellement géniales. Non disponible dans IE8 et ci-dessous, mais sera pris en charge par IE9.
CSS3 a des compteurs incrémentiels . Vous pouvez les utiliser pour numéroter automatiquement les éléments sans liste ordonnée à l'aide du
:beforepseudo-sélecteur et ducontentstyle lorsqu'une liste ordonnée ou une numérotation serait sémantiquement incorrecte. (Par exemple, numéroter les étapes de remplissage des champs du formulaire.)Si vous êtes un fan des réinitialisations CSS, une réinitialisation CSS HTML5 est disponible auprès de HTML5 Doctor. J'ai fait trois ajouts à cette réinitialisation pour mes pages personnelles:
text-rendering: optimizeLegibility;ajouté aux styles dans la définition de<body>labelinclus dans la définition avecinputetselectpuisqu'il a besoinvertical-align: middle;inset à:focuspartir de la réinitialisation CSS d' Eric Meyer ajoutés à nouveau dansUne réinitialisation concurrente appelée reset5 est disponible, mais je ne l'ai pas encore évaluée personnellement. Il est basé sur les réinitialisations d'Eric Meyer et HTML5 Doctor.
La feuille de sécurité de sécurité HTML5 suit les bogues dans les fonctionnalités HTML5 telles qu'implémentées dans divers navigateurs, et inclut également les bogues des fonctionnalités existantes qui sont également utiles pour le suivi.
Cependant, l'utilisation d'éléments HTML5 ne rend pas automatiquement votre code sémantique. Le WHATWG a écrit un article intitulé <section> n'est pas seulement un "sémantique <div>" expliquant qu'il ne s'agit pas simplement d'un élément conteneur.
Comme tout le reste de ce monde, il existe un cadre pour les applications Web HTML5 appelé SproutCore , construit par un ancien ingénieur d'Apple nommé Charles Jolley.
En plus de html5rocks.com, vous pouvez suivre html5doctor.com et html5gallery.com .
la source
Il y a la disposition de base comme le rayon de la bordure, les ombres (boîte / texte), le support rgba, etc. C'est pour cela que CSS3 est le plus connu. Plus intéressants sont la balise canvas, la balise vidéo, le stockage local, les websockets et ainsi de suite qui créeront des expériences utilisateur beaucoup plus riches en HTML / JS / CSS ordinaire. Ces fonctionnalités ont le potentiel pour être une excellente alternative pour Flash sur le web sans avoir besoin de plugins supplémentaires.
la source
Je trouve les nouveaux éléments HTML plutôt intéressants ... certains d'entre eux sont des remplacements sémantiques prometteurs pour les génériques
div. Les nouveaux éléments prometteurs comprennentarticle,section,aside,figure,nav,header, etfooter, entre autres. J'aime vraiment l'idée que des éléments sémantiques remplacent des conteneurs sans signification.Oh ouais, un élément connexe: le très simplifié
doctype- enfin quelque chose que je peux taper de mémoire!la source
( Ceci est ma réponse à une question similaire sur webapps.stackexchange.com )
Les threads Canvas et Web Worker sont pour moi les aspects les plus intéressants de HTML5. J'ai écrit quelques applications Web qui utilisent ces fonctionnalités:
GioAUTHor [sic] utilise largement le canevas pour vous permettre de tracer des chemins sur une carte, puis de trouver l'itinéraire le plus court du début à la fin (via l'algorithme de Dijkstra en JavaScript).
JavaScript Thread Demo utilise de manière limitée le canevas mais montre l'utilisation des Worker Threads, avec le code de démonstration. Il utilise également le contrôle de curseur HTML5 input type = "range" .
La prise en charge du navigateur HTML5 est aussi variée que les navigateurs eux-mêmes. Il y a un bon site (en HTML5, natch) sur la préparation HTML5 qui montre qui est prêt pour quoi.
la source
En ce qui concerne CSS3 - regardez sur http://css3please.com/ pour voir ce que vous pouvez faire.
Plus votre navigateur est récent, plus vous pourrez voir les effets.
la source
Les balises audio et vidéo permettent de présenter des médias sans avoir besoin d'un plugin comme Flash ou Silverlight, et fonctionnent surtout sur les navigateurs iPhone et iPad. Il y a des problèmes à régler concernant les codecs et la gestion des droits numériques.
la source
Jeremy Kieth vient de publier un très bon livre sur le sujet, "HTML5 pour les concepteurs Web". vous voudrez peut-être vérifier cela.
Il s'agit du premier livre de A Book Apart. Je le recommande vivement aux concepteurs intermédiaires à avancés. A ++
http://books.alistapart.com/
REMARQUE : vous devrez peut-être attendre pour obtenir une copie papier
la source
Cela ne donne pas d'opinion sur l'importance, mais c'est un delta utile entre les HTML 4 et 5.
Mes 2 ¢ sur les principales améliorations:
<section>et le nouvel algorithme décrivant l'en-tête (j'ai dit que c'était juste mon 2 ¢)<input type=email>data-*les attributs<audio>et<video>la source
Parce que personne ne l'a encore dit:
HTML5 est idéal pour ce que tout le monde a répertorié, mais il comprend également la géolocalisation standard, les travailleurs Web, le socket Web, le canevas et le stockage local. Tous ces outils font partie de la spécification HTML5, qui utilise beaucoup de JavaScript dans les coulisses pour y arriver.
la source