Si vous souhaitez devenir webmaster et apprendre Comment créer un site internet, vous trouverez peut-être assez intimidante la perspective de vous familiariser avec le HTML.

C’est cependant quelque chose qui ne peut être évité, car la grande majorité des pages de destination des sites Web que vous visitez auront été écrites et structurées à l’aide d’éléments HTML. En fait, HTML est désormais utilisé par plus de 74 % de tous les sites Web connus, tandis que ce langage contribue également à tout améliorer, de la conception de votre site à la qualité du contenu qu'il présente.

Dans ce guide, nous explorerons les principes de base du HTML et ses applications potentielles, avant d'examiner des exemples d'éléments individuels que vous utilisez lors du codage de votre site Web.

Qu'est-ce que le HTML?

En termes simples, HTML représente le langage de balisage standard pour créer des pages Web en ligne. Il signifie Hyper Text Markup Language et sa fonction principale est d'établir la structure, la mise en page et la présentation des pages de destination individuelles. Bien que les navigateurs Web n'affichent pas directement le langage HTML, celui-ci joue un rôle central en aidant à créer un site visible, accessible et facile à utiliser.

Le HTML repose également sur un certain nombre d'éléments individuels qui construisent progressivement les pages Web, structurent la présentation du contenu et donnent vie à votre site Web. Ces éléments sont créés et contenus dans des « balises », qui définissent des éléments de contenu alternatifs tels que des titres, des paragraphes et des exemples similaires.

Nous explorerons ces éléments et leur construction plus en détail ci-dessous, tout en examinant également comment ils peuvent être personnalisés pour introduire de la couleur, des liens et une typographie variable sur votre site Web.

Où est utilisé HTML ?

Comme nous pouvons le constater, l’application la plus courante du HTML est la conception des pages de destination individuelles qui composent votre site Web. Ce n’est pas la seule application de cet outil de codage populaire, cependant, comprendre ses utilisations supplémentaires vous aidera à tirer le meilleur parti du langage en tant que nouveau webmaster. Voici donc quelques-unes des autres façons dont le HTML peut être appliqué :

• Créer des éléments personnalisables dans une page existante. Si vous avez l'intention d'autoriser articles de blog commentaires ou la publication de contenu généré par les utilisateurs sur votre site Web, vous pouvez utiliser des fragments de code HTML pour l'activer. Ces éléments permettront aux utilisateurs de mettre en valeur des mots-clés, d'intégrer des liens et de formater les commentaires en fonction des restrictions que vous mettez en place en tant que modérateur.
• Créer du contenu supplémentaire pour le courrier électronique. Le courrier électronique utilise également HTML comme langage pour les messages en texte enrichi, qui contiennent des liens, du texte et une variété d'autres éléments qui ne peuvent pas être présentés uniquement en texte brut. Ainsi, si vous souhaitez partager un ebook lié à votre site Web par courrier électronique, vous pouvez utiliser le HTML pour optimiser l'impact de votre message.
• Comprendre les documents d'aide hors ligne installés sur votre ordinateur. Il est intéressant de noter que HTML est utilisé comme format pour les documents d'aide sur ordinateur accessibles hors ligne. Une connaissance de base du HTML peut donc vous aider à comprendre les problèmes liés à votre matériel et à les résoudre plus rapidement, ce qui peut garantir que vous pourrez restaurer votre site Web plus rapidement dans les cas où il est hors ligne.

Structure des pages HTML

Avant de pouvoir créer une page HTML, vous devez disposer des bases.

Typiquement, une page sera composée de trois éléments structurels :

1. Entête: L'en-tête contient du contenu pertinent pour toutes les pages de votre site, comme un logo ou le nom du site Web et un système de navigation. L'en-tête est visible sur chaque page.
2. Corps principal: Celui-ci occupe la plus grande surface d'une page Web. Il contient du contenu spécifique à la page consultée.
3. Pied de page: Le contenu du pied de page comprend généralement des informations de contact, une adresse de livraison ou des mentions légales. Comme l’en-tête, le pied de page apparaît sur chaque page, mais il est positionné en bas.

Voici à quoi ressemblent ces éléments structurels de base lorsqu’ils sont réunis :

Voici un autre exemple, utilisant les balises d'en-tête et la balise de paragraphe pour structurer le contenu de manière esthétique. De plus, nous avons ajouté une balise de pied de page pour le contenu situé sous le corps principal d'une page :

Balises HTML

