Mathieu, nous explique aujourd’hui les bases du langage HTML.
Une petite introduction à l’HTML qui sera suivie d’une petite introduction au CSS, avant de rentrer dans des sujets encore plus approfondis de cette nouvelle catégorie HTML/CSS.
Cet article s’adresse à tous les SEO de profil plus marketing que technique. Je pense que c’est un bon début pour se lancer dans le sujet.
Il est très important de comprendre ces bases et de maîtriser parfaitement ces notions, avant d’aller plus loin.
Merci donc à Mathieu pour ce cours HTML 🙂 et bonne lecture à tous !
Qu’est-ce que c’est le langage HTML ?
L’HTML (pour « HyperText Markup Language ») est LE langage à maîtriser à tout prix sur le web dans de multiples domaines de compétences. Il est utilisé pour faire de la mise en page et est généralement associé au langage CSS, son compère de toujours utilisé pour la mise en forme.
Pour résumer, l’HTML est un langage qui nous permet de créer la structure des pages.
Pour imager un peu cela, on peut considérer que l’HTML est la charpente et que le CSS correspond au style de la toiture (tuiles, ardoises, etc.). Autant nous pouvons avoir une toiture dans un style simple, autant la charpente mérite d’être solide et bien conçue. Adaptons cette comparaison au web et nous pouvons aisément imaginer l’impact de l’HTML…
L’HTML, un langage relativement simple
L’HTML demeure un langage relativement simple à comprendre et à structurer, contrairement aux idées préconçues par les débutants. Nous verrons que faire la mise en page est souvent plus aisée que faire la mise en forme, mais nous devons garder à l’esprit que les deux notions sont bien distinctes.
Quand je conçois une page web (après avoir réalisé la maquette finale), je ne me préoccupe pas de savoir si un bloc aura un fond rouge et sera placé à droite, je me focalise sur le fait que j’ai un bloc à définir, c’est seulement le style CSS qui nous permettra de mettre en rouge et à droite, ne visez donc pas le résultat final avant d’avoir conçu la structure !
DTD et Doctype
L’HTML est le langage de l’origine du web, tirant sa source de son illustre parent le SGML. Depuis 1998 nous utilisons la version 4 de l’HTML. Parallèlement, le W3C a décidé de créer en 1999 le xHTML dont l’objectif était de permettre des extensions du langage grâce à XML, un meta-langage de balisage. Au final, les développeurs ont souvent penché pour l’xHTML 1.0 car sa syntaxe est un peu plus stricte que celle de l’HTML 4 et qu’elle correspond davantage aux recommandations du W3C, mais rien ne vous oblige à cela.
L’objectif de cet article n’étant pas de vous embrouiller mais de vous permettre d’avoir des premières armes pour comprendre l’HTML, je vais vous présenter la notion de DTD et Doctype sans rentrer dans le détail. Pour faire simple, nous devons préciser aux navigateurs ou aux robots le langage utilisé dans la page web lue, cela passe par une déclaration de type de document (DTD) résumée dans une ligne dont la balise est « doctype ».
Le Doctype se place toujours en première ligne avant le code HTML et définit à la fois le langage utilisé et surtout la syntaxe à respecter dans le document. Voici les trois Doctype les plus usités sur le web actuel :
- HTML 4 transitionnel :
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
- xHTML 1.0 transitionnel :
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- xHTML 1.0 strict :
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
Il en existe d’autres mais retenez surtout que la différence entre les « transitionnels » et les « stricts » n’est qu’une question de rigueur de code. Plus vous voulez avoir un code précis et respectant les standards fixés par le W3C, plus il est conseillé d’opter pour un Doctype strict, mais soyons honnêtes, peu de développeurs s’aventurent là-dedans car les erreurs sont rapidement faites…
Structure de base d’un document HTML
La structure d’origine d’un document HTML (ou xHTML) est toujours identique. Les pages web se découpent en deux entités : le doctype (une ligne) et le bloc HTML.
Le bloc HTML se divise lui aussi entre la « tête » du document et son « corps », ce qui se traduit en anglais par les balises « head » et « body ».
Voici à quoi doit ressembler une page web de base :
Tout ce qui est entre les balises <head> et </head> correspond aux données invisibles aux utilisateurs (à une exception près) mais qui sont utiles pour le bon fonctionnement de la page. En revanche, tout ce qui est dans le “body” est visible et s’inscrit comme un contenu de la page web.
Typologie des balises et sémantique d’origine
Avant de découvrir les listes de balises qui se présentent à nous, il est important de comprendre deux notions importantes.
Tout d’abord, sachez qu’il existe deux types de balisage de contenus :
- les balises ouvrantes et fermantes dont la syntaxe est <baliseouvrante>…/balisefermante>, comme c’est le cas pour <head> et </head> par exemple.
- Les balises ouvrantes-fermantes dont la syntaxe est <baliseouvrantefermante …/> comme nous allons le voir. Ces dernières sont beaucoup plus rares…
Enfin, l’autre notion importante est liée au comportement d’origine des balises. En effet, nous parlons de balises « block » et de balises « inline » :
- une balise « block » fonctionne comme un bloc, au sens propre du terme, cela signifie qu’elle entraîne un retour à la ligne automatiquement et qu’elle accepte de recevoir une largeur et une hauteur spécifiques (par défaut, une balise « block » occupe toute la largeur et prend la hauteur de son contenu) ;
- une balise « inline » permet quant à elle de donner un style à un contenu en plein milieu d’une ligne. Par exemple, si nous voulons mettre en exergue un morceau de texte, nous ne souhaitons pas causer un retour à la ligne, il convient plutôt d’utiliser une balise « en ligne ». La spécificité d’une balise « inline » est de prendre automatiquement la largeur et la hauteur du contenu qu’elle représente…
Les comportements des balises peuvent être modifiés en CSS, cela est même parfois indispensable pour obtenir satisfaction, mais le W3C et les concepteurs ont dû trancher à l’origine du langage, c’est pourquoi il est important de bien connaître le comportement original de chaque balise…
Les balises de structure
Les balises de structure sont nombreuses, je vais les séparer en fonction de leur type et de leur comportement afin qu’il n’y ait aucune ambiguïté.
Retenez aussi qu’il est possible d’ajouter des commentaires en HTML avec la syntaxe suivante : <!–COMMENTAIRE LIBRE –>.
Liste des balises de type « block » :
- ouvrantes et fermantes :
- <div>…</div> : division de page (bloc) sans valeur sémantique particulière ;
- <p>…</p> : paragraphe, dont un bloc de contenus ;
- <hn> (« n » allant de 1 à 6) : balises de titre internes aux pages ;
- <object>…</object> et <embed>…</embed> : balises utilisées pour insérer des animations Flash notamment ;
- <iframe>…</iframe> : remplaçante des balises « object » et « embed » qui pose moins de problème de compatibilité ;
- <pre>…</pre> : balise utilisée pour afficher le texte tel qu’il est présenté dans le code HTML (saut de ligne, casse, etc.) ;
- <blockquote>…</blockquote> : balise utilisée pour afficher un bloc de citations ;
- ouvrante-fermante :
- <hr/> : affiche une barre horizontale.
Liste des balises de type « inline » :
- ouvrantes et fermantes :
- <span>…</span> : balise utilisée pour cibler des blocs de textes sans forcer de retour à la ligne (équivalent de <p>…</p> mais sur un bout de texte et « inline ») ;
- <strong>…</strong> : balise de mise en exergue du texte (l’affichage par défaut est un texte en gras mais ce n’est pas une balise de mise en forme !) ;
- <em>…</em> : seconde balise de mise en évidence du texte (l’affichage donne de l’italique par défaut) ;
- <a>…</a> : balise de lien ;
- <b>…</b>, <i>…</i> et <u>…</u> : trois couples de balises de mise en forme (gras, italique et souligné) ;
- <cite>…</cite> : balise utilisée pour des citations courtes ;
- <sup>…</sup> : caractère en exposant ;
- <sub>…</sub> : caractère en indice ;
- <del>…</del> et <ins>…</ins> : balises qui permettent d’indiquer des textes qui ont été insérés ou supprimés ;
- <acronym>…</acronym> : balise qui permet de préciser un acronyme ;
- ouvrantes-fermantes :
- <img /> : balise d’ajout d’images ;
- <br /> : balise de retour à la ligne.
Il existe bien d’autres balises beaucoup moins utilisées, mais sachez que la liste présente ici n’est pas exhaustive, j’ai préféré me limiter aux principales ainsi qu’à quelques exemples de balises plus rares.
N.B. : pour les référenceurs qui maîtrisent peu l’HTML, sachez qu’il y a une réelle différence entre les balises <strong> et <b> (pour « bold »). La première met en exergue du texte et a de la valeur aux yeux de GoogleBot, la seconde met en gras (mise en forme simple) sans ajout de valeur. Vous pouvez jouer avec les deux couples de balises si vous voulez une mise en forme en gras mais en insistant que sur certains mots clés…
Les balises de listes
Il est indispensable de bien connaître les balises spécifiques aux listes car nous les utilisons fréquemment, notamment pour créer des menus.
Toutes les balises se comportent en « block », ce qui simplifie les choses… Voici la liste complète :
- <ul>…<ul> pour créer des listes non ordonnées (listes à puces) et des menus ;
- <ol>…</ol> pour afficher des listes numérotées ;
- <li>…</li> s’intègre entre les balises <ul> ou <ol> pour chaque item de liste.
Voici un exemple simple :
Il existe également des listes de définition (au sens propre du terme), bien que leur usage soit rare :
- <dl>…</dl> contient la liste des définitions ;
- <dt>…</dt> pour indiquer le mot ou la notion à définir ;
- <dd>…</dd> pour rédiger la définition.
Il existe encore un nombre conséquent de balises spécifiques aux tableaux ou aux formulaires en HTML, je pourrais revenir sur ce point prochainement si vous le souhaitez, car l’usage de ces balises est plus complexe à assimiler au début…
Exemple de mise en page simple
Le code suivant représente une mise en page simple avec :
- un entête contenant un logo ;
- un bloc central de contenu séparé en deux parties : une colonne à gauche pour le contenu (ici : un titre, un texte et une image) et une à droite pour les données complémentaires ;
- un pied de page contenant des notions légales.
Voici le résultat :
Et le HEAD dans tout ça ?
Dans cette introduction à l’HTML, je n’ai pas insisté sur la tête du document HTML, je vais donc essayer de donner un rapide aperçu de son rôle, sans entrer dans le détail.
Tout ce qui est placé entre les balises <head> et </head> a un rôle pour le site qui va suivre. C’est ici que se placent notamment les balises de métadonnées ainsi que les balises <title>…</title> si chères aux référenceurs, mais aussi des balises de scripts ainsi que des liaisons avec des fichiers externes.
Voici globalement les noms des balises que vous pouvez rencontrer dans le HEAD :
- <title>…</title> pour le titre du document ;
- <meta /> pour les métadonnées ;
- <link /> pour des liaisons avec des fichiers externes ou internes mais invisibles aux usagers ;
- <script>…</script> pour ajouter des codes Javascript, jQuery (…) ;
- <style>…</style> pour insérer des éléments de style directement dans la page HTML (déconseillé).
Je pourrais revenir sur tout un article rien que sur le HEAD tant certains détails sont importants mais trop souvent galvaudés. Retenez déjà comment concevoir la partie visible de l’iceberg.
Sachez également que depuis quelques années, l’HTML 5 est en cours de développement avec de nouvelles (et nombreuses) balises. Selon le W3C, la fin des validations de la dernière mouture du langage devrait arriver pour la fin du second semestre 2014, il nous reste donc encore un peu de temps pour appréhender cette version… 😀
Merci !
L’HTML est essentiel, le minima lorsque l’on travaille dans le web !
Merci de donner cette petite initiation, (le site du zero propose un guide pour ceux qui souhaitent dès lors apprendre d’avantage.)
Beaucoup de livres existent et c’est l’une des meilleures manières d’apprendre, tout comme réaliser ses pages web en partant d’un notepad !
Marc
Oui mais, car il y a toujours un oui mais, dans le web… Oui mais tout cela serait parfait si tous les navigateurs web interpretaient tout cela de la même manière … Et vu que ce n’est pas le cas, il est toujours très fastidieux de faire une charpente ou un toit similaires sur les différents navigateurs : IE, chrome, Firefox, Safari, Opera, …. De plus le web s’accompagne maintenant de la matrise indispensable de javascript. Enfin bref, la simple maîtrise de l’html ne veut plus rien dire, désolé pour ceux qui se disait qu’être webmaster aurait pu être simple, ce n’est plus le cas
Fred@Référencement Jura Articles récents..Comment Google peut détecter les SEO ?
Pour le coup je ne suis pas entièrement d’accord. Il y a bien sûr une grande part de vrai dans ce que vous dites, les incompatibilités sont le lot quotidien des webmasters, mais cela est aussi le cas avec diverses versions de PHP, etc. Là, en xHTML 1.0 (et non en HTML 5), les compatibilités sont quand même très nombreuses de nos jours et les pages statiques ne nécessitent pas forcément du javascript (sujet qui pourrait être traité plus tard si Alexandra le souhaite). Pour faire la structure des pages, Javascript n’est pas utile, il n’est là que pour animer des éléments pour faire des effets particuliers, il n’est pas obligatoire, je pense que les exemples ne manquent pas pour prouver ce que je dis là… Toutefois, vous avez raison, le web n’est pas si simple, mais l’idée ici est surtout de présenter globalement le sujet pour des gens qui n’y connaissent rien en quelque sorte.
C’est bien dans cette optique que je me suis permis d’intervenir 😉 Désolé de faire un peu de hors sujet mais il y a quelques années il était possible de se former en quelques mois, à l’heure actuelle on pas DES métiers du web et je tiens à mettre en garde les gens qui se disent que c’est simple de devenir webmaster.
Fred@Référencement Jura Articles récents..Comment Google peut détecter les SEO ?
Pour le coup je suis entièrement d’accord. Rome ne s’est pas construite en un jour et s’il suffisait de quelques jours pour être un webmaster aguerri de nos jours, ce serait la fête. En réalité, on a plutôt l’impression d’en apprendre tous les jours, mais entre temps, ce sont des années qui passent… 😀
Bonjour ! Merci pour ce très bon article avec de bons rappels sur le langage HTML 🙂
Véronique Duong Articles récents..Outil automatique : identifier les auteurs (veilles et big data)
Un article qui introduit bien le concept du HTML en l’expliquant clairement. Il y a des notions qui ne semblent pas facile au premier abord mais qui paraissent toutes banales dès qu’on commence à comprendre le principe.
Pour rebondir sur les remarques de Fred, le métier de “webmaster” tend à disparaître au profit d’une multitude de métiers différents (développeur, graphiste, intégrateur, rédacteur…), si le webmaster a besoin de connaître un peu tout comme tu l’expliques (javascript, php…), un référenceur par exemple pourra se contenter de ne pas connaître le jquery. Par contre, il se passera plus difficilement du HTML pour l’optimisation des sites.
Je ne suis pas entièrement d’accord, l’xHTML et le CSS 2 sont largement compatibles, et si nous faisons peu d’erreurs de code, les incompatibilités sont réduites quasiment à néant. Et si nous parlons d’HTML 5, certains polyfills viennent sauver les meubles en cas de problème. Les incompatibilités sont un problème mais sincèrement, je suis rarement embêté avec ça… 😀
Oui mais, car il y a toujours un oui mais, dans le web… Oui mais tout cela serait parfait si tous les navigateurs web interpretaient tout cela de la même manière … Et vu que ce n’est pas le cas, il est toujours très fastidieux de faire une charpente ou un toit similaires sur les différents navigateurs : IE, chrome, Firefox, Safari, Opera, ….
Excellent article très très complet. Une bonne base pour (re)prendre connaissance des basics.
Merci beaucoup pour ces précieuses informations, je viens de lancer mon site en utilisant la solution WordPress mais en parcourant différents tutoriels j’ai pu voir qu’il fallait tout de même de temps en temps mettre les mains dans le code et j’avoue que pour moi c’est un peu compliqué n’étant webmaster à l’origine.
J’ai pu grâce à votre article y prendre les bases qui vont m’être bien utile pour m’aider à progresser dans ce domaine.