www.41mag.

fr
24 Astuces et Techniques HTML5 à connaitre
2012-03-01 19:03:32 Enzo

Le web évolue rapidement, très rapidement. Si vous ne faites pas attention, vous allez vite être dépassé. Voici donc un petit rappel sur l'évolution du HTML5 et ses mises à jour. Ce tutoriel est une liste de 24 Astuces et
techniques essentiel et à connaitre en HTML5. Article complémentaire : 20 Conseils et astuces pour coder proprement ses pages en HTML5

1. Nouveau Doctype

Il est désormais inutile de mémoriser un ligne de code a rallonge. Le HTML5 possède un doctype simplifié. En savoir plus sur le doctype en HTML5.

En HTML5, le doctype n'est pas obligatoire ni nécessaire. Cependant, il est utilisé pour les anciens navigateurs nécessitant l'indication du doctype. Les navigateurs ne comprennant pas ce doctype rendre le balisage
contenu en mode standard. Donc, n'hésitez pas à jouer la prudence, et d'ajouter ce nouveau doctype HTML5.

2. L'attribue Type est désormais obsolète pour les balises <link> et <script>.

L'attribut Type n'est plus nécessaire. Il est implicite que ces deux balises se référe respectivement à des feuilles de style et de scripts. En tant que tel, nous pouvons supprimer l'attribut de type.

3. Guillemets ou pas ?

Telle est la question. Rappelez-vous, le HTML5 n'est pas le xHTML. Vous n'avez pas à encadrer la valeur de vos attributs entre guillemets si vous ne le souhaitez pas. Vous n'êtes pas obliger de fermer vos éléments.
Cela dit, il n'y a rien de mal à le faire, si vous vous sentez plus à l'aise de le faire. (cela est vrai pour moi)
Début de mon paragraphe

faîtes-vous votre propre idée. Si vous préférez un document plus structuré, continuez avec les guillemets.

4. La nouvelle sémantique de l'en-tête et du pied de page

les calques Div, par nature, n'ont pas de structure sémantique - même si un id lui est appliquée. Maintenant, avec le HTML5, nous avons accès aux balises <header> et <footer>.

...

...

Il est tout à fait possible d'avoir plusieurs en-têtes et pieds de page dans vos projets.

5. Internet Explorer et le HTML5

Internet Explorer requiert quelque notification dans le but de comprendre les éléments HTML5 nouvelles. Tous les éléments qu'il ne reconnait pas, par défaut, vont avoir un affichage en ligne. Afin de s'assurer que les
nouveaux éléments HTML5 soit restituer correctement comme des éléments de niveau bloc, il est encore nécessaire de lui ajouter des styles.
header, footer, article, section, nav, menu, hgroup {
display: block;
}

Malheureusement, Internet Explorer saura toujours ignorer ces consignes de style, parce qu'il n'a aucune idée de ce qu'ils sont.
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("nav");
document.createElement("menu");

Curieusement, ce code réussi a apprendre à Internet Explorer le HTML5, ou du moins ces quelques balies. Pour simplifier ce processus pour chaque nouvelle application, Remy Sharp a créé un script, communément
appelé le Shiv HTML5. Ce script corrige aussi quelques problèmes d'impression.

6. Rendre votre contenue modifiable

Les nouveaux navigateurs ont un nouvelle attribut qui peut être appliquée à des éléments, il est appelé contenteditable. Comme son nom l'indique, il permet à l'utilisateur de modifier n'importe quel texte contenu dans
l'élément, y compris ses émélement enfant (en savoir plus sur le DOM d'une page web). Il y a une foule d'utilisations pour ce type d'élément, par exemple une application aussi simple que d'une liste de choses à faire, ce
qui profite également au stockage local.

Liste des tâches

Acheter du pain

Emener les enfants à l'école

Oublier de ramener les enfants de l'école

Noté que les guillemets ne sont pas obligatoires.

7. La balise <input> pour les eMails

Si on applique le type "email" pour formater les entrées, on peut charger le navigateur pour autoriser uniquement les chaînes qui sont conformes à une structure d'adresse e-mail valide. La validation du formulaire intégré
sera bientôt opérationnel. En attendant, nous ne pouvons pas compter à 100% sur ce point tout de suite. Les anciens navigateurs ne comprennent pas ce type "email", ils vont tout simplement revenir à une zone de texte
ordinaire.
 Email:

Envoyer le formulaire

Il convient également de noter que tous les navigateurs actuels sont un peu bancal quand il s'agit d'interpreter les éléments et attributs qu'ils ne prennent pas en charge ... mais vous pouvez toujours les utiliser avec
parcimonie. A l'heure ou j'écris ce tutoriel, nous ne pouvons pas dépendre du navigateur. Une solution serveur / client reste la plus fiable.

8. La balise <figure>