Le point de départ de tout code HTML est constitué de balises individuelles, qui peuvent être utilisées pour créer tous les éléments cruciaux et aider à structurer vos pages Web.

Ci-dessous, nous examinerons les balises les plus courantes avant d'explorer comment elles peuvent être exploitées pour générer des éléments spécifiques sur la page :

Balises d'en-tête

Tous les documents en ligne, y compris les pages Web, commencent par un titre. Ceux-ci sont construits à l'aide de balises HTML, le langage autorisant actuellement jusqu'à six éléments de taille variable qui vous permettent également de structurer votre contenu avec des titres, des sous-titres supplémentaires et des lignes de texte en gras surlignées. Pour commencer votre titre, il vous suffit de préfixer le texte pertinent avec le , , , , ou étiquette en fonction de la taille souhaitée.

Vous devez ensuite appliquer une balise fermante à la fin du titre pour encapsuler le texte, et sera affiché comme suit au format HTML :

Une fois confirmé, cela se traduira par l'esthétique suivante sur la page de destination de votre site Web :

Ici, les différentes tailles des titres variables sont claires, tout comme le fait que le navigateur ajoute une ligne avant et après le titre. Vous remarquerez également que la balise de fermeture à la fin du texte du titre a une esthétique légèrement différente, mais nous en parlerons dans le chapitre suivant alors que nous cherchons à utiliser des balises pour définir des éléments spécifiques.

Balises de paragraphe

Un principe similaire est appliqué aux balises de début de paragraphe, qui sont représentées par . Cela vous permet de structurer votre contenu et de le diviser en paragraphes pertinents, ce qui se traduit par une expérience de lecture plus facile et plus fluide. Une fois de plus, le La balise doit être placée au début du texte concerné, avant que la balise de fermeture alternative ne soit appliquée à la fin pour compléter l'effet. Cependant, contrairement aux balises de titre, il n’existe pas de diversité numérique susceptible de modifier la taille du texte présenté dans le paragraphe.

En dehors du format HTML, cela décomposera le texte comme suit sur votre page Web terminée :

Balises de saut de ligne

Les premiers exemples représentent les balises HTML les plus basiques, mais il y en a d'autres qui utilisent un format différent et des prises de fermeture alternatives. Prenez par exemple les sauts de ligne qui créent une distinction selon laquelle les lignes de texte sont interrompues et se poursuivent sur la ligne suivante. Il existe une différence fondamentale entre les sauts de ligne et les paragraphes dans le domaine du HTML, car si ces derniers sont des éléments de bloc standard contenant du texte, les premiers créent une séparation au sein d'un élément existant. élément.

Pour cette raison, les sauts de ligne représentent un élément vide en HTML et ne sont donc définis ni par des balises d'ouverture ni de fermeture. Au lieu de cela, ils sont représentés par le balise, qui peut être insérée dans un existant éléments pour diviser le texte et potentiellement mettre en évidence des informations importantes. L'espace unique entre le personnage et la barre oblique est cruciale, sinon la balise n'est pas reconnaissable au format HTML.

Une fois appliqué, cela divisera le texte comme suit :

Comme vous pouvez le constater, vous pouvez appliquer des sauts de ligne aussi souvent que vous le souhaitez dans un élément de paragraphe existant, à condition qu'ils ajoutent de la valeur et facilitent la digestion des informations. Vous verrez également que les balises de paragraphe d'ouverture et de fermeture restent inchangées, les balises de saut de ligne étant utilisées pour modifier la mise en page du texte inclus.

C'est l'un des exemples de la façon dont les balises HTML peuvent être utilisées pour modifier des éléments existants, ce qui joue un rôle clé dans la définition de la présentation visuelle de vos pages Web et de votre contenu.

Lignes horizontales

De même, il existe d'autres balises qui peuvent être utilisées dans le élément ou pour séparer davantage les corps de texte sur votre page Web. L'un des plus utilisés est le balise, qui permet de créer un élément vide qui trace une ligne visuelle horizontale entre les sections alternées d’un document en ligne. Vous souhaiterez peut-être positionner une ligne entre deux corps de texte, par exemple, afin de recentrer le lecteur ou simplement d'introduire un nouvel élément visuel. Voici comment créer une telle coupure en HTML :

Ici, la rupture entre les caractères hr et la barre oblique mettent en évidence la construction d'un élément vide, alors qu'une fois encore, aucune balise de fermeture n'est requise pour compléter l'effet. Cela créera le visuel suivant :

Balises d'images

