Jean ROCHARD
Je partage ma passion de Wordpress dans des articles techniques sur les plugins, thèmes, nouveautés geek et optimisation SEO "on-site".
Jean ROCHARD

@jean_rochard

Chez Terre Digitale, on mange du Wordpress dès le petit-dej'.
Petit guide pour mettre en place les Facebook Instant Articles à partir de vos posts Wordpress : https://t.co/lSbzdM6z9j - 7 mois ago

Depuis le 28 octobre 2014, le HTML 5 est une recommandation du W3C (World Wide Web Consortium). Utilisé depuis plusieurs années déjà, cette 5ème version définit un format adapté aux nouveaux enjeux du web et à une grande variété de supports  et terminaux. Vous pouvez retrouver ici la recommandation officielle qui fait du HTML5 un standard. Nous allons profiter de cette annonce pour voir plus en détail les spécificités de ce langage, utilisé bien sûr par WordPress.

A quoi sert le HTML ?

HTML signifie « HyperText Markup Language » ; c’est un langage qui est né avec le web.  C’est grâce à lui que les données et contenus d’une page web sont structurés et organisés grâce à des balises textuelles. Il constitue une part importante du code source d’une page ; que vous pouvez d’ailleurs voir dans votre navigateur grâce à une action accessible par le clic droit de la souris.

Le navigateur justement : c’est à lui que se destine le code HTML. Il va savoir le lire, l’interpréter et l’afficher. Attention par contre, tous les navigateurs n’interprètent pas exactement toutes les fonctionnalités du HTML de la même façon ! Cela dépend bien sûr du navigateur (Internet Explorer, Chrome, Firefox, Safari, Opera…) mais également sa version. Vous trouverez en ligne (pour les développeurs surtout) des tableaux évoquant la prise en compte des fonctionnalités en fonction des navigateurs.

Pour gérer l’apparence et l’affichage, le HTML5 est complété par du code CSS (« Cascading Style Sheets »). Enfin, pour gérer des comportements et fonctionnalités complexes, on peut utiliser du code Javascript (JS).

HTML, CSS et Javascript sont les 3 ingrédients d’une page web. Voici un exemple de code HTML5 :

HTML5

HTML et CSS

On peut considérer que le HTML traite le fond, c’est à à dire le message ; alors que le CSS traite la forme, c’est à dire l’habillage. Pour illustrer cela, le site csszengarden est un parfait exemple. Pour le même code HTML, il est possible d’avoir une multitude de mises en formes différentes.  Par exemple, voici 2 designs radicalement différents avec pourtant le même code HTML comme structure :

csszen

Un fichier HTML5 n’étant finalement constitué « que » de texte organisé avec des balises, on peut le modifier avec n’importe quel éditeur de texte. Par exemple, j’utilise Notepad++ pour cela.

Quelques balises HTML5

Les balises indiquent au navigateur ce qu’il doit afficher. Une balise est encadrée par un signe « < » et terminée par un signe « > ». Une balise doit toujours être ouverte puis fermée. En quelque sorte, elle encadre le contenu.

Par exemple, pour définir un titre de niveau, on écrit dans la page HTML : <h1>Mon titre de niveau 1</h1>

Dans les nouvelles balises de structure introduites par le HTML5, nous pouvons citer :

  • header : utilisé pour définir l’entête d’une page web (logo, tag line…)
  • nav : utilisé pour afficher des liens de navigation de type menu
  • main : utilisé pour désigner le contenu principale de la page
  • section : désigne un regroupement cohérent de contenus
  • aside : utilisé pour afficher un contenu complémentaire à un autre contenu. A ne pas confondre avec une sidebar.
  • article : représente un contenu indépendant et autonome
  • footer : utilisé pour définir le pied de page

Parmi les balises sémantiques usuelles :

  • h1, h2, h3… : utilisé pour définir des titres de différents niveaux
  • ul / li ou ol / li : utilisé pour faire des listes d’éléments
  • p : représente un paragraphe
  • br : représente un saut à la ligne
  • img : défini une image
  • figure / figcaption : utilisé pour afficher une image et sa légende

HTML5 a également ajouté des balises media très utiles : audio, video… Le travail des développeurs en est grandement facilité lorsque les navigateurs savent interpréter ces balises.

En conclusion, le HTML5 est une technologie d’avenir, aujourd’hui standardisée et en cours d’implémentation par tous les navigateurs web.

Avec les technologies actuelles et des CMS comme wordpress, vous n’aurez pas à connaître ni à utiliser ce langage HTML5 directement ; mais il vous faut par contre bien veiller à ce que vos projets de création ou refonte de site Internet l’utilisent ; ainsi que les CSS3 !