Scribd
Importer
32 vues9 pages

Balise HTML Toutes Les Différentes Balises HTML - Liste Complète

Transféré par

bbq28z55hp

Html balises

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt

Balise HTML Toutes Les Différentes Balises HTML - Liste Complète

Transféré par

bbq28z55hp
32 vues9 pages
Html balises

Titre original

Balise HTML → Toutes les différentes Balises HTML | Liste complète

Copyright

© © All Rights Reserved

Formats disponibles

PDF, TXT ou lisez en ligne sur Scribd

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Html balises

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
32 vues9 pages

Balise HTML Toutes Les Différentes Balises HTML - Liste Complète

Transféré par

bbq28z55hp
Html balises

Droits d'auteur :

© All Rights Reserved
Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
Télécharger au format pdf ou txt
Vous êtes sur la page 1/ 9

QUELLES SONT LES

DIFFÉRENTES BALISES EN
HTML ? DÉFINITION ET LISTE

! 6 FÉVRIER 2019

Que vous soyez développeurs, autodidactes ou encore étudiants en


informatique, vous voulez connaître toutes les balises HTML ? Vous
voulez aussi savoir ce que représente chacune des balises ? Vous vous
demandez comment créer votre site web en HTML avec les balises ? Ne
cherchez plus, ici vous trouverez la solution à toutes vos questions. Vous
allez rapidement comprendre qu’il n’y a rien de plus simple que les
balises et qu’une bonne maîtrise de ces dernières est de toute façon
impérative. En e!et, c’est en connaissant toutes les balises en HTML
HTML,
ou tout au moins une grande majorité d’entre elles, que vous saurez
coder n’importe quelle page web sans di#cultés. Ne tardez plus et
découvrez vite la liste des balises en HTML
HTML. Mais avant d’en arriver là,
commençons par un petit rappel de la signi$cation du HTML
HTML.

Définition de HTML (HyperText Markup


Language)
Qu’est-ce que le HTML ? Avant de voir plus en détail toutes celles qui
vont baliser chacune de vos pages en fonction de ce que vous avez
besoin de faire, rappelons brièvement ce qu’est le HTML (ou Hypertext
Markup Langage dans son nom complet). Il s’agit d’un langage
informatique qui permet d’écrire et d’organiser une page web. Il s’agit
d’un langage standardisé, permettant à tous les développeurs et
développeuses de France et de Navarre de coder à l’aide d’un balisage
commun.

Pour toutes celles et tous ceux qui ne feraient pas forcément le lien, au
$nal, les sites web ne sont ni plus ni moins qu’un ensemble de pages
HTML liées entre elles et publiées à la même adresse.

Les balises en HTML


Pour écrire en langage HTML, on a besoin de balises.
Qu’est-ce que c’est ? Ce sont les éléments de base pour écrire du HTML.
Il en existe plusieurs types que l’internaute ne voit pas forcément de la
même manière qu’un développeur :

Voici la liste de toutes les balises


HTML
Balises de premier niveau
Balises d’en tête
Balises de structuration du texte
Balises de listes
Balises de tableau
Balises de formulaire
Balises sectionnantes
Balises génériques
Attributs des balises génériques

Balises de premier niveau


Ces balises sont indispensables pour pouvoir commencer à coder une
page web en HTML
HTML. Elles vont permettre d’indiquer aux di!érents
navigateurs Web qu’il s’agit de pages en HTML et de séparer l’en-tête du
corps de la page.

<html> – </html> : balise principale de toutes les pages web.


<head> – </head> : en-tête de la page
<body> – </body> : corps de la page

Balises d’en-tête
Ces balises sont toutes situées dans l’en-tête de la page Web, c’est-à-dire
entre la balise <head> et la balise </head>. Vous remarquerez que
quand un contenu se situe entre deux balises html, la deuxième est
quasi-identique à la première à ceci près qu’il s’agit d’une balise
fermante. Une balise fermante reprend la balise d’ouverture en y
ajoutant un slash (/) avant l’intitulé de la balise et après le signe inférieur
(<). Comme ici avec le <head> qui est la balise d’ouverture et le <//head>
qui est la balise de fermeture. Certaines balises sont dites auto-
fermantes (comme la balise image (img)) par exemple.

<link /> : liaison avec une feuille de style


<meta /> : métadonnées de la page web (charset, mots-clés, c’est
aussi parmi ces balises que l’on retrouve la balise meta description
que nous avons déjà abordé sur ce blog pour vous en présenter les
intérêts en matière de référencement naturel, même si cette
dernière, rappelons-le pour nos #dèles amis lecteurs du SEO, n’est
pas directement interprétée par l’algorithme du moteur de
recherche de Google…)
<script> – </script>: code JavaScript
:
<style> – </style> : code CSS
<title> – </title> : titre de la page. La fameuse balise title ! Comme
indiqué à de nombreuses reprises, renseignez bien cette balise. Elle
est très importante pour le référencement naturel ! Même si
actuellement vous en êtes à ré$échir quant à savoir comment vous
devez coder un site Web, que ce soit votre futur site personnel ou
celui d’une société ou association pour laquelle vous travaillez, vous
allez voir, le SEO va en théorie vite devenir un sujet qui va attirer
toute votre attention.

Balises de structuration du texte


Ces balises permettent de disposer des blocs dans la page contenant du
texte, des images ou encore des menus.

<abbr> – </abbr> : abréviation