Legende de l'image, ou texte relatif à l'image

En xHTML, il n'y avais malheureusement aucun moyen simple ou sémantique pour associer la légende, enveloppé dans une balise de paragraphe, avec l'élément image <img>. Le HTML5 rectifie ceci avec l'introduction
de l'élément <figure>. Lorsqu'il est combiné avec l'élément <figcaption>, nous pouvons maintenant associer sémantiquement les légendes avec les images.

9. la balise <hgourp>

Imaginez que, dans l'entête de mon site, j'ai insérer le nom de mon site et immédiatement apres sa description en une phrase (slogan par exemple). Nous pouvons utiliser les balises <h1> et <h2> pour les contenir. En
HTML5, nous utiliseront la balises <hgroup> pour illustrer sémantiquement la relation entre les deux titre En outre, l'utilisation d'une balise <h2> présente quelques inconvénients, en termes de hiérarchie, quand il s'agit de
l'affichage d'autres rubriques sur la page. En utilisant l'élément <hgroup>, nous pouvons regrouper ces rubriques ainsi, sans affecter le flux des grandes lignes du document.

Titre du site

Legende ou slogan

10. Redéfinition de la balise <small>

Il n'ya pas longtemps, l'élément <small> permettait de créer des sous-positions qui étaient étroitement liés au logo. C'etait un élément utile de présentation, mais maintenant, ce serait une utilisation incorrecte. L'élément
<small> a été redéfini, de manière plus appropriée, afin de se référer uniquement aux petits caractères. Imaginez une déclaration de copyright dans le pied de votre site par exemple. Selon la définition HTML5 nouvelle de
cet élément, la balise <small> serait l'encadrage correct pour cette information.

11. L'attributs required d'un formulaires

Les formulaires ont un nouvel attribut : required, qui précise le type d'entrée souhaité. En fonction de vos préférences de codage, vous pouvez déclarer cet attribut dans l'une des deux façons suivantes:

ou de façon plus explicite :

Les deux méthodes feront l'affaire. Avec ce code, et dans les navigateurs qui supportent cet attribut, le formulaire ne peut être soumis que SI ET SEULEMENT SI le champ n'est pas vide. Voici un petit exemple rapide :

Votre prénom :
41 Mag
Envoyer

Si l'entrée est laissée en blanc, et le formulaire est soumis, la zone de texte sera mis en évidence.

12. L'attribut autofocus

Encore une fois, le HTML5 supprime le recours au JavaScript. Si une entrée particulière devrait être «choisis», ou sélectionné, par défaut, nous pouvons maintenant utiliser l'attribut autofocus.

41 Mag

13. L'élément AUDIO

Il est désormais inutile d'utiliser de tiers plugins pour lire un fichier audio. Le HTML5 offre maintenant l'élément <audio>. Pour le moment, seul les navigateurs les plus récent l'interprète. En savoir plus sur la lecture d'un
fichier AUDIO en HTML5.

Telecharger le morceau.

Le principal problème provient du format audio. Firefox voudrait voir un fichier.Ogg, d'autre avec une extension différente... Cela signifie que, au moins pour l'instant, vous devez créer plusieurs versions du fichier audio.

14. L'élément VIDEO

Tout comme pour l'élément <audio>, vous pouvez également proposer des vidéo insérer en HTML5 dans les nouveaux navigateurs. En fait, tout récemment, YouTube a annoncé un nouveau code HTML5 intégrer à leurs
vidéos, pour les navigateurs qui le supportent. Malheureusement, encore une fois, parce que le HTML5 ne précise pas un codec spécifique pour la vidéo, le choix est laissé aux navigateurs. Alors que Safari, et Internet
Explorer 9 prennent en charge la vidéo au format H.264 , Firefox et Opera sont dépendant de l'open source Theora et Vorbis. En tant que tel, lors de l'affichage vidéo HTML5, vous devez offrir plusieurs formats.

Votre navigateur ne prend pas la video en charge Telecharge la.

15. Pré-chargement de vidéo

L'attribut preload fait exactement ce que vous devinez. Bien que vous devez d'abord décider si oui ou non vous souhaitez que le navigateur précharge de la vidéo. Est-ce nécessaire? Peut-être, si le visiteur accède à une
page, qui est faite spécialement pour afficher une vidéo, vous devez absolument précharger la vidéo, et garder votre visiteur en limitant un peu le temps d'attente.

16. Affichage des boutons de contrôle du lecteur de vidéo

Si vous utilisez chacun de nos conseils ci-dessus, vous avez sans doute remarqué que la vidéo apparaît seulement comme une image, sans aucun moyen de contrôle. Pour afficher ces commandes de lecture, il nous
faut préciser l'attribut controls au sein de l'élément vidéo.

17.La balise <mark>

