41Mag - Comprendre le principe de balise imbriquée en HTML 5

Comprendre le principe de balise imbriquée en HTML 5

Le HTML5 est le langage de base pour créer un site internet. Le HTML5 sert à contenir, structurer et hiérarchiser le texte qui sera affiché sur votre site ou page web. Vous utiliserez un autre langage pour la mise en page : le CSS.

Le HTML5 est parfait pour débuter dans la création de site. Il est très simple à apprendre mais assez limité. Voici une liste de chose non faisable en utilisant que du HTML 5 :

  • Utiliser une base de données
  • Traiter un formulaire pour l’envoyer
  • Protéger une page par mot de passe
  • Etc …

Si j’ai commencé par vous présenter ce qu’il ne peut pas faire, c’est pour éviter de vous faire rêver et que vous vous lanciez dans des projets irréalisable … au début. En résumé, le HTML 5 est un langage très simple qui vous permettra :

  • Afficher du texte, des images, de la musique ou des vidéos
  • Créer un formulaire (et non le traiter ou l’envoyer, juste l’afficher)
  • Afficher vos données sous forme de tableau
  • Créer des liens hypertexte
  • Etc …

D’autre langage vous seront utile par la suite, parmi lesquels :

  • CSS : Mise en page
  • PHP : Contenue dynamique
  • MySQL : Base de données
  • Javascript : Interaction avec le navigateur

Rassurez-vous, vous n’aurez pas besoin de les connaitre tous. Cependant, le plus dur est d’apprendre son premier langage, le reste étant beaucoup plus intuitif.

Ce chapitre appartient au Tutoriel complet pour apprendre le HTML5. Ce cours s’adresse principalement aux débutants. Pour suivre cet article, nous aurons besoin uniquement d’un bloc-note pour écrire nos lignes de code et d’un navigateur pour afficher la page. Rien de bien compliquer. Consulter le chapitre précédent : Les outils et ressources nécessaire pour développer en HTML5.

Tutoriel : Apprendre le HTML5

Cet article est un chapitre du Tutoriel complet sur le HTML5
Découvrez toute la puissance du HTML5, des exemples concrets, des démonstrations. L'ensemble du cours est composé de chapitres concis et compréhensibles par tous, quelque soit votre niveau.

html5

I. Qu’est ce qu’une balise HTML 5 ?

En HTML5, les balises sont partout. Pour preuve, un fichier HTML commence par une balise et finis par une balise.

Chaque balise à un nom qui lui est propre.  Prenons comme premier exemple la balise P. Le nom de cette balise est le diminutif de Paragraph – le nom des balise est toujours en anglais. Par convention, on écris cette balise P entre les signe < (inférieur) et > (supérieur).

1
<p>

Même si cela fonctionne avec des majuscules, les balises s’écrivent en minuscule. Pour créer un lien hypertext en HTML5, on utilise la balise qui se nomme A pour Anchor. Elle s’écris donc de la manière suivante :

1
<a>

II. Ouverture et fermeture de balise

Nous savons maintenant reconnaitre une balise HTML5. Son fonctionnement est très simple, elle s’ouvre et se referme. Regarder la ligne de code ci-dessous :

1
<p>Ceci est un paragraphe</p>

Dans l’exemple ci-dessous, la même balise P s’écris de deux façons différentes. La première balise P est une balise d’ouverture et la deuxième balise /P est une balise de fermeture.

Chaque balise ouverte dois être refermé !

Pour refermer une balise, on ajoute le symbole / (slash) avant le nom de cette balise. Par exemple, pour mettre un mot ou un texte en gras, on utilise la balise STRONG. Le mot ou la partie de texte compris entre la balise d’ouverture STRONG et la balise de fermeture /STRONG sera en gras. Dans la ligne de code ci-dessous, le mot EVIDENCE sera en gras :

1
Cette balise sert à mettre un texte en <strong>évidence</strong>

Ce principe est fondamentale, il est très important de bien le comprendre. Sachez qu’il existe deux type de balise :

  • Les balises classiques : elles encadrent quelque chose – dans les exemples précédent, elles encadrent du texte – entre une balise d’ouverture et une balise de fermeture dont le nom est précédé par le symbole / (slash).
  • Les balises se refermant seules : Certaines balises, comme la balise <BR /> qui sert à effectué un retour à la ligne, se referment seules.

Les balises se refermant seule, comme la balise <BR />, se termine par un espace (non obligatoire mais facilite la lecture du code) et le symbole / (slash). Ces balises sont minoritaire. Nous les découvrirons au fur et à mesure du tutoriel. Gardez en tête qu’une balise s’ouvre et se referme hormis quelques cas particulier.