Les balises d'image représentent également des éléments vides en HTML, ce qui signifie encore une fois qu'elles ne comportent pas de balise de fermeture. Comme ils ne contiennent que des attributs liés à l'URL de l'image que vous intégrez sur le site, ils sont définis simplement par le balise au début de l’élément. Ceux-ci peuvent être placés n’importe où sur votre site Web, bien qu’il soit inhabituel de les inclure dans des éléments existants tels que des paragraphes ou des titres. Voici comment une balise d’image HTML typique se présentera :

Vous devez également fournir un texte alternatif pour votre image, ce qui aide les gens à la visualiser en cas de temps de chargement lents ou d'utilisation d'un lecteur d'écran. De cette façon, si le navigateur ne trouve pas d’image, il affichera la valeur de l’attribut alternatif aux téléspectateurs. Celui-ci utilise à nouveau la balise image, mais inclut un ensemble d'attributs différent :

Éléments HTML

Auparavant, nous avons examiné comment de simples balises HTML sont utilisées pour définir des éléments sur la page, tout en explorant également comment elles peuvent être personnalisées davantage en utilisant des éléments vides contenant des balises d'image et de saut de ligne. Cela nous aide à comprendre la relation qui existe entre les balises et les éléments, et comment ils peuvent être utilisés pour définir différents types de contenu sur votre site Web.

Alors que tous les aspects du langage HTML sont représentés par une balise, par exemple, un élément défini qui inclut du contenu doit avoir à la fois une balise de début et une balise de fermeture. Ainsi, les titres et les paragraphes sont des éléments HTML car ils utilisent des balises de début et de fermeture pour encapsuler et augmenter le texte pertinent. En revanche, les éléments vides contiennent des attributs ou aucun contenu, ce qui leur permet d'être utilisés dans des éléments existants sans avoir besoin d'une balise de fermeture.

Définir des éléments HTML

Lorsque vous utilisez des exemples tels que des titres et des paragraphes, l'application correcte des balises de début et de fermeture est cruciale. C'est la balise de début (comme ou ) qui définit l'élément en question, par exemple, tandis que la balise de fermeture garantit que cet élément ne se poursuit pas dans le reste de la page Web. Si vous n'utilisez pas la fermeture à la fin du paragraphe souhaité, par exemple, le texte apparaîtra dans un seul bloc inesthétique et extrêmement difficile à lire.

Toutes les balises de fermeture sont identiques aux balises de début, à l'exception du fait que les premières comportent une barre oblique avant les caractères pertinents. Ainsi, dans le cas d'un titre, la balise de fermeture sera , tandis que pour les paragraphes vous utiliserez toujours pour définir la rupture dans le texte. Cela nécessite une attention particulière aux détails lors du codage, et il est important de noter lors de la programmation des titres que le numéro que vous utilisez (comme h1 ou h1) est appliqué à la fois dans les balises de début et de fermeture.

Utiliser des éléments HTML imbriqués

À ce stade, il est clair que les documents HTML et les pages Web sont constitués d’une arborescence de divers éléments, qui servent de base à un ensemble d’actifs. Nous avons également examiné comment ces éléments peuvent être formés et utilisés pour structurer le contenu en ligne, et nous allons maintenant continuer en examinant les éléments HTML imbriqués.

Tout comme les éléments vides et les balises autonomes (comme peuvent être incorporés dans des éléments HTML définis, les éléments dits imbriqués peuvent également être hébergés dans du contenu tel que des titres et des paragraphes. Ceux-ci incluent des exemples tels que des lettres en gras et en italique et du texte souligné, tandis qu'ils peuvent être appliqués pour ajouter de la personnalité à votre contenu et attirer l'œil du lecteur sur des points d'intérêt spécifiques.

Texte en gras, italique et barré en HTML

Supposons que vous souhaitiez mettre en évidence un mot dans un élément de paragraphe existant. Vous pouvez y parvenir en le mettant en gras, en utilisant de simples balises dans le standard. élément. En utilisant HTML, vous programmerez cela comme suit :

Ici, l'élément imbriqué possède à la fois une balise de début et une balise de fermeture, chacune suivant un format similaire à celles associées aux titres et aux paragraphes. Ils peuvent être utilisés de manière transparente dans les éléments existants et, dans ce cas, cela produira les résultats suivants :

Supposons maintenant que vous souhaitiez également modifier la typographie de ce mot pour qu'il soit également en italique. Ceci peut être réalisé simplement en ajoutant un autre élément imbriqué, qui doit être codé comme ceci :

Comme vous pouvez le constater, les balises italiques de début et de fermeture ont simplement été incorporées dans le élément. Cela va maintenant transformer le contenu de l'élément pour qu'il apparaisse comme suit :  

Bien sûr, vous pouvez décider de mettre en évidence ce mot d’une manière différente. Vous pouvez donc utiliser un élément imbriqué alternatif, tel que le barré (qui est représenté par les balises et . Ces balises peuvent être appliquées de la même manière dans le élément, apparaissant comme suit en HTML :

Dans ce cas, le texte apparaîtra comme suit sur votre document ou votre page de destination :  

Cela offre un aperçu des éléments qui peuvent être formés par des balises, qui à leur tour définissent la structure de vos pages Web et le contenu qu'elles présentent. Non seulement cela, mais des éléments vides et imbriqués peuvent également être utilisés pour définir davantage votre contenu.

Attributs HTML

Si les balises sont les éléments de base qui construisent et définissent les éléments, alors les attributs HTML peuvent être utilisés pour personnaliser leurs caractéristiques (telles que le style, la couleur et la langue. Tous les éléments HTML ont des attributs de base, qui fournissent des informations de base et sont toujours spécifiés dans la balise stat. Ils ont tendance à venir par paires et apparaîtront donc souvent sous le format suivant : nom = "valeur".

En termes simples, le nom représente la propriété que vous souhaitez définir, tandis que la valeur se rapporte aux critères spécifiques que vous souhaitez intégrer.

Il existe un grand nombre d'attributs qui peuvent être appliqués à vos éléments HTML, mais ceux qui sont les plus pertinents pour les webmasters débutants sont :

L'attribut 'lang'

L'attribut le plus élémentaire définit la langue du document et de ses éléments. Il est déclaré à l'aide de l'attribut « lang » et, même s'il est facilement ignoré, il présente l'avantage de rendre le contenu plus accessible aux lecteurs d'écran et aux moteurs de recherche. Il sera généralement présenté au début du document sous le format suivant :

Après l'attribut lang, les deux premières lettres précisent la langue (qui est l'anglais dans ce cas). Après le trait d'union, les deux lettres suivantes établissent le dialecte, bien que celui-ci ne soit pas présent dans toutes les langues. Il est important que vous obteniez cet attribut correctement si vous voulez réussir à atteindre votre public.

L'attribut 'aligner'

Nous avons déjà abordé le format des attributs HTML (name=”value”), et la meilleure incarnation de cela se produit lorsque vous essayez d’aligner le contenu au sein de vos éléments. Vous pouvez par exemple décider de centrer tous les paragraphes sur une page spécifique, l'alignement étant la propriété que vous souhaitez définir. Par la suite, 'center' est la valeur de l'attribut, même si vous avez le choix d'aligner votre texte à gauche ou à droite.

Cela alignera votre éléments au centre de la page et créez une mise en page uniforme adaptée à la nature spécifique de votre site Web (voir ci-dessous) :

L'attribut 'href'

Si vous souhaitez créer un site Web visible, il est important d’incorporer des liens entrants et sortants. Construire un portefeuille de liens comprenant des backlinks vers des pages de destination internes est également une stratégie viable, vous devrez donc apprendre à les coder en HTML.

Les liens HTML sont définis avec la balise, qui inclut le lien de destination ainsi que le texte d'ancrage affilié qui hébergera l'URL. C'est l'attribut 'href' qui spécifie l'adresse du site, cependant, celui-ci est incorporé dans la balise de début. Il est codé en HTML comme suit :

Cela met clairement en évidence la distinction entre la balise de début et de fermeture, et se traduira comme suit sur votre page de destination :

L'attribut 'couleur'

Il s’agit d’un autre attribut important, car l’utilisation de la couleur peut donner vie à votre site Web tout en contribuant à créer des contrastes importants et une esthétique de conception forte. En HTML, une couleur peut être spécifiée en utilisant son nom, bien qu'il soit également possible d'utiliser une valeur RVB ou HEX pour atteindre cet objectif. La première option est cependant la plus simple à suivre, même si elle peut également être appliquée aux titres, paragraphes et autres éléments de votre page.

Il s'agit d'un attribut de style, votre choix de couleur représentant la valeur que vous souhaitez définir. Lorsque vous appliquez la couleur rouge au titre principal, par exemple, cela ressemblera à ceci :

Une fois appliqué, cet élément apparaîtra comme suit sur votre site internet :

Encore une fois, il existe une distinction claire entre les balises de début et de fermeture qui définissent l'élément, alors qu'il s'agit de l'un des attributs les plus simples à appliquer en HTML. Il met également en évidence le format nom=”valeur des attributs HTML, ce qui facilite grandement le processus d’apprentissage et leur application sur l’ensemble de votre site Web.

Testez-le vous-même

Avec une compréhension de base du HTML et de ses éléments individuels, l'étape suivante consiste à entreprendre quelques projets simples et à appliquer vos connaissances théoriques pour résoudre des défis pratiques.  

Dans l'exercice détaillé ci-dessous, nous avons présenté une exception de texte et demandé de formater divers aspects en utilisant HTML. Utilisez le guide et tout ce que vous avez appris jusqu'à présent pour relever le défi alors que vous vous préparez à coder votre propre site Web.

Les questions:

1. Complétez l'élément d'en-tête avec la balise de fermeture correcte.
2. Mettez l'en-tête en gras.
3. Insérez une ligne horizontale sous l'en-tête.
4. Utilisez l'attribut color et coloriez « Merci de votre visite » en vert.
5. Insérez ce lien hypertexte (https://www.w3schools.com/html/) dans le texte d'ancrage "En savoir plus".
6. En tête de page, utilisez le format name=”value” pour aligner les paragraphes à gauche

Statistiques et faits sur le langage HTML

1. Les éléments HTML, head et body font partie de la spécification HTML depuis le milieu des années 1990 et, jusqu'à il y a quelques années, ils étaient les principaux éléments utilisés pour structurer les documents HTML. Cependant, la situation a radicalement changé ces dernières années, car HTML5 a ajouté une multitude de nouvelles balises qui peuvent être utilisées pour ajouter une signification sémantique riche à la structure d'un document HTML.
2. Les documents HTML doivent commencer par une déclaration de type de document (de manière informelle, un « doctype »). Dans les navigateurs, le doctype permet de définir le mode de rendu. HTML5 ne définit pas de DTD ; par conséquent, en HTML5, la déclaration doctype est plus simple et plus courte.
3. Les navigateurs mobiles ont entièrement adopté HTML5, de sorte que créer des projets adaptés aux mobiles est aussi simple que de concevoir et de construire pour leurs plus petits écrans tactiles – d'où la popularité du Responsive Design. Il existe d'excellentes balises méta qui vous permettent également d'optimiser pour les mobiles.  
4. 78 % des développeurs de contenu conviennent que la structure est adaptée à la création d'applications mobiles, et 68 % déclarent qu'elle est adaptée à la conception de tout type d'applications.
5. HTML5 est également livré avec une multitude d'API géniales qui vous permettent de créer une meilleure expérience utilisateur et une application Web plus robuste et plus dynamique. Voici une liste rapide d'API natives :
   • Glisser-déposer (DnD)
   • Base de données de stockage hors ligne
   • Gestion de l'historique du navigateur
   • Édition de documents
   • Lecture multimédia chronométrée
6. HTML5 n'est pas contrôlé par une seule entreprise. L’une de ses meilleures caractéristiques réside dans le fait qu’il s’agit d’un standard ouvert. Les développeurs ont la liberté de laisser libre cours à leur créativité et d’ajouter autant de fonctions et de fonctionnalités que possible.
7. Par rapport aux autres navigateurs, chaque mise à jour de Google Chrome veille à inclure la prise en charge de HTML5. De plus, le lecteur par défaut de YouTube est désormais HTML5 et les publicités Flash de Google sont désormais converties en HTML5.
8. Utilisation de HTML5 par les développeurs (par région) :
   • Amérique du Nord et Amérique latine – 70 %
   • Amérique du Sud – 61 %
   • ASPAC – 60 %
   • Australie - 60%
   • Europe - 59%
   • Afrique – 50%

Conclusion

Bien que le HTML n'ait été créé qu'en 1991 (la première version du langage de codage ait ensuite été lancée en 1995), il est rapidement devenu un outil phare dans la conception de sites Web fonctionnels et visuellement attrayants. Le niveau d'influence du HTML continue également d'évoluer, la dernière itération (HTML5) étant adoptée par un nombre croissant de sites Web à travers le monde.

À cet égard, apprendre les éléments de base du HTML et comment les appliquer est l’étape la plus importante que vous franchirez pour créer un site Web réussi, visible et, à terme, compétitif.