Pensez à l'élément <mark> comme un surligneur. Une chaîne enveloppé dans cette balise doit être pertinente pour les actions actuelles de l'utilisateur. Par exemple, si je cherchais un mot particulier tel que "HTML5" sur
certains site (dont le 41 MAg !), je pourrais alors utiliser un peu de JavaScript pour envelopper chaque occurrence de ce mot avec les balises <mark>.

Resultat de recherche

Sur le 41Mag, vous saurez tous sur le HTML5.

18. Quand bien utiliser une balise <div>

Les balises <div> doivent être utilisés uniquement lorsqu'il n'y a pas de meilleurs éléments a utiliser.

19. L'attribut DATA

Nous avons maintenant officiellement un support pour les attributs personnalisés au sein de tous les éléments HTML. Alors que, auparavant, on pouvait encore s'en tirer avec des choses comme ci-dessous :

Merci Jean

Les validateurs vont siffler ! Mais maintenant, aussi longtemps que nous utilisons notre attribut personnalisé avec DATA, nous pouvons officiellement utiliser cette méthode. Si vous voulez attacher des données
importantes à quelque chose comme un attribut par exemple, probablement pour un usage JavaScript, cela sera d'une grande aide pour vous.

Bla Bla

Recuperer une valeur stocké

var leDiv = document.getElementById('monDiv');

var attr = leDiv.getAttribute('data-custom-attr');
alert(attr); // Ma valeur

Il peut également être utilisé dans votre CSS

Ne me touche pas !

20. Placeholder

Avant, nous devions utiliser un peu de JavaScript pour créer des Placeholder pour les zones de texte. Bien sûr, vous pouvez d'abord définir la valeur de l'attribut comment vous semble, mais, dès que l'utilisateur la
supprime l'entrée sera vide . L'attribut placeholder permet de remédier à ce problème.

Ecris@moi.fr

Si le navigateur ne prend pas en charge l'attribut Placeholder, il n'y aura aucun problème.

21. Les expressions régulières

Combien de fois avez-vous trouvé ou vous-même écrit une expression régulière pour vérifier rapidement une zone de texte particulière ?. Merci au nouvel attribut pattern, qui nous permet d'insérer une expression
régulière directement dans notre balisage.

Créer un pseudo :

Go

Si vous êtes plus ou moins familiers avec les expressions régulières, vous serez conscient du fait que ce modèle: [A-Za-z] {} 4,10 accepte uniquement les lettres majusc

Notez que nous commençons à combiner l'ensemble de ces nouveaux attributs, impressionnants !

22. La balise <output>

Comme vous avez probablement deviné, l'élément de sortie <output> est utilisé pour afficher une sortie de calcul. Par exemple, si vous souhaitez afficher les coordonnées d'une position de la souris, ou la somme d'une
série de chiffres, ces données doivent être insérés dans l'élément <output>. Voici un exemple simple, nous allons insérer la somme de deux nombres avec JavaScript quand un bouton submit est pressé.

10 + 5 =

Calculer

A noter que l'élément <output> est encore un peu bancal, tous les navigateurs ne le comprennent pas. Si le navigateur ne reconnaît pas l'élément, il aguichera tout simplement une alerte vous en informant. Sinon, il
trouve la sortie avec le nom «somme», et définit sa valeur à 15, après que le formulaire a été soumis. Cet élément peut également recevoir un attribut for, ce qui indique le nom de l'élément auquel la sortie se rapporte.
Son utilisation est semblable à la façon dont fonctionne une étiquette <label>.
23. Créer un curseur avec la balise <input>

Il peut recevoir les attributs min, max, step, values entre autres.

Votre note

Ce qui donne (si votre navigateur est compatible ..) :

Votre note

Vous pouvez lui ajouter un CSS pour l'embellir :

input { font-size: 14px; font-weight: bold; }

input[type=range]:before { content: attr(min); padding-right: 5px; }

input[type=range]:after { content: attr(max); padding-left: 5px;}

output {
display: block;
font-size: 5.5em;
font-weight: bold;
}

24. Qu'est-ce qui n'est pas HTML5 ?

Il est important de comprendre exactement ce qui n'est pas du HTML5 :

1. SVG: Ce n'est pas du HTML5. depuis plus de 5 ans ...

2. CSS3: Ce n'est pas du HTML5. Juste du ... CSS
3. Geolocation: Ce n'est pas du HTML5.
4. Client Storage: Ce n'est pas du HTML5. Il était prêt, mais il a été retiré de la spécification, en raison du fait que beaucoup craignent que tout devienne trop compliqué. Il a maintenant sa propre spécification.
5. Web Sockets: Ce nest pas du HTML5. Lui aussi a sa propre spécification..

[cadreHTML5] En savoir plus sur Le HTML5, qu'est-ce que c'est ? quel sont ses limites ?