Blog d'un Éternel Geek

HTML5 une porte vers le futur : un contenu plus Light, plus permissif, plus puissant.

http://vivageek.livehost.fr/data/images/dev/html5lenouveau.jpg

HTML5 définit des familles d’éléments plus variés que de simples blocs et incorpore : des métas informations, des éléments de flux, un contenu embarqué et un contenu interactif.

 

HTML5 a évolué et a dépasser son statut de spectateur ou de simple contenant pour devenir un véritable maître d'arme en terme de libération technique sur une page web.

 

Nous allons voir ce qu'il est maintenant capable de faire sur un contenu simple avec ces nouvelles balises. Des balises moins lourdes, des autorités nouvelles, des fonctions plus étendues, donc HTML5 apporte avec son lot de nouveautés ainsi qu'un vent de frais chez les Web Développeur.

 

http://vivageek.livehost.fr/data/images/dev/html52.jpg

 

Videz votre placard poussiéreux du HTML4, ne soyez pas à la ramasse et voyons ensemble ce qu'il nous propose dans sa besace.

 

Sur l’exemple suivant, tout a été allégé pour permettre HTML d’aller beaucoup plus loin que d’être une balise d’en-tête ou juste servir à encadrer des blocs.

 

Je ne rappelle pas à tous le monde qu'une balise commence par son nom encadré de <nom_balise> et se termine avec un / comme </nom_balise> (ça c'est fait passons).

 

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="utf-8">

<title>Ma page</title>

</head>

<body>

...

</body>

</html>

Tout comme CSS3 ce renouveau lui a permis de posséder un peu plus de liberté dans ses applications. Comme nous pouvons le voir les balises méta avant permettent apporter des informations comme les mots-clés les descriptions, auteurs qui permettront à Google lors du référencement de connaître les différents mots ou phrases qui définissent notre site.

 

HTML5 contient également la balise style qui permette d’embarquer du CSS et de le déclarer directement dans le document HTML. On peut retrouver JavaScript à l’intérieur d’un HTML qui va être défini par les valises scripts ou alternativement noscripts qui va au contraire désactiver de JavaScript sur le navigateur.

 

Ceci ne change pas de l'ancienne formule magique HTML4 mais si l'on pousse un peu plus loin on constate des changements ou plutôt l'apparation de nouveautés fort sympathiques.

 

Avantages de la nouvelle syntaxe d’un HTML5.

 

Sautons enfin le pas ! On étais à l'aise avec notre HTML4 on nous avait fait le coup en passant du 3 au 4 en bouleversant nos balises , no stress elles sont justes plus courtes et même les nouvelles sont simplistes au maximum.

 

http://vivageek.livehost.fr/data/images/dev/html53.jpg

 

 

On peut grâce au nouveau balisage plus épuré assainir nos sections et mieux structurer nos documents. Le contenu en ressort plus jolie et plus lisible.

 

Ainsi je vais vous faire part de balises qui vont simplement découper la structure de votre page HTML intelligemment.

 

 

On a rafraichis nos anciens standards.

 

Article : il peut servir à contenir une portion indépendante comme un article de presse, une réponse de forum, un commentaire, etc.…

 

<article>

<header>

<h1>Sur Vivageek je Geek !</h1>

<time datetime="2015-04-01" pubdate>Le 1er avril 2015</time>

</header>

<p>...</p>

<footer>Posté par Jhon</footer>

</article>

 

Aside : va au contraire la englober un contenu qui indirectement lié au contenu principal. Généralement on l’utilise un sidebar à droite ou à gauche de la page. On peut l’utiliser également pour une définition ou tout autre contenu secondaire à l’article.

 

<article>

<h1>VivaGeek c'est good !</h1>

<p>...</p>

<aside>

<h2>HTML5 c'est quoi ?</h2>

<p>HTML5 est le renouveau...</p>

</aside>

<p>...</p>

</article>

 

Section : c’est un élément générique pour une section de contenu ou d’applications Web utilisées par exemple pour un élément de section plus sémantique comme header, article, nav, footer, aSide. Il ne faut pas le confondre avec div qui lui n’a aucune valeur sémantique.

Comme dans l’exemple suivant où il englobe un en-tête d’un contenu.

<section>

<h1>En-tête</h1>

<p>Un tas de contenu super intéressant.</p>

</section>

 

Nav : il sert essentiellement la navigation, il va permet de regrouper les principaux liens comme pour un menu qui vont permettre d’aller venir sur le site ou une application ou un document.

<nav>

<ul>

<li><a href="http://vivageek.livehost.fr/">Accueil</a></li>

<li><a href="http://vivageek.livehost.fr/inscription.html">Inscription</a></li>

<li><a href="http://vivageek.livehost.fr/article81/contenthtml5#contact">Contact</a></li>

</ul>

</nav>

 

Header : celui-ci n’a pas vraiment changé il sert à englober le l’en-tête d’une page. Mais il peut servir également. Document une section dans un sens plus large que Article par exemple.

 

<body>

<header>

<img src="http://vivageek.livehost.fr/logo.png" alt="...">

<h1>Titre du document</h1>

</header>

<p>...</p>

</body>

 

Footer : comme son nom l’indique dans la traduction française pied il signifie tout ce qui se rapporte au bas du document. Sur le pont au sens littéral large cela peut signifier le footer d’un article le footer d’une page le foutoir d’un document etc.…

 

