Qu’est-ce que le HTML (Hyper Text Markup Language) ?
Le HTML fait partie des langages de balisage les plus utilisés dans le monde pour la conception de sites Web. Sa syntaxe homogène et clairement structurée ainsi que sa courbe d’apprentissage minimale font partie de ses avantages. Le HTML est une bonne base pour créer un site Web moderne et agréable avec des éléments interactifs et est idéal pour faire ses premiers pas dans le Web design.
- HTML : définir Hyper Text Markup Language
- Le HTML n’est pas un langage de programmation
- Quel est l’usage du HTML ?
- À quoi ressemble la structure d’un code HTML ?
- Structure de base d’un document HTML
- La structure d’une balise HTML
- Les 10 balises HTML les plus importantes
- Quel rôle joue le HTML pour le SEO ?
- Quels sont les programmes HTML ?
- Apprendre le HTML facilement
HTML : définir Hyper Text Markup Language
HTML est l’abréviation de « Hyper Text Markup Language » et fait partie des langages de balisage d’hypertexte les plus utilisés avec Java et CSS. C’est en 1992 que Tim Berners-Lee, l’inventeur du World Wide Web, pose les bases du HTML avec la première spécification HTML. En décembre 1999, le World Wide Web Consortium (W3C) standardise officiellement la version HTML 4.0. Actuellement (en 2023), on utilise les versions XHTML et HTML5 pour la création de sites Web optimisés SEO.
Le HTML se définit par des caractéristiques très claires :
- Lors de la création d’un site Web, on utilise des balises HTML qui décrivent et structurent les éléments d’une page.
- La syntaxe du HTML est homogène et textuelle. Elle commence toujours par une balise d’ouverture et est clôturée par une balise de fermeture.
- Le HTML est considéré comme un langage de marquage (Markup) ou de balisage.
Le HTML n’est pas un langage de programmation
En principe, le HTML ne fait pas partie des langages de programmation. Au contraire des langages de programmation et de chiffrement comme PHP ou JavaScript, le HTML ne permet pas l’implémentation d’algorithmes, l’exécution de tâches, d’instructions ou de boucles. Le HTML fait partie des langages de balisage ou de marquage. Alors que le HTML décrit et structure un site Web grâce à une syntaxe textuelle et statique, les langages de programmation sont capables de créer des contenus dynamiques, d’effectuer des calculs complexes, de traiter des données et de prendre des décisions.
Vous souhaitez créer votre propre site Web professionnel en peu d’étapes ? Confiez la conception de votre site Web à notre équipe d’experts IONOS et bénéficiez de designs de qualité en plus d’un domaine et d’une boîte email professionnelle.
Quel est l’usage du HTML ?
Le HTML permet la création et l’édition des sites Web professionnels et privés. La structure de base, appelée également code source, est toujours similaire pour les sites Web en HTML en raison de sa syntaxe uniforme. Le code source HTML ainsi que le CSS (Cascading Style Sheets) indiquent aux navigateurs l’affichage des sites Web, de leur mise en page, leurs couleurs et typographie sur les différents appareils.
La version actuelle HTML5 met à disposition de nombreuses nouvelles possibilités d’utilisation et d’attributs HTML.
Parmi les possibilités d’utilisation et fonctions de HTML, on retrouve :
- La description de la mise en page et de l’aspect d’un site Web
- L’exécution de vidéos intégrées avec le HTML, d’éléments audio et de feuilles de calcul
- L’intégration d’éléments stylistiques pour la représentation de texte
- La navigation au sein d’un site grâce à des hyperliens
- La création de formulaires pour générer des leads (par ex. : un formulaire d’enregistrement, une newsletter, une demande de contact, un téléchargement)
- L’intégration de formulaires de recherche ou d’options de réservation en combinaison avec des plugins
- L’exécution de contenus de pages dynamiques qui dirigent vers des feuilles de style CSS ou des documents en JavaScript
Vous souhaitez développer votre présence en ligne mais n’avez aucune expérience en conception Web ? Créez votre propre site Web professionnel en quelques étapes simples avec IONOS. Choisissez un template à votre image et profitez de votre propre domaine, du chiffrement SSL et d’une boîte email personnalisée.
À quoi ressemble la structure d’un code HTML ?
La structure HTML de base est toujours très similaire du fait de l’homogénéité de sa syntaxe. Les documents HTML contiennent toujours les trois éléments de base suivants :
DOCTYPE
La déclaration de document se trouve toujours tout en haut au début d’un document HTML. La balise DOCTYPE html est retranscrite sous le format <!DOCTYPE html>. Elle indique au navigateur le type de document, la syntaxe de code ainsi que la version HTML. Le HTML5 sera par exemple caractérisé par la balise <html5>. Comme la balise DOCTYPE n’est pas un élément HTML à proprement parler, elle est la seule à figurer avant l’en-tête HTML du document.
En-tête HTML
Dans l’en-tête du document HTML, on retrouve les éléments suivants :
- Le titre du document
- La description
- L’auteur et le copyright
- L’encodage
- Des indications sur la scabilité
- L’intégration des informations de chiffrement et de style liés aux documents CSS ou JavaScript et autres ressources intégrées
- Des indications d’indexation pour les crawlers des moteurs de recherche avec la balise méta robots
Corps HTML
Le corps HTML est ouvert avec la balise <body> et contient toutes les informations sur la mise en page visible ainsi que sur les éléments de page dynamiques intégrés. Grâce aux balises HTML, le corps décrit tout ce que les internautes voient dans la zone d’affichage du navigateur lorsqu’ils consultent le site Web.
Structure de base d’un document HTML
Pour mieux se représenter la structure de base d’un document HTML, en voici un exemple :
<!DOCTYPE html>
<hmtl>
<head>
<title>…</title>
<meta …/>
</head>
<body>
</body>
</html>
La structure d’une balise HTML
À part la balise DOCTYPE qui n’a pas besoin de balise de fermeture ainsi que de quelques autres exceptions, tous les éléments d’un document HTML suivent le même principe des trois éléments :
- La balise d’ouverture < > : les balises d’ouverture sont toujours placées entre deux chevrons et indiquent au navigateur où l’élément commence à afficher du contenu.
- La balise de contenu : entre la balise d’ouverture et la balise de fermeture, on retrouve le contenu que le navigateur doit afficher ou exécuter. Celui-ci comprend des paragraphes de texte, des lecteurs vidéo, des images et des formulaires.
- La balise de fermeture </> : la balise de fermeture est situé entre deux chevrons avec une barre de fraction. Elle indique au navigateur où l’élément HTML se termine.
La structure d’un élément HTML est semblable au modèle suivant :
<…>Texte d’exemple</...>
<…>Texte d’exemple</...>
Les 10 balises HTML les plus importantes
Il existe une balise HTML spécifique pour quasiment tous les souhaits de design. Comme la liste de toutes les balises HTML est trop longue pour être répertorier ici, nous vous présentons ci-dessous les balises les plus importantes pour un document HTML :
| Balise HTML | Fonction |
|---|---|
<!DOCTYPE>
|
Détermine le type de document HTML |
<html>
|
Indique le début du HTML |
<head>
|
Ouvre l’en-tête HTML |
<body>
|
Ouvre le corps HTML |
<h1>…</h1>
|
Indique les titres H1 (il en va de même pour les balises H2 et H3) |
<a href="Link-URL">Terme lié</a>
|
Caractérise les liens dans le document HTML |
<p>…</p>
|
Caractérise les paragraphes dans un document |
<ul>…</ul>
|
Caractérise les listes |
<li>…</li>
|
Apparaît en combinaison avec des listes et marque des points en début de liste |
<i>…</i>
|
Caractérise l’écriture cursive |
Quel rôle joue le HTML pour le SEO ?
Un code HTML propre et correct permet aux navigateurs, moteurs de recherche et crawlers d’afficher et d’indexer votre site Web correctement. Une structure de base d’un document HTML soignée avec des éléments intégrés en CSS ou JavaScript (ou dans d’autres langages) a donc un effet positif sur le positionnement d’un site Web dans les moteurs de recherche. Le simple oubli d’une balise de fermeture peut, au contraire, conduire à un mauvais affichage de la page. De plus, les balises méta déterminent l’apparence des snippets ainsi que l’indexation correcte d’une page dans les moteurs de recherche.
Parmi les balises HTML les plus importantes qui peuvent influencer le SEO, on peut citer :
-
La balise Titre : la balise
<title>…</title>dans l’en-tête du document HTML sert de titre pour les snippets des moteurs de recherche et joue un rôle important pour le positionnement d’un site. - La balise méta Description : la balise méta description comprend un résumé du contenu du site Web. Elle doit être courte et efficace. Elle apparait également dans l’en-tête HTML et dans les résultats de recherche, c’est pourquoi elle est essentielle pour le SEO.
- La balise méta Robots : les balises robots donnent des indications au moteur de recherche sur la manière de procéder des crawlers où sur l’indexation des pages. Ainsi, elles peuvent influencer l’indexation ou non des pages d’un site.
-
La balise ALT : les balises ALT
<alt>…</alt>décrivent les contenus des images intégrées. Elles permettent une meilleure accessibilité ainsi qu’un meilleur positionnement lors d’une recherche d’images. -
La balise Anchor : grâce aux balises d’encrage Anchor
<a>…</a>, les hyperliens qui renvoient à des contenus internes ou externes peuvent être intégrés au document HTML. Ils permettent d’améliorer le temps de chargement, l’ergonomie et le positionnement d’une page.
Quels sont les programmes HTML ?
Comme le HTML est gratuit, il est assez simple de créer son propre site Web. Toutefois, vous aurez besoin d’éditeurs HTML capables de créer des documents HTML, de les enregistrer et de les publier. Il existe aussi bien des éditeurs gratuits que payants sous forme de logiciels de bureau à installer ou d’éditeurs en ligne.
Parmi les meilleurs éditeurs HTML, on retrouve :
- Notepad++ (gratuit)
- NoteTab (version gratuite et payante)
- CoffeeCup (version gratuite et payante)
- Visual Studio Code (gratuit)
- Atom (gratuit)
- Sublime Text 3 (version gratuite et payante)
- Android Studio (gratuit)
- Brackets (gratuit)
- CotEditor (gratuit)
- Bluefish (gratuit)
- Komodo Edit (gratuit)
Apprendre le HTML facilement
Le HTML fait non seulement partie des langages de balisage les plus utilisés dans le Web design, mais aussi des plus faciles à comprendre. De plus, le HTML est perçu comme un savoir standard dans le développement Web chez les développeurs comme chez les programmeurs. Si vous souhaitez apprendre le HTML, vous profiterez d’une syntaxe simple et claire ainsi que de bases solides pour réaliser de nombreux projets Web. La création de site Web pour les débutants via un éditeur d’après le principe WYSIWYG (« What You See Is What You Get ») est particulièrement simple et rapide. Celle-ci n’exige aucunes connaissances approfondies en HTML. L’éditeur se charge de la saisie du code HTML grâce à des fonctions intégrées de structuration, de saisie et de glisser-déposer.
Articles similaires
Intégrer du CSS dans une page HTML : guide pratique avec exemples
HTML et CSS font partie des éléments centraux du World Wide Web et sont souvent utilisés ensemble. Lorsque vous travaillez avec un document HTML et que vous souhaitez intégrer du CSS, il existe plusieurs méthodes internes et externes pour appliquer efficacement les spécifications de format à votre contenu textuel. Apprenez comment utiliser du CSS dans un fichier HTML dans ce guide pratique avec…
Attributs HTML : aperçu des principaux attributs
Les attributs HTML sont un outil important pour optimiser un site Web et améliorer l’expérience utilisateur. Ils permettent d’enregistrer des informations concernant les éléments ou de définir des caractéristiques de conception. Découvrez ici ce que sont exactement les attributs HTML, comment ils sont utilisés et quels sont les plus courants.
Balise HTML img : comment insérer des images sur votre site Web ?
Pour intégrer des images et des graphiques dans votre site Web, utilisez la balise img. Celle-ci vous permet de positionner facilement les images. Grâce à différents attributs, vous veillez ensuite à ce que le graphique s’intègre de manière optimale dans votre page. Nous vous expliquons comment le tag est structuré et avec quels attributs il peut être utilisé.
Kaspars GrinvaldsShutterstock Tutoriel CSS : introduction aux feuilles de style en cascade
Sans le CSS, les pages Web ne constitueraient qu’un ensemble d’éléments de texte divisés grosso modo en sections par titres et paragraphes. Seule la possibilité de formater HTML via des feuilles de style en cascade fait du World Wide Web ce qu’il est aujourd’hui : un mélange coloré de sites Web conçus individuellement, de la page d’accueil d’un site Internet amateur au site Web professionnel au…