1
Inserer un saut de ligne après ce mot<br />

En conclusion, retenez qu’une balise s’ouvre et se referme toujours, qu’il existe deux types de balise : les balises qui s’ouvrent et qui se referment avec une autre balise – Elles imbriquent un contenue (balise paragraphe, balise gras …) – et celles qui se referment toutes seules (balise image, saut de ligne …).

Vous aurez compris que les balises servent à donner des informations au navigateur. Elles ne s’affichent pas sur votre page web. Le HTML5 est un langage inspiré du XML, langage fonctionnant lui aussi sur le principes d’imbrication de balises.

III. Balise imbriquée et héritage

Pour compliquer un peu, il arrive souvent que plusieurs balises soit imbriquées entres-elles. Régardez l’exemple ci-dessous :

1
<p>Ceci est un <strong>petit texte</strong></p>

Deux notions sont tes importantes à comprendre :

L’ordre de fermeture : Nous avons appris qu’une balise s’ouvrait et se refermait (même seule). Dans l’exemple ci-dessus, nous avons ouvert une première baliseP pour indiquer un nouveau paragraphe. Le texte compris entre les balise <p> et </p> sera donc un paragraphe. Mais, à l’intérieur de ce paragraphe, nous avons décidé d’afficher les mots « petit texte » en gras. Nous avons donc imbriqué la balise <strong> dans la balise <p>.

En informatique et plus particulièrement en programmation, rien n’est fait au hasard. L’ordre de fermeture des balises suit une logique bien précise.  Nous avons un premier ensemble « petit texte » qui sera encadré par les balises <strong> et </strong> qui sera lui même encadré par les balises <p> et </p>.

La logique veut que nous refermions l’ensemble le plus petit d’abord. On commence donc toujours par refermé les balises ouverte en derniers.

L’héritage : Les balises <strong> et </strong> étant imbriquées dans les balises <p> et </p>, on dit que la balise <strong> appartient à la balise <p>. Dans ce cas, la balise <strong> hérite des propriété de la balise <p>. Par exemple, ci vous avez donné une couleur de texte verte à la balise <p>, la balise <strong> lui appartenant affichera donc le texte qu’elle encadre en vert.

Retour au sommaire

Chapitre 04 : Le doctype d’un document HTML5

Chapitre complémentaire : En résumé : Qu’est-ce que le HTML5 ?

Chapitre précédent : Les outils nécessaire pour développer en HTML5 et CSS3

Article du même thême : ..

  • Smally

    votre article est bourré de fautes. Je trouve paradoxal de BIEN apprendre un langage « informatique » et de MAL écrire dans la langue dans laquelle on s’adresse….si certains doivent réviser leurs balises ..révisez les vôtres aussi !!

    • http://www.crea-troyes.fr Enzo

      Merci petit troll ;)

    • http://41mag.fr 41Mag

      Merci petit troll ;)

      • http://41mag.fr 41Mag

        Alors OUI, je n’y connais rien en orthographe, mais contrairement a toi, moi je partage ma connaissance, tu viens ici pour apprendre un langage, non ? 

        En retour, apprends moi l’orthographe au lieu de critiquer bêtement !

        A bientôt petit troll ;)

  • Pingback: A quoi sert le HTML5 ? Que peut-on faire avec ? Quels sont ses limites ?

  • Pingback: Comment faire un lien en HTML5

  • Pingback: Convertir son thème Wordpress au HTML5

  • Pingback: Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3

  • Pingback: Qu’est ce que le HTML5 ?

  • Antoine

    Vraiment c’est un site très intéressant !
    Bon l’orthographe laisse à desirer mais j’apprends plein de trucs ! Ça compense ;)
    Continuez comme ça :D

    • http://41mag.fr 41Mag

      Merci Antoine, et encore désolé pour l’orthographe.
      Tes encouragements sont très sympa et réconfortant. Quant à l’orthographe, j’essaie vraiment de ne pas faire de fautes, je me relis … mais rien n’y fait. Cela viendra peut être avec le temps.

  • Daminoweb

    Comme beaucoup ici je viens de découvrir v

  • Daminoweb

    Bonjour. Je viens de découvrir votre site plutôt agréable à parcourir et me permettant de « réviser ».
    Merci pour cela.
    Comme d’autres ici un petit effort serait à faire au niveaux de l’orthographe et la grammaire. (Pas de mal de fautes pourraient être évitées avec un simple correcteur).
    Merci tout de même de partager votre expérience.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.