<article>

...

<footer>

<p>Tags : HTML5, audio, tutoriel, media</p>

</footer>

</article>

 

Comme vous voyez ce n'est plus lié forcément au bas d'une page mais peut être modulable pour s'exercer sur le bas d'un paragraphe ou personnaliser son Footer (pied).

 

 

La hiérarchisation sur HTML5.

 

Comme il fait ça bien, la hiérarchie des titres possède six niveaux. Vous allez me dire qu’il n’est pas indispensable de les utiliser tous, pourtant Google lors de son référencement va vérifier que vos en tête sont bien hiérarchisées par rapport à ces six niveaux.

 

Pourquoi ?

 

Simplement, une hiérarchisation complète et surtout distincte permet d’avoir une structure de page cohérente, lisible et surtout applicable selon les standards W3C est de Google.

 

Facile ça n’a pas changé c’est toujours h1, h2, h3, h4, h5 et h6.

 

Un nouveau qui n’existait pas avant et hgroup. En fait il permet de grouper les titres. Je m’explique, nous avons vu donc qu’il y avait six niveaux de titre afin de démarquer un groupement de plusieurs titres qui iraient par exemple de h1 à h4, nous pouvons les mettre entre les balises hgroup.

Cela donne un aspect visuel beaucoup plus singulier et plus rapide à décerner au milieu d’une base HTML pour le webmaster ou le codeur.

Les balises paragraphe p saut de ligne br et séparations hr : sont toujours en vigueur avec des possibilités de personnalisation grâce aux CSS trois que nous verrons ultérieurement.

 

Une nouvelle balise wbr viens renforcer les détracteurs des je veux qu'ils aillent à la ligne coûte que coûte même dans un paragraphe.

 

Elle permet d’indiquer une opportunité de césure de mots. Elle indique simplement au navigateur qu’il est plus opportun de scinder un mot à l’emplacement de l’élément. C’est-à-dire qu’il va permettre aux mots qu’il va baliser de se remettre à la ligne même s’il est à l’intérieur de balises paragraphe. Génial non !?

 

Conteneur générique.

 

Nous avons toujours nos bons conteneurs de type bloc div mais également de type en-ligne span ils n’ont pas changé et reste toujours avec la même syntaxe et variation.

 

Balise en ligne

Nous avons toujours les balises contenues ajouter comme ins, del et S.

 

Je ne vous ferai pas un cours sur ces balises déjà connues depuis HTML4, par conséquent je ne m’attarde vraiment que sur les nouvelles balises comme dit au début.

 

Balises sémantiques.

La balise Time : permet d’attribuer une signification standardisée à l’aide d’une date et d’une heure si nécessaire. L’exemple qui suit vous montre comment utiliser cette balise.

 

<article>

<p>Publié le <timedatetime="2015-04-01T15:50:00Z">1eravril2015</time>

</p>

</article>

 

Mise en forme de texte.

 

Plusieurs nouvelles balises sont venues renforcer celles existantes : u, I, Strong, B,em, Small, Sub, Sup.

La première se nomme Mark : elle permet de mettre en valeur, de surligner voire attirer l’attention sur un passage de texte en particulier. Par exemple, le moteur de recherche l’utilise pour surligner un terme recherché.

 

bdo : permet de modifier le sens de l’écriture. Va indiquer le sens d’affichage du texte qui peut être de gauche à droite ou de droite à gauche.

 

<bdo dir="rtl">
Ce texte sera écrit de droite à gauche.
</bdo>

 

bdi : isolation du sens de l’écriture. Balises des passages de textes susceptibles de comprendre une écriture en sens inverse du contenu principal.

 

<ul>
  <li>Utilisateur <bdi>hrefs</bdi>: 60 points</li>
  <li>Utilisateur <bdi>jdoe</bdi>: 80 points</li>
  <li>Utilisateur <bdi>إيان</bdi>: 90 points</li>
</ul>

 

Les listes

 

Il n’y a pas de vrai changement on conserve les mêmes balisages qu'HTML4.

 

Embarqué du multimédia

Ici par contre beaucoup de changements on sent que HTML5 a voulu créer sa marque et s’imposer sur un contenu qu’ils avaient un petit peu négliger ces dernières années.

 

Comme nous avons pu le voir la dernière fois sur l’article sur la vidéo en html5, le multimédia est beaucoup plus facile et engageant avec le HTML5.

 

Nous verrons plus en avant dans les prochains articles que je traiterai sur le multimédia embarqué que ce soit image ou vidéo, mais également les autres contenus comme le canvas, ifram et object.

 

Je traiterai également une grosse partie sur les nouvelles balises des menus et commentaire, des tableaux et des formulaires.

 

Ce sera des articles à part entière qui seront différenciés chacun car cela demande une étude approfondie de toutes les possibilités qu’ils vont nous permettre d’exécuter sur une page Web.

 

Merci à bientôt.

 

Source : openclass, W3Schools et Étude universitaire sur HTML5 (Memento fin parcours).






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


2 commentaires

1 - mardi 04 août 2015 @ 08:46 rtt59 a dit :

merci pour l info j ai du boulot lol

2 - mercredi 13 avril 2016 @ 00:30 artisan serrurier meudon a dit :

Merci beaucoup pour ce post. Sympa.

Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la première lettre du mot vxlhl ? :