HTML est l'épine dorsale d'Internet aujourd'hui. Des millions de sites web ont formé Internet, et HTML est la pierre angulaire de tous ces sites. Il y a vingt ans, même un simple blogueur amateur nécessitait des connaissances en codage web pour se protéger ou ajouter une simple fonctionnalité à son site. Aujourd'hui, avec la multitude d'éditeurs et de plugins disponibles, même les bases du HTML ne sont plus nécessaires.
Le problème, c'est que si vous ne connaissez pas quelques bases, vous pouvez facilement vous retrouver dans une situation délicate et devoir engager un développeur onéreux pour résoudre un problème qui peut être mineur. De plus, apporter des modifications à votre blog, comme l'ajout d'un widget de texte personnalisé, requiert quelques connaissances.
Et si vous constatez que la mise en page du contenu ne vous convient pas, la connaissance du langage HTML peut vous aider à vous remettre sur la bonne voie.
Avant de commencer - Les bases du HTML
Qu'est-ce que le HTML?
HTML est l'abréviation de HYper Tposte MArkupe Llangage. C'est le langage standard pour le balisage du contenu dans les navigateurs Web.
Le HTML est représenté par des « éléments ». Ces éléments sont également appelés « balises ».
Pourquoi le HTML est-il nécessaire ?
Les navigateurs web ne peuvent afficher un site web que s'il est rédigé dans leur langue. HTML est le langage de balisage le plus répandu et celui qui bénéficie de la meilleure acceptation par les navigateurs web.
C'est pourquoi vous avez besoin de HTML.
Le HTML est-il sensible à la casse ?
HTML n'est pas sensible à la casse. Mais la meilleure pratique consiste à écrire du HTML avec les cas appropriés.
Étapes pour créer votre premier fichier HTML
Vous pouvez créer un fichier HTML simple avec le Bloc-notes de votre ordinateur. Cependant, cela sera fastidieux et nécessitera l'écriture de nombreuses lignes de code.
Vous avez besoin d'un éditeur de code. Un bon éditeur facilitera l'écriture et l'organisation de codes volumineux. J'utilise et recommande Notepad++ (gratuit et open source) pour écrire des langages web. D'autres éditeurs comme Sublime Text et Atom sont également disponibles.
Voici ce que tu dois faire:
- Installer un éditeur de code
- Ouvrez-le
- Créer un nouveau fichier
- Enregistrez-le en tant que fichier .html
1. Bonjour le monde !
Copiez et collez le code suivant dans votre nouveau fichier HTML et enregistrez-le. Maintenant, lancez-le sur votre navigateur Web.
HTML Code
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Sortie :
Félicitations ! Vous avez créé votre tout premier fichier HTML. Vous n'avez pas besoin de le comprendre pour l'instant. Nous y reviendrons bientôt.
Comprendre la structure HTML
Chaque fichier HTML a une structure nue commune. C'est ici que tout commence. Et chaque grande page de codes viendra à cette structure après avoir été réduite.
Essayons de comprendre cela à partir du code « Hello World ! ». Les éléments suivants sont obligatoires pour tout fichier HTML.
- = Il s'agit d'une déclaration au navigateur indiquant qu'il s'agit d'un fichier HTML. Vous devez le spécifier avant le étiqueter.
- = Ceci est l'élément racine d'un fichier HTML. Tout ce que vous écrivez se trouve entre et .
- = Ceci est la partie méta-information pour un navigateur. Les codes à l'intérieur de cette balise n'ont pas de sortie visuelle.
- = Il s'agit de la partie affichée par un navigateur web. Ce que vous voyez sur un site web est le rendu des codes entre et .
2. Balises HTML
HTML est la collaboration de centaines de balises différentes. Vous devez apprendre comment ils fonctionnent. Vous devez également vous assurer qu'ils les ont utilisés correctement.
Les balises HTML comportent généralement une balise d'ouverture et une balise de fermeture. La balise d'ouverture contient le mot-clé entouré des signes inférieur à (<) et supérieur à (>). La balise de fermeture est identique, à l'exception d'une barre oblique (/) supplémentaire après le signe inférieur à (<).
Étiquettes de tête
Toutes les balises de tête vont entre et Ils contiennent des méta-informations pour les navigateurs web et les moteurs de recherche. Ils n'ont pratiquement aucun rendu visuel.
La balise de titre définit le titre d'une page Web visible dans l'onglet du navigateur. Ces informations sont utilisées par les programmes Web et les moteurs de recherche. Vous pouvez avoir un titre maximum par fichier HTML.
Code:
<title>My first web page</title>
La balise de lien relie votre page HTML à des ressources externes. Elle est principalement utilisée pour relier une page HTML à des feuilles de style CSS. C'est une balise autofermante qui ne nécessite pas de terminaison. . Ici, rel signifie la relation avec le fichier et src signifie la source.
Code:
<link rel="stylesheet" type="text/css" src="style.css">Meta est une autre balise à fermeture automatique qui fournit des informations méta sur un fichier HTML. Les moteurs de recherche et autres services Web utilisent ces informations. Les balises META sont indispensables si vous souhaitez optimiser votre page pour les moteurs de recherche.
Code:
<meta name="description" content="This is the short description that search engines show"La balise script est utilisée pour inclure un script côté serveur ou pour créer un lien vers un fichier de script externe. Il peut avoir deux attributs dans la balise d'ouverture. L'un est le type et l'autre est la source (src).
Code:
<script type="text/javascript" src="scripts.js"></script>La balise Noscript fonctionne lorsque les scripts sont désactivés dans un navigateur web. Elle rend une page compatible avec ceux qui n'autorisent pas les scripts dans leur navigateur web.
Code:
<noscript><p>Alas! Scripts are disabled.</p></noscript>Balises du corps
Toutes les balises du corps vont entre et Ils ont des sorties visuelles. C'est là que le travail est le plus important. Vous devez utiliser ces balises pour structurer le contenu de votre page principale.
à
Ce sont les balises d'en-tête. Le titre le plus important est étiqueté et le moins important avec . Vous devez les utiliser dans la bonne hiérarchie.
Code:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>Sortie :
Balises de formatage
Le texte d'un fichier HTML peut être formaté à l'aide de nombreuses balises de formatage. Cela sera nécessaire pour mettre en évidence un mot ou une ligne de votre contenu.
Code:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>Sortie :
Vous pouvez modifier le rendu de certains codes grâce à la balise de commentaire. Le code apparaîtra dans le code source, mais ne sera pas rendu. Cette balise sert principalement à créer la documentation des fichiers HTML pour référence ultérieure.
Exemple :
<!-- <p>You can comment out any code by surrounding them in this way</p> -->Autres balises HTML importantes
L'ancre est une balise précieuse, utilisée presque partout. Aucune page web ne sera visible sans au moins un lien d'ancrage.
La structure est la même. Il a une ouverture et une fermeture . Le texte que vous souhaitez ancrer est compris entre et .
Certains attributs définissent où et comment l'utilisateur va après avoir cliqué dessus.
- ahref = "" = Il définit le lien de destination. Le lien va entre les guillemets doubles.
- cible = "" = Il définit si l'URL s'ouvrira dans un nouvel onglet de navigateur ou dans le même onglet. target = ”_ blank” est pour le nouvel onglet et target = ”_ self” est pour l'ouverture dans le même onglet.
- rel = "" = Définit la relation entre la page courante et la page liée. Si vous ne faites pas confiance à la page liée, vous pouvez définir rel=”nofollow”.
Code:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>Sortie :
La balise image est une autre balise importante sans laquelle vous ne pouvez pas imaginer de nombreux sites Web basés sur des images.
est une balise à fermeture automatique. Elle ne nécessite pas la fermeture traditionnelle comme Il y a certains attributs que vous devez connaître avant de pouvoir l'utiliser correctement.
- src = "" = Ceci est pour définir le lien source de l'image. Mettez le lien juste entre les guillemets.
- alt = "" = Cela représente un texte alternatif. Lorsque votre image ne se charge pas, ce texte donnera aux utilisateurs une idée de l’image manquante.
- width = "" = Il définit la largeur d'une image en pixels.
- Hauteur = "" = Il définit la hauteur d'une image en pixels.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />Sortie :
Conseils : Vous souhaitez insérer une image cliquable ? Entourez le code de l'image d'une balise. Voyez comment procéder.
ou
La balise de liste sert à créer une liste d'éléments. signifie listes ordonnées (liste numérotée) et représente des listes non ordonnées (puces).
Les éléments de la liste à l'intérieur du ou est marqué avec . li signifie liste. Vous pouvez en avoir autant comme tu veux à l'intérieur du parent ou marque.
Code:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Sortie :
La balise table sert à créer une table de données. Quelques balises de niveau internes définissent les en-têtes, les lignes et les colonnes de tableaux.
est le code parent externe. Dans cette balise, représente la ligne de table, représente la colonne de table et signifie en-tête de tableau.
Code:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>Sortie :
Remarque: les valeurs à l'intérieur du premier sont des titres. Donc, nous avons utilisé qui applique un effet de texte en gras au texte.
Groupe de table
Vous pouvez étendre les fonctionnalités d'une table à l'aide d'éléments de regroupement de tables. Vous aurez parfois besoin de créer de grands tableaux divisés en plusieurs pages.
En regroupant les données de votre tableau en en-tête, corps et pied de page, vous pouvez autoriser le défilement indépendant. L'en-tête et la partie du corps s'imprimeront sur toutes les pages de votre table.
Les balises de regroupement de table sont:
- = Pour envelopper les en-têtes d'une table. Il imprime sur chaque page divisée de la table.
- = Pour envelopper les données principales d'une table. Vous pouvez en avoir autant Comme vous le souhaitez. UNE balise signifie un groupe de données distinct.
- = Pour envelopper les informations de pied de page d'une table. Il imprime sur chaque page divisée de la table.
Veuillez noter que l'utilisation du regroupement n'est pas obligatoire. Vous pouvez l'utiliser pour améliorer la lisibilité des tableaux volumineux. Certains développeurs utilisent ces balises comme sélecteurs CSS.
Voici comment nous pouvons regrouper notre tableau illustré en , et :
Code:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>Sortie :
L'élément Form est utilisé pour créer des formulaires interactifs pour les pages Web. Un formulaire HTML contient plusieurs éléments consécutifs. Par exemple:, , etc.
L'attribut action dans la forme est très important. Il pointe vers une page côté serveur ou une page tierce pour traiter les informations. Pour le traitement, vous devez d’abord définir une méthode.
Vous pouvez utiliser deux méthodes : get ou post. Get envoie toutes les informations au format URL, tandis que Post les envoie dans le corps du message.
Il existe de nombreux types d'entrées pour les formulaires. Le type d'entrée très basique est le texte. Il est écrit comme . Les types peuvent également être radio, case à cocher, e-mail, etc. Il devrait y avoir une entrée de type de soumission en bas pour créer un bouton de soumission.
La balise permet de créer des étiquettes et de les associer aux entrées. La règle d'association des étiquettes aux entrées est la suivante : les attributs for=” ” de l'étiquette et id=” ” de l'entrée doivent avoir la même valeur.
Code:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>Sortie :
Remarque: j'ai pointé l'action sur une valeur null car il n'était connecté à aucun serveur pour traiter les informations.
3. Attributs HTML
Les attributs sont un type de modificateurs pour les balises HTML. Ils ajoutent de nouvelles configurations aux balises HTML.
Un attribut ressemble à attributename = "" et se trouve dans la balise HTML d'ouverture. La valeur de l'attribut se situe entre les guillemets.
id = ”” et class = ””
id et class sont les identifiants des balises HTML. Différents noms sont désignés pour différents éléments HTML à l'aide d'identificateurs. Vous pouvez utiliser un identificateur de classe pour plusieurs éléments. Mais vous ne pouvez pas utiliser un identifiant unique pour plusieurs éléments.
Code:
<h1 class="heading">This is the main title</h1>href = ""
href signifie référence hypertexte. Ils pointent les utilisateurs vers des liens de référence. La balise d'ancrage utilise href pour envoyer les utilisateurs vers une URL de destination.
Code:
<a href="https://www.google.com/">Google</a>src = ""
src signifie source. Il définit la source d'un média ou d'une ressource que vous utilisez dans le fichier HTML. La source peut être une URL locale ou tierce.
Code:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt = ""
alt signifie alternative. C'est un texte de sauvegarde qui est utilisé lorsqu'un élément HTML ne peut pas être chargé.
Code:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />style = ""
L'attribut style est souvent utilisé dans les balises HTML. Il fait le travail de CSS au sein de la balise HTML. Vos propriétés de style se situent entre les guillemets.
Code:
<h2 style="color:red">This is another title</h2>4. Affichage du code: Block vs Inline
Certains éléments commencent toujours sur une nouvelle ligne et prennent toute la largeur disponible. Ce sont des éléments «Block».
Ex: , , - , forme etc.
Certains éléments occupent uniquement l'espace requis et ne commencent pas sur une nouvelle ligne. Ce sont des éléments « en ligne ».
Ex: ,, ,, etc.
Lorsque vous utiliserez des styles CSS, vous devrez différencier les éléments de bloc des éléments en ligne. Dans ce guide HTML, ce n'est pas très nécessaire.
Code:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>Sortie :
5. Guillemets doubles ou guillemets simples en HTML
Cette question est évidente. Que faut-il utiliser en HTML ? Des guillemets simples ou doubles ? On semble utiliser les deux, mais lequel est correct ?
En HTML, les guillemets simples et doubles sont identiques. Ils n'ont aucune incidence sur le résultat.
Vous pouvez utiliser qui vous préférez. Mais mélanger les deux dans une page de codes est considéré comme une mauvaise pratique. Vous devriez être compatible avec l'un d'entre eux.
6. HTML sémantique vs HTML non sémantique
Semantic HTML est la dernière version de HTML, également appelée HTML5. C'est la version développée du HTML non sémantique et du XHTML.
Pourquoi HTML5 est-il meilleur ? Dans les versions précédentes, les éléments HTML étaient identifiés par des noms d'identifiant/de classe. Par exemple : était considéré comme un article.
En HTML5, la balise se représente comme un article sans avoir besoin d'un identifiant id/classe.
Par souci de HTML5, les moteurs de recherche et autres applications Web peuvent désormais mieux comprendre une page Web. Les sites Web sémantiques se sont avérés meilleurs pour le référencement.
Voici une liste de balises HTML5 populaires:
- = Ceci est pour emballer le contenu principal que vous voulez montrer à vos téléspectateurs.
- = Ceci est destiné à marquer l’en-tête d’un contenu tel que le titre ou la méta auteur.
- = Il spécifie un contenu défini par l'utilisateur ou indépendant pour vos téléspectateurs.
- = Il peut regrouper n'importe quel code tel que l'en-tête, le pied de page ou la barre latérale. Vous pouvez dire, c'est la forme sémantique d'un div.
- = C’est là que votre contenu de pied de page, votre avis de non-responsabilité ou votre texte de copyright appartient.
- = Il vous permet d’insérer des fichiers audio sans aucun problème de plugin.
- = Comme , vous pouvez insérer des vidéos en utilisant cette balise sans problèmes de plugin.
Une structure HTML5 simple ressemblerait à ceci:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. Validation HTML
La plupart des professionnels du web valident leur code une fois terminé. Pourquoi est-il nécessaire de valider un code qui fonctionne correctement ?
Il existe deux raisons possibles pour valider vos codes:
- Cela vous aidera à rendre votre code compatible avec plusieurs navigateurs et plateformes. Il est possible que le code n'affiche aucune erreur dans votre navigateur actuel, mais il est possible qu'il en affiche une autre. La validation du code corrigera le problème.
- Les moteurs de recherche et autres programmes web peuvent interrompre l'exploration de votre page si celle-ci contient des erreurs. Vous pouvez vérifier par validation qu'elle ne contient aucune erreur majeure.
W3C Validator est le service le plus populaire pour la validation de code. Il propose plusieurs méthodes de validation. Vous pouvez télécharger un fichier ou saisir directement le code dans son moteur de validation.
Passer à l'étape suivante : de la rédaction HTML à la création et à l'hébergement de votre site Web
Maintenant que vous maîtrisez les fondamentaux du HTML, vous êtes sur la bonne voie pour créer des pages web fonctionnelles et bien structurées. Que vous continuiez à coder manuellement ou que vous préfériez une approche plus simple, de nombreux outils vous aideront à donner vie à vos projets.
Si vous cherchez à créer des sites Web sans plonger dans le code, pensez à explorer notre liste des meilleurs créateurs de sites Web sans codeCes plateformes vous permettent de concevoir et de lancer facilement des sites Web professionnels, à l'aide d'interfaces intuitives par glisser-déposer, parfaites pour transformer rapidement vos idées en réalité sans sacrifier la flexibilité.
Pour ceux qui sont prêts à lancer leurs projets HTML, choisir le bon service d'hébergement est crucial. Découvrez quelques exemples. meilleurs fournisseurs d'hébergement de sites Web statiques dans ce guide pour trouver des options abordables qui complètent parfaitement vos sites codés à la main.
Quel que soit votre choix, associer vos compétences HTML aux outils et solutions d'hébergement adaptés constituera la base de votre présence en ligne. Bon codage !