<blockquote> – </blockquote> : citation longue
<q> – </q> : citation courte
<cite> – </cite> : citation du titre d’une œuvre ou d’un événement
<sub> – </sub> : mise en indice
<sup> – </sup> : mise en exposant
<h1> – <h6> : titre de di!érents niveaux
<img /> : image grâce aux attributs src (adresse de l’image) et
alt (texte de remplacement)
<mark> – </mark> : mise en valeur visuelle (le texte est surligné)
<strong> – </strong> : mise en valeur forte (le texte est en gras)
<em> – </em> : mise en valeur faible (le texte est en italique)
<#gure> – </#gure> : #gure (image, code…)
<#gcaption> – </#gcaption> : description de la #gure
<audio> – </audio> : son
<video> – </video> : vidéo
<source> – </source> : indique un format possible pour les balises
<audio> et <video>
<a> – </a> : lien hypertexte grâce à l’attribut href.
<br /> : retour à la ligne
<p> – </p>: paragraphe
:
<hr /> : ligne de séparation horizontale
<address> – </adresss> : adresse de contact
<del> – </del> : texte supprimé
<ins> – </ins> : texte inséré
<dfn> – </dfn> : dé#nition
<kbd> – </kbd> : indiquer un code que doit taper le visiteur
<progress> – </progress> : barre de progression
<time> – </time> : date ou heure
<pre> – </pre> : le texte à l’intérieur de la balise sera sous forme de
code

Balises de listes
Ces balises permettent de créer des listes (numérotées, à puces…).

<ul> – </ul>: liste à puces, non numérotée


<ol> – </ol> : liste numérotée
<li> – </li>: élément de la liste à puces
<dl> – </dl> : liste de dé#nitions
<dt> – </dt> : dé#nition du terme

Balises de tableau
Ces balises ont pour but de créer un tableau structuré avec des lignes et
des colonnes.

<table> – </table> : tableau


<caption> – </caption> : titre du tableau
<tr> – </tr>: ligne de tableau
<th> – </th> : cellule d’en-tête
<td> – </td> : cellule
<thead> </thead> : section de l’en-tête du tableau
<tbody> – </tbody> : section du corps du tableau
<tfoot> – </tfoot> : section du pied du tableau

Balises de formulaire
:
Ces balises permettent de créer des formulaires de contact par exemple.

<form> – </form> : délimite un formulaire (method


method : indique la
méthode d’envoi du formulaire (get ou post). Si vous ne savez pas
quoi utiliser, mettez post / action : la page vers laquelle le visiteur
doit être redirigé lorsqu’il a validé votre formulaire. )
<#eldset> – </#eldset> : permet de regrouper plusieurs éléments
d’un formulaire
<legend> – </legend> : titre d’un groupe dans un formulaire
<label> – </label> : titre d’un élément de formulaire
<input /> : champ de formulaire grâce à l’attribut type
<textarea> – </textarea> : zone de saisie multiligne grâce aux
attributs rows et cols (nombre de lignes et de colonnes)
<select> – </select> : liste déroulante
<option> – </option> : élément d’une liste déroulante
<optgroup> – </optgroup> : groupe d’éléments d’une liste
déroulante

Balises sectionnantes
Ces balises nous sert à construire les éléments de base d’un site web.

<header> – </header> : en-tête


<nav> – </nav>: liens principaux de navigation
<footer> – </footer> : pied de page
<section> – </section> : section de page
<article> – </article> : article (contenu autonome)
<aside> – </aside> : informations complémentaires

Balises génériques
Il y a deux balises génériques : l’une est inline, l’autre est block. Elles
n’ont pas de sens sémantique.

<span> – </span> : balise générique de type inline

Autorise les autres éléments à venir s’asseoir à gauche et à droite.


:
Ne se redimensionne pas avec width et height.

Respecte les marges gauches et droites, mais pas les marges haut et bas.

<div> – </div> : balise générique de type block

Force un passage à la ligne.

Ne tolère pas d’élément à gauche ou à droite.

Se redimensionne avec width et height.

Respecte toutes les marges.

Attributs des balises génériques


Ces balises ont un intérêt uniquement si vous leur associez un attribut
class, id ou style:

class
class: indique le nom de la classe CSS à utiliser.

id
id: donne un nom à la balise. Ce nom doit être unique sur toute la
page car il permet d’identi#er la balise. Vous pouvez vous servir de
l’ID pour de nombreuses choses, par exemple pour créer un lien vers
une ancre, pour un style CSS de type ID, pour des manipulations en
JavaScript, etc.

style
style: cet attribut vous permet d’écrire directement le code CSS à
appliquer dans le code HTML. Cependant, il est préférable de ne pas
utiliser cet attribut et de passer à la place par une feuille de style
:
externe, car cela rend votre site plus facile à mettre à jour par la
suite.

Testez chacune des balises pour voir le résultat concret. Les balises sont
le squelette du HTML. Et bien entendu, sans squelette, rien ne tient et
par conséquent la page web s’e!ondre. Vous ne pourrez jamais faire
sans. Faites bien attention à fermer les balises ! En un rien de temps,
vous deviendrez un vrai professionnel du développement web en HTML.
Il ne vous restera alors plus qu’à maîtriser le CSS pour donner à vos
#chiers HTML la forme que vous souhaitez.

Dernier petit conseil pour la route : veillez à bien indenter votre code
pour y voir plus clair sinon vous serez vite perdu.

A PROPOS DE L'AUTEUR(E)

Perrine Hermary
L’AGENCE "
Auteure, conceptrice Web. Je m'occupe du Webdesign, du
BLOG SEO
SEO, de la rédaction web et de l'intégration de contenus
web.
NOS RÉALISATIONS

# NOUS JOINDRE
:
FACEM WEB COPYRIGHT © 2024. NOTRE PRÉSENCE EN RÉGION : CREATION SITE INTERNET LILLE
| AGENCE ECOMMERCE LILLE | REFERENCEMENT LILLE | AGENCE COMMUNICATION ARRAS |

%
MENTIONS LÉGALES - PLAN DU SITE
:

Vous aimerez peut-être aussi