Trucsweb.com

Trucsweb 1997-2017 - 20 ans de partage.

HTML

Introduction au HTML

RDFFav

Formation - 3. L’élément ou la balise HTML

Comme son nom l’indique, le HTML (Hypertext Markup Language) est un langage de balisage.

Formation - Introduction
Le langage de balisage HTML

Plus qu’un langage, le HTML (Hypertext Markup Language) est une structure de balisage à l’intérieur du DOM, le « document object model ». C’est pourquoi les spécialistes parle d’élément HTML au lieu de balise. Mais en gros, le code HTML détermine le caractère du contenu qu’il affectera à l’aide de balises. C’est-à-dire une balise d’ouverture, avant le texte ou le contenu, et une balise de fermeture à la fin du texte ou du contenu. Il suffit d’ajouter le symbole « / » (division) dans la balise pour indiquer une balise de fermeture! Comme l’exemple suivant :

<balise>Texte ou contenu</balise>
Code HTML bien formé

IMPORTANT Pourquoi? Pour indiquer au navigateur où cesse l’interprétation de la balise. Omettre de fermer la balise de caractère gras <strong> peut appliquer le style au reste de la page. Il existe toutefois des exceptions. Le paragraphe <p> par exemple, même si je le ferme toujours pour une meilleure lecture du code, se fermera de lui-même. Même chose pour les items d’une liste à puce, le <li>.

Autre contrainte, l’imbrication de balise. Tout est logique, ainsi on ne peut pas imbriquer un paragraphe à l’intérieur d’un autre paragraphe, ou encore faire chevaucher les balises. Ou même baliser une balise de type « bloc » par une balise de type « en-ligne ».

Mauvais exemples:

<p>Mon premier paragraphe <p>Mon deuxième paragraphe</p></p>

<p>Mon paragraphe en <strong>caractère gras</p></strong>

<strong><p>Mon paragraphe en caractère gras</p></strong>

Dans le deuxième exemple, la balise de type « en-ligne » de caractère gras <strong> ne peut contenir la balise de type bloc du paragraphe <p>.

Bons exemples (dit HTML bien formé):

<p>Mon premier paragraphe</p>
<p>Mon deuxième paragraphe</p>

<p><strong>Mon paragraphe en caractère gras</strong></p>
Les exceptions

Tout système tant à se complexifier dans le temps.Par-dessus le marché "démocratique" avec plusieurs types et classes d’intervenants, jeune et mondial, il ne faut pas s’en étonner du cheminement pour le moins chaotique du HTML!

Comme le saut de ligne <br> (breakline), une seule balise suffit pour forcer un saut de ligne, contrevenant ainsi à la première règle! Même chose pour une l’image, une seule balise <img> ou encore la ligne <hr> les balises meta. Si en XHTML51 il faut ajouter le barre oblique à la fin <br /> <img /> <hr />, c’est inutile en HTML5.

Au contraire, le HTML5 n’exige pas de fermer certaines balises, par évidence. Le paragraphe par exemple. Ou encore la liste à puce. Deux exemples permis en HTML5 :

<p>Premier paragraphe

<p>Deuxième paragraphe

<ol>
  <li>Premier item
  <li>Deuxième item
  <li>Troisième item
</ol>

Malgré son caractère encore une fois sémantique, ce raccourci doit être corrigé par le navigateur à chaque fois! Qui ajoute automatiquement la balise de fermeture. L’énergie ne se perd jamais c’est le cas de le dire!

1 Note : Il existe encore une manière stricte de respecter les normes du HTML à la manière du XML. Le XHTML5, sans exception aucune, tout doit être respecté jusqu’aux plus bêtes des exemples.

Éléments bloc et en-ligne

Deux catégories d’éléments HTML. Contrairement à la catégorie « en-ligne », les balises de catégorie « bloc » sont des comme des blocs empilés les uns sur les autres.

  • Éléments de bloc (block-level)
    La balise de type bloc utilise la largeur totale disponible défini par les balises qui l’entourent, séparés par un saut de ligne avant et après l’élément.
    <div>, <p>...

  • Éléments en ligne (ou en incise)
    La balise en-ligne occupera uniquement l’espace défini par la largeur requise par son contenu.
    <span>, <strong>...

Exemple

<p>Lorem <strong>ipsum</strong> dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Le paragraphe <p> de type « bloc » versus le caractère gras <strong> de type « en-ligne ».


Types de contenu

On regroupe généralement les balises HTML qui partagent les mêmes caractéristiques en catégorie. Outre le « flux de contenu » (Flow content), qui regroupe a peu près tout le flot du DOM et le « Phrasé » (Phrasing content), les balise de type « en-ligne » :

  • Métadonnées
  • Section de contenu
  • Entête
  • Contenu intégré (externe)
  • Contenu interactif

« Les métadonnées » est un contenu qui définit la présentation ou le comportement du reste du contenu, ou qui définit la relation du document avec d’autres documents.

<base> <link> <meta> <noscript> <script> <style> <template> <title>.

La « section de contenu » est une section qui a potentiellement un entête et un résumer.

<article> <aside> <nav> <section>

L’« Entête » définit l’entête d’une section.

<h1> <h2> <h3> <h4> <h5> <h6>

Le « contenu intégré » est un contenu qui importe une ressource externe dans le document ou le contenu d’un autre vocabulaire à insérer dans le document.

<audio> <canvas> <embed> <iframe> <img> <MathML> <math> <object> <picture> <SVG> <svg> <video>

Le « contenu interactif » est un contenu spécifiquement destiné à l’interaction de l’utilisateur.

<a> <audio> <button> <details> <embed> <iframe> <img> <input> <label> < select> <textarea> <video>


Attributs

Bien que davantage HTML4, il reste une bonne douzaine d’attributs valide. Dont les plus importants dans le cadre de cette formation :

  • id : Identifiant unique de l’objet;
  • lang : langage (fr-FR)
  • style : la plupart des styles CSS
  • class : non d’une classe CSS;
  <div style="color:red">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit
  </div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Conclusion de la formation

La documentation est plutôt exhaustive sur le sujet, c’est un survol rapide. Pour plus d’information, consulter http://w3c.github.io/html/.

  1. Langage balisé;
  2. Bien former le code HTML;
  3. Éléments de catégorie « bloc » ou « en-ligne »;
  4. Types de contenu.


Références
, Analyste programmeurConception oznogco multimédia (http://oznogco.com), Trucsweb
Dernière mise à jour :

Commentaires

       Visites : 757 - Pages vues : 805
X

Trucsweb.com Connexion

X

Trucsweb.com Mot de passe perdu

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte