41Mag - A quoi sert le HTML5 ? Que peut-on faire avec ? Quels sont ses limites ?

A quoi sert le HTML5 ? Que peut-on faire avec ? Quels sont ses limites ?

Le HTML5 est le langage de base pour apprendre pour créer des sites internet. Il est simple et se maitrise assez vite. Découvrons pourquoi le HTML5 est incontournable, quels sont ses avantages et quels sont ses limites. Enfin, nous évoquerons les langages complémentaires au HTML5.

Ce premier chapitre s’adresse principalement au débutant souhaitant apprendre la création de site internet en HTML5. C’est le chapitre 01 du tutoriel complet : Apprendre le HTML5.

[cadreHTML5]

I. A quoi sert le HTML5 ?

Le HTML5 est le langage de base pour créer un site internet. Le HTML5 sert a structurer votre contenu. Même s’il est relativement simple, vous en aurez toujours besoin. Donc, que vous vous lanciez dans un petit site personnel ou dans un très gros projet (un peu risqué sans trop de connaissance …), vous devrez utilisez du HTML5.

Apprendre le HTML5 est une chose, bien le maîtriser en est une autre.

Le HTML5 est un langage inspiré du XML et qui repose sur le principe de balises imbriquées. En résumé, il sert à indiquer au navigateur (internet explorer, firefox, safari …) comment afficher la page web. Imaginez que vous vouliez créer un site avec une seule page ou il serait juste écrit : « Bonjour ». Vous allez devoir écrire des lignes de codes HTML5 pour indiquer au navigateur d’afficher votre texte.

Comme le HTML5 fonctionne sur le principe de balises imbriquées, nous allons encadré notre texte par deux balises : La première pour indiquer le début et la deuxième pour indiquer la fin. Pour afficher du texte en HTML5, bien souvent nous utilisons la balise servant à indiquer qu’il s’agit d’un paragraphe. Même pour n’écrire qu’une seule phrase, on utilise cette balise.

Ce qui nous donnera la ligne de code suivant :

1
<p>bonjour</p>

La ligne de code ci-dessus est très simple à comprendre. On ouvre une première balise <p> pour indiquer au navigateur qu’il doit afficher le texte qui suit puis on la referme cette balise en ajoutant le symbole / (slash). La balise <p> indique un paragraphe. P signifiant Paragraph en anglais. Tous le texte qui se trouve entre ces deux balises s’affichera à l’écran.

Le HTML5 sert principalement à afficher un contenue (texte, image, vidéo, animation …). Ce contenue est hiérarchisé par des balises. Par exemple pour un titre on utilise des balises relatives (<h1>,<h2>,<h3> …), idem pour le texte (<p>,<a> pour faire un lien ….), le multimédia (<img> pour les images …).

Chaque balise à une utilisation logique dans la structuration du document. Le choix des balises est primordiale et les moteurs de recherches s’en servent pour classer et positionner vos page web lors de requête. Il est donc très important d’apporter un soin particulier à leur choix. Par exemple, pour une citation, on n’utilise pas une balise <p> (paragraphe) mais une balise <blockquote> (citation). Si le rendu à l’affichage est le même, pour l’interprétation du navigateur mais surtout des moteurs de recherche ce n’est pas du tout pareil.

Pour faire simple, le HTML5 sert principalemenent à :

  • Afficher un contenue (texte, image, …)
  • Créer des liens hypertext et relier les pages entre elles
  • Structuré un document (titre, paragraphe …)
  • Indiquez au navigateur ce qu’il doit afficher
  • Bien indexer votre page web dans les moteur de recherches (choix de balise, mot-clé …)

Bien que nous n’ayons pas abordé le sujet, il sert aussi à :

  • Donner des informations au navigateur sur la gestion de la page (gestion du cache, rafraichissement …)
  • Donner des informations au navigateur sur la page (titre, mot-clé, langue, pays, copyright …)

II. Les avantages du HTML5

Le principal avantage du HMLT5 est donc sa simplicité relative. Car s’il s’apprend très vite, bien le maîtriser demande un peu plus de temps. Il est parfait pour les débutant car très rapidement vous saurez créer des pages web avec du texte, des images, des vidéos …

Le HTML5 ne compte qu’une centaine de balises. Ce qui est peu, et rassurez-vous, vous n’aurez pas besoin de les connaitre toutes. Sachez simplement qu’elles existent.

Un autre avantage du HTML5 est sa compatibilité. Depuis que les différents éditeurs de navigateur (microsoft, mozilla …) se sont rapproché, la portabilité entre-eux est bien meilleur que pour les précédentes versions du HTML. Lorsque vous codez une page en HTML5, théoriquement, elle s’affichera de la même facon quelque soit le navigateur (firefox, opéra, internet explorer …), l’OS (windows, mac, linux …) et le support (pc, smartphone, tablette …).

Chapitre complémentaire : Rendre son site web HTML5 compatible avec tous les navigateurs

III. Les limites du HTML5

Si le principale avantage du HTML5 est sa simplicité, il est aussi relativement limité. Prenons différent cas de figure afin de mieux comprendre :

Imaginons que nous avons créer toute une page sur notre passion : les escargots. Dans cette page, nous avons mis un titre, plusieurs paragraphes, des liens et des images. Lorsque nous affichons cette page sur notre navigateurs, chaque élément apparait à la suite les uns des autres. Le HTML5 nous a permis de tous afficher mais il nous faudra un autre langage, en l’occurrence le CSS, pour la mise en page. Ainsi nous pourrons changer la police de caractères, la taille de la police, la couleur du texte, de l’arrière-plan …

Le design de notre page sur les escargots étants réalisés, nous voulant maintenant lui ajouter un formulaire de contact et lorsqu’un internaute le remplira, pour sa prochaine visite, notre page devra afficher : « bonjour + pseudo renseigné dans le formulaire. » Le HTML5 nous as permis de créer un formulaire mais il ne pourra pas le traiter (l’analyser et l’envoyer). Vous aurez besoin d’un autre langage pour faire ces opérations.

Idem pour le stockage et l’affichage de variable. Tous les internautes n’ayant pas le même pseudo, le HTML5 ne pourra pas gérer les variables. Pour afficher le pseudo d’un internaute il faut d’abord le stocker  (fichier, base de données …) puis écrire une ligne de code dans un autre langage qui indiquera au navigateur qu’il doit afficher : « bonjour + une variable ». Cette variable correspond au pseudo stocké.

Le HTML5 affiche du contenue statique. Il vous faudra utilisé un autre langage pour du contenue dynamique (variable …). Par exemple si nous souhaitons ajouter une partie commentaire à notre page sur les escargot, le HTML5 ne pourra pas enregistrer le commentaire laissé. Il vous faudra donc utiliser un autre langage pour inter-agir avec une base de données.

IV. Les langages complémentaires au HTML5

D’autre langage, complémentaire au HTML5, vous seront nécessaire pour réaliser vos projets. Il pourront-être soit directement intégré dans la page soit écris sur une autre page et relié à la page codé en HTML5. Parmi ces principaux langages, ont retrouve :

CSS : Le CSS, ou Cascading Style Sheet, sert à la mise en page. On dissocie le contenue qui est codé en HTML5 et la design qui se fait en CSS. Il vou servira par exemple à indiquer la police de caractères, la couleur, l’arrière-plan …

Javascript : Le Javascript sert principalement à agir sur le comportement du navigateur. Avec ce langage, vous pourrez par exemple afficher une fenêtre d’alerte lorsqu’on clique sur un lien, mettre le site web dans les favoris, imprimer la page …

PHP : Le PHP est un langage très complet avec de nombreuse fonctions. Il permet de faire le lien entre votre site et une base de données, d’afficher son contenue de façon dynamique, de gérer des variables, de traiter des formulaires …

SQL : SQL est le langage pour agir sur vos base de données. Si le PHP fais le lien entre elles et votre site web, il vous faudra coder en SQL pour effectué des actions (ajouter, supprimer, modifier, trier, rechercher …)  sur celles-ci.

Passons maintenant au deuxième chapitre du Tutoriel complet pour apprendre le HTML5, et découvrons quels seront les outils et ressources dont vous aurez besoin pour développer vos futurs sites web en HTML5. Et première bonne nouvelle, vous ne serez pas obligé de débourser un seul centimes pour coder en HTML5 ou en CSS3.

Retour au sommaire

Chapitre 02 : Les ressources et outils nécessaires pour développer en HTML5

Article du même thême : ..

  • http://twitter.com/darkstars Romain Luyten

    c’est sympa et bien expliquer mais ne je suis pas d’accord sur deux
    point

    - »Le principale avantage du HMLT5 est donc sa simplicité
    relative »

    c’est plutôt la qualification quantification et hiérarchisation du
    contenus qui en terme de référencement est super puissant. Si non le
    html5 n’est pas plus simple qu’un autre.

    - »Un autre avantage du HTML5 est sa compatibilité. »

    Sans script la plupart des balises de html5 ne sont pas visible
    sous IE6 par exemple donc pour moi c’est faux aussi.

  • Pingback: Convertir son thème Wordpress au HTML5

  • Pingback: 24 Astuces et Techniques HTML5 à connaitre

  • Pingback: Qu’est ce que le HTML5 ?

  • Olimog7

    IE6, ça existe encore les navigateurs en carton !!
    Personnellement, si j’utilise le HTML5 c’est pour aller de l’avant, il faut vivre avec son temps!

  • Vincent HENNEBERT

    MySQL n’est pas un langage mais un SGBDR, tu voulait surement parler du SQL

  • l’actu sm

    Super site et super article !!!
    J’aimerai ameliorer mon site avec des gadgets,que dois -je utiliser???
     

  • http://www.facebook.com/Watani.Tounis Kais Zekri

    Bien

  • azizwel zoclo

    ça soulage de trouver quelque chose de précis et concis

  • zeblob

    Extrêmement pénible à lire, hélas, en raison du nombre énorme de fautes de français :o(

  • max

    « Le HTML5 affiche du contenue statique. Il vous faudra utilisé un autre langage pour du contenue dynamique »

    Eux excusez-moi.. on parle bien du HTML5 n’est ce pas?? avec un 5 comme Cinq??

    Je recherchais un tuto sur le html5, pas sur le html tout court ou le html4 et inférieur… le HTML5 PEUT produire du contenu dynamique. Si vous ne me croyez pas, allez voir l’extension chrome ponyhoof. C’est une extension qui change la tête de facebook assez conséquemment en faisant appel à des animations qui sont faites AVEC html5 (et non pas flash ou java).. Avant de rajouter HTML5 partout, ce serait mieux de corriger l’article en le mettant à jour

  • Sylvestre

    « contenu » est nom commun masculin, donc pas de « e ». Merci de faire corriger les articles que dont on a la prétention de mettre en ligne.

  • Domi

    @l’auteur :
    Des commentaires vous font remarquer que l’article contient de nombreuses fautes de français (conjugaison et accord, surtout). Ce serait bien de les corriger.
    J’émets également un sérieux doute sur une quelconque amélioration de la compatibilité du HTML5 par rapport à HTML4.1. J’aimerai bien des arguments plus convaincants que ceux de l’article.

    @2df6a4e0839402c1ea8a87175e6ccf0a:disqus
    Une page dynamique,c’est une page ne donnant pas le même contenu selon les circonstances (lieu du client, date, paramètres dans l’URL..). Et effectivement, HTML5 ne peut pas. ce sont des langages comme PHP ou ASP, éventuellement associés à « AJAX » qui permettront un contenu Dynamique. Ne pas confondre animations avec contenu dynamique.

  • Doume

    C’est rigolo, j’ai écrit « max », et ça a été remplacé par le MD5 de son mot de passe (en tout cas, c’est pas celui de « max »).
    Faudra signaler le truc à WordPress, à moins que le développeur du site ait massacré son CMS.
    (J’ai conscience de ne pas forcément être compréhensible de tout le monde. C’est à l’attention du webmestre.)

  • Domi – Doume

    Damned ! Un coup je me présente sous Domi, l’autre sous Doume. Vous aurez compris que c’est la même personne.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.