Code HTML : tout les balises et attributs HTML
HTML, ou HyperText Markup Language, est le langage fondamental qui structure le contenu des pages web à travers l’utilisation
de balises et d’attributs. Les balises HTML sont des éléments essentiels qui définissent la structure et le contenu d’une page.
Cependant pour que les moteurs de recherche comme google comprennent le squelette de votre site web, l’insertion de
balise dans votre code Html est nécessaires. D’ailleurs les balises peuvent être classées en balises paires, qui nécessitent une
balise d’ouverture et une balise de fermeture, et en balises orphelines, qui se suffisent à elles-mêmes. Les Attributs, quant à
eux, ajoutent des informations supplémentaires aux balises. Par exemple la taille des caractères, la couleurs …. Permettant de
spécifier des caractéristiques notamment le style et le comportement de votre page web. Ensemble, les balises et les attributs
permettent de créer une présentation riche et fonctionnelle des applications web.
1) Introduction au HTML
C’est le langage de balisage standard utilisé pour créer et structurer le contenu des pages web. Que vous souhaitiez créer un
site web personnel, un blog, ou une application web complexe, HTML est l’outil indispensable pour poser les bases de votre
projet.
Conçu pour décrire la structure d’une page web. Contrairement aux langages de programmation comme JavaScript ou Python,
HTML ne contient pas de logique ni de calculs. Au lieu de cela, il fournit une manière de structurer le contenu, en le divisant en
différents types d’éléments comme les titres, paragraphes, images, liens, ou tableaux.
L’importance d’HTML côté est non seul dans sa simplicité, qui le rend accessible aux débutants, mais également dans sa
flexibilité, qui permet aux développeurs employés de conseil des expériences web sophistiquées et innovantes. En garantissant
une structure solide et des balises sémantiques bien utilisées, HTML facilite également l’accessibilité des sites web pour tous les
utilisateurs, y compris ceux ayant des besoins spécifiques, tout en optimisant le gouvernement pour les moteurs de recherche.
2) Les Balises HTML
2-1) Rôle des balises dans le HTML
Les balises dans le HTML jouent un rôle fondamental dans la structuration et l’organisation des contenus d’une page web. Elles
permettent de définir les différents éléments qui composent une page, tels que les titres, les paragraphes, les images et les
liens. En utilisant des balises, les développeurs peuvent créer une hiérarchie visuelle et logique qui améliore la lisibilité pour les
utilisateurs tout en facilitant
Chaque balise est généralement constituée d’une balise ouvrante et d’une balise fermante, ce qui permet d’encadrer le contenu
à mettre en forme. Cette structure contribue non seulement à l’esthétique du site, mais également à son référencement
naturel.
En effet, une bonne utilisation des balises aide les moteurs de recherche comme Bing à comprendre le contenu et à le classer
de manière appropriée dans les résultats de recherches. Il est essentiel d’utiliser ces balises avec contrôle afin d’éviter de rendre
la page web lourde.
2-2) Types de balises Html
2-2-1) Les balises paires
Une balise HTML paire est un élément HTML constitué d’une balise ouvrante et d’une balise fermante. Ces deux balises
encadrent un contenu, et la balise fermante est identifiée par une barre oblique (/). Elles sont utilisées pour structurer et
organiser le contenu dans une page web. Par exemple, elles peuvent englober du texte, des images, ou d’autres éléments.
Liste des balises HTML paires et leurs fonctions principales
<html> : Définit le document HTML entier et sert de conteneur racine pour tous les éléments.
<head> : Contient des métadonnées sur le document, comme le titre, les liens vers des feuilles de style, et les scripts.
<body> : Encadre le contenu principal visible de la page web.
<title> : Spécifie le titre du document affiché dans l’onglet du navigateur.
<div> : Sert de conteneur générique pour organiser et regrouper des éléments.
<header> : Représente l’en-tête d’une page ou d’une section, contenant généralement des titres ou des liens de navigation.
Tantely Emiliot
<footer> : Représente le pied de page d’une page ou d’une section, contenant souvent des informations de copyright ou des
liens supplémentaires.
<section> : Définit une section thématique dans un document.
<article> : Représente un contenu autonome, comme un article de blog ou une publication.
<nav> : Contient des liens de navigation vers d’autres parties de la page ou du site.
<aside> : Définit un contenu complémentaire, comme une barre latérale.
<main> : Indique le contenu principal de la page, excluant les en-têtes, pieds de page, et barres de navigation.
<p> : Représente un paragraphe de texte.
<h1> à <h6> : Définissent les titres de différentes importances, du plus grand (<h1>) au plus petit (<h6>).
<ul> : Crée une liste non ordonnée (à puces).
<ol> : Crée une liste ordonnée (numérotée).
<li> : Définit un élément dans une liste ordonnée ou non ordonnée..
<table> : Définit un tableau.
<th> : Définit une cellule d’en-tête dans une ligne de tableau.
<form> : Crée un formulaire pour collecter des données utilisateur.
<label> : Associe une étiquette descriptive à un champ de formulaire.
<button> : Crée un bouton cliquable.
<select> : Crée une liste déroulante.
<option> : Définit une option dans une liste déroulante.
<textarea> : Permet la saisie de texte multi-ligne.
<span> : Sert de conteneur inline générique pour appliquer du style ou des scripts.
<strong> : Indique un texte important en le mettant en valeur (souvent en gras).
<em> : Indique un texte avec emphase (souvent en italique).
<blockquote> : Encadre une citation longue provenant d’une autre source.
<q> : Encadre une citation courte inline.
<figure> : Encadre des contenus illustratifs comme des images ou des diagrammes..
<audio> : Encadre un contenu audio.
<video> : Encadre un contenu vidéo
2-2-2) Les balises orphelines
Une balise orpheline, également appelée balise auto-fermante, est un élément HTML qui ne nécessite pas de balise de
fermeture. Elle est utilisée pour insérer un contenu spécifique à un endroit donné dans une page web sans avoir besoin de
délimiter un début et une fin. Ces balises sont généralement utilisées pour des éléments qui ne contiennent pas d’autres
contenus, mais qui effectuent une action ou affichent un élément.
Voici une liste des principales balises orphelines et leur fonction :
<br> : Insère un saut de ligne dans le texte.
<img> : Affiche une image à partir d’une source spécifiée.
<input> : Crée un champ de saisie dans les formulaires.
<hr> : Insère une ligne horizontale pour séparer des sections de contenu.
<meta> : Fournit des métadonnées sur le document, comme des informations sur le charset ou la description.
<link> : Relie le document à des ressources externes, comme des feuilles de style CSS.
<base> : Définit une URL de base pour les liens relatifs dans le document.
<source> : Spécifie plusieurs sources pour des éléments multimédias, comme <video> ou <audio>.
<track> : Ajoute des sous-titres ou d’autres pistes textuelles à des éléments multimédias.
3)Les Attributs HTML
3-1) Définition
Les attributs HTML sont des éléments ajoutés au balises qui fournissent des données supplémentaires ou modifient le
comportement de ces éléments. Ils se présentent généralement sous la forme de paires nom/valeur et sont placés dans la balise
d’ouverture. Les attributs permettent de définir des caractéristiques spécifiques, d’ajuster l’apparence ou la fonctionnalité d’un
élément, et peuvent être requis ou facultatifs selon le contexte.
Tantely Emiliot
3-2) Rôle des attributs pour personnaliser les éléments
Les attributs jouent un rôle crucial dans le développement web en permettant aux développeurs de personnaliser et d’optimiser
l’expérience utilisateur. Ils contribuent également au référencement en fournissant des informations que les moteurs de
recherche peuvent utiliser pour indéxer correctement le contenu. Une utilisation appropriée des attributs peut améliorer
l’accessibilité et la convivialité d’un site web.
3-2-1) Attribut courant et leurs fonctions
id : Fournit un identifiant unique à un élément, facilitant sa sélection via CSS ou JavaScript.
class : Attribue une ou plusieurs classes à un élément, permettant de le styliser avec des règles CSS communes.
style : Définit des styles en ligne pour un élément, comme la couleur ou la taille de la police.
title : Contient des informations supplémentaires sur un élément, affichées sous forme d’info-bulle au survol.
src : Spécifie la source d’une image ou d’un fichier multimédia.
href : Indique l’URL vers laquelle un lien hypertexte doit diriger.
alt : Fournit un texte alternatif pour une image si celle-ci ne peut pas être affichée.
height et width : Définissent respectivement la hauteur et la largeur d’un élément, souvent utilisés pour les images.
Tantely Emiliot