Comment utiliser ul en HTML. Comment placer les éléments d’une liste horizontalement ? Où les styles de liste sont écrits dans le modèle Twenty Eleven

Le langage de balisage hypertexte HTML possède une balise

, utilisé pour créer des listes à puces. Il est soutenu par tout le monde navigateurs modernes et vous permet d'afficher les éléments dans un ordre qui ne nécessite pas de numérotation. Par exemple, il affiche très souvent les éléments de menu et tout ce qui concerne les listes sur la page : plats, produits, équipements, outils et bien plus encore qui doivent être répertoriés sans indiquer la priorité d'un élément particulier.

Syntaxe des balises

• Élément n°1
• Élément n°2
• Élément n°3
• ...

Ce code se traduit par une liste à puces sur le site :

• Élément n°1
• Élément n°2
• Élément n°3

Étiqueter

nécessite utilisation obligatoire balise de fermeture
.

Pour former des éléments de liste, une balise appariée est utilisée. Entre les balises d'ouverture et de fermeture se trouvent des mots individuels, des phrases, des paragraphes, des images, des morceaux de code et bien plus encore qui constituent le contenu de la liste à puces.

Quel peut être le contenu d’une liste à puces ?

Il peut s'agir d'une variété de textes, notamment de mots simples, d'expressions et de paragraphes, d'images, de listes imbriquées, de morceaux de code php et bien plus encore nécessitant un marquage simple.

Chaque élément de la liste à puces est en retrait de 40 pixels vers la droite par défaut. En utilisant Styles CSS, on peut changer l'affichage cette listeà votre propre discrétion. Étiqueter

est basé sur des blocs, il occupe donc toute la zone disponible, limitée par le bord de l'écran, le cadre du tableau ou d'autres éléments de la page.
Les pièces jointes de liste dans une liste sont autorisées.

Par exemple

• Élément n°1
• • Article #2-1
  • Élément #2-2
  • Élément #2-3
• Élément n°3
• ...

Attributs et propriétés des balises

Attribut de balise largement utilisé

est un attribut de type indiquant à quoi ressemblera le marqueur de liste. Peut prendre les valeurs suivantes

1. type="disc" - marqueur sous la forme d'un cercle rempli (cette valeur est la valeur par défaut). L'exemple du disque était un peu plus élevé.

2. type="circle" - marqueur en forme de cercle transparent

Par exemple:

• Élément n°1
• Élément n°2

• Élément n°1
• Élément n°2

3. type="square" - marqueur en forme de carré

Par exemple:

• Élément n°1
• Élément n°2

Et voici à quoi cela ressemble sur la page :

• Élément n°1
• Élément n°2
Remarque 1

En CSS, le type de puce est spécifié à l'aide de l'attribut list-style-type :

• ...

Regardons quelles valeurs list-style-type peut prendre :

• disque - marqueur en forme de cercle (l'exemple était ci-dessus)
• cercle - marqueur en forme de cercle transparent (l'exemple était ci-dessus)
• carré - marqueur en forme de carré (l'exemple était ci-dessus)
• décimal - marqueur sous forme de liste numérotée en chiffres arabes : 1, 2, 3, ...
• zéro décimal - un marqueur sous la forme d'une liste numérotée en chiffres arabes avec un zéro non significatif : 01, 02, 03, ...
• inférieur-romain - un marqueur sous la forme d'une liste numérotée dans l'alphabet romain en minuscules : i, ii, iii, iv, v
• supérieur-romain - marqueur sous forme de liste numérotée dans l'alphabet romain en lettres majuscules : I, II, III, IV, V
• inférieur-latin - marqueur sous forme de liste dans l'alphabet latin en minuscules : a, b, c, d, ...
• supérieur-latin - marqueur sous forme de liste dans l'alphabet latin en lettres majuscules : A, B, C, D, ...
• bas-grec - un marqueur sous la forme d'une liste dans l'alphabet grec en minuscules
• grec supérieur - un marqueur sous la forme d'une liste dans l'alphabet grec en majuscules
Remarque 2

L'attribut peut être attribué à la balise elle-même

, et les balises
• . Lors de la définition d'un attribut sur une balise
  tous les éléments de la liste seront affichés comme indiqué par l'attribut. Mais on peut donner à tel ou tel élément son propre affichage. Exemple en image :

  Le code ressemble à ceci :

  • Élément n°1
  • Élément n°2
  • Élément n°3

  • Élément n°1
  • Élément n°2
  • Élément n°3

  Changer les marqueurs de balises

  en utilisant CSS

  Éléments de liste à puces créés par balise

  , peut être marqué avec des images arbitraires. CSS est utilisé pour changer le type de marqueur. Par exemple

  • Élément n°1
  • Élément n°2
  • Élément n°3

  Et voici à quoi cela ressemble sur la page :

  • Élément n°1
  • Élément n°2
  • Élément n°3

  C en utilisant CSS nous pouvons définir d'autres types d'affichage de marqueur. Mais vous devez vous rappeler que lorsque vous spécifiez un style pour une balise

  , il s'applique à tous les éléments de la liste.
  Si vous décidez de modifier les listes standard ul et li, alors ce sujet vous intéressera. Parce qu'ici vous en apprendrez plusieurs solutions originales. Ce qui vous aidera certainement à changer l'apparence standard en une apparence unique, où le style CSS est utilisé, pour la conception des listes. L’avantage est que nous n’utiliserons qu’une seule classe partout, ce qui changera radicalement le look. En plus de ces paramètres, vous pouvez spécifier à quel numéro la liste doit commencer ; ici, vous pouvez tout faire vous-même. La valeur de départ par défaut pour les listes numérotées est la première ou la lettre A.

  Une fois les bases réglées, nous allons maintenant examiner de plus près les éléments utilisés pour donner de la structure et du sens aux différentes parties de la conception. Si quelqu'un ne le sait pas, ul et li sont une bien meilleure option que le texte brut, car lorsque le texte est renvoyé à la ligne, en particulier dans téléphone mobile, il s'indente parfaitement et ne s'enroule pas autour du marqueur.

  Les listes sont considérées comme un excellent moyen de présenter des informations sur des pages car elles sont faciles à lire et ont une belle apparence. Beaucoup de gens semblent penser que les puces sont de petites images, mais en fait elles sont toutes créées à l'aide d'un code HTML assez simple. Vous pouvez intégrer différents types listes les unes dans les autres si vous le souhaitez, n'oubliez pas de les fermer correctement. Vous pouvez jouer avec le texte de votre choix dans toutes ces commandes de liste.

  Il faut également savoir que les listes contiennent initialement plusieurs éléments :

  1 . Informations désorganisées.
  2 . Informations organisées.
  3 . Définitions.

  Commençons l'installation :

  1.Option :

  
  
  • Élément de liste
  
  
  • Liste unique
  
  
  • Listes originales
  
  
  • ZORNET.RU - Webmaster
  
  
  • Une autre liste
  
  
  
  CSS

  Ksangelopan (
  marge : 19px 0 0 ;
  remplissage : 0 ;
  style de liste : aucun ;
  compteur-réinitialisation : li ;
  }
  .ksangelopan li (
  bordure : 2px solide #3575ad ;
  arrière-plan : #d7dee4 ;
  position : relative ;
  marge inférieure : 17 px ;
  remplissage : 15px 9px ;
  }
  .ksangelopan li: survol (
  indice z : 1 ;
  }
  .ksangelopan li:avant (
  bordure : 2px solide #2270b3 ;
  position : absolue ;
  haut : -14px ;
  remplissage : 3px 9px ;
  taille de police : 11 px ;
  poids de la police : gras ;
  couleur : #246eaf ;
  arrière-plan : #f2f4f7 ;
  contre-incrément : li ;
  contenu : compteur(li);
  -durée de transition du kit web : 0,4 s ;
  durée de transition : 0,4 s ;
  }
  .ksangelopan li:hover:avant (
  arrière-plan : #2672b3 ;
  couleur : #f7f9fb ;
  -webkit-transform : traduire (-11px, 0);
  -ms-transform : traduire (-11px, 0);
  -o-transform : traduire (-11px, 0);
  transformer : traduire (-11px, 0);
  }
  .ksangelopan li:après (
  contenu: "";
  position : absolue ;
  durée de transition : 0,3 s ;
  -webkit-transition-property : largeur ;
  propriété de transition : largeur ;
  indice z : -1 ;
  arrière-plan : #FFF ;
  hauteur : 100 % ;
  gauche : 0 ;
  haut : 0 ;
  largeur : 0 ;
  }
  .ksangelopan li:hover:après (
  largeur : 100 % ;
  }

  
  C'est tout pour l'installation.

  2 Deuxième option :

  

  
  
  • Élément de liste
  
  
  • Liste unique
  
  
  • Listes originales
  
  
  • ZORNET.RU - Webmaster
  
  
  • Une autre liste
  
  
  
  CSS

  Beleduzlopamges (
  marge inférieure : 8 px ;
  remplissage : 0 ;
  style de liste : aucun ;
  compteur-réinitialisation : li ;
  }
  .beleduzlopamges li (
  position : relative ;
  bordure : 2px solide #195588 ;
  arrière-plan : #eff3f7 ;
  rembourrage : 15 px, 19 px, 15 px, 27 px ;
  marge : 12px 0 12px 40px ;
  -durée de transition du kit web : 0,3 s ;
  durée de transition : 0,3 s ;
  }
  .beleduzlopamges li:hover (
  arrière-plan : #FFF ;
  }
  .beleduzlopamges li:avant (
  hauteur de ligne : 32 px ;
  position : absolue ;
  haut : 4px ;
  gauche : -39px ;
  largeur : 39px ;
  alignement du texte : centre ;
  taille de police : 16 px ;
  poids de la police : gras ;
  couleur : #f9f5f5 ;
  arrière-plan : #275b88 ;
  contre-incrément : li ;
  contenu : compteur(li);
  durée de transition : 0,2 s ;
  }
  .beleduzlopamges li:hover:avant (
  largeur : 46 px ;
  }
  .beleduzlopamges li:après (
  position : absolue ;
  gauche : 0 ;
  haut : 4px ;
  contenu: "";
  hauteur : 0 ;
  largeur : 0 ;
  bordure : 16 px solide transparente ;
  couleur de la bordure gauche : #275b88 ;
  -durée de transition du kit web : 0,2 s ;
  durée de transition : 0,2 s ;
  }
  .beleduzlopamges li:hover:after (
  marge gauche : 6 px ;
  }

  
  Vous pouvez définir indépendamment le gamma central pour qu'il corresponde au style principal du site.

  3 Troisième option :

  

  
  
  • Scripts pour uCoz
  
  
  • Modèles pour uCoz
  
  
  • Conception de sites Web
  
  
  • Styles de sites Web
  
  
  • Styliser avec CSS
  
  
  
  CSS

  Nizualisanelag (
  remplissage : 0 ;
  style de liste : aucun ;
  compteur-réinitialisation : li ;
  }
  .nizualisanelag li (
  position : relative ;
  rembourrage : 9 px, 17 px, 17 px, 25 px ;
  marge gauche : 39 px ;
  durée de transition : 0,2 s ;
  curseur : pointeur ;
  poids de la police : gras ;
  couleur : #343638 ;
  }
  .nizualisanelag li:avant (
  bordure : 3px solide transparente ;
  hauteur de ligne : 35 px ;
  position : absolue ;
  haut : 0 ;
  gauche : -29px ;
  largeur : 41 px ;
  texte-align:centre;
  taille de police : 14 px ;
  poids de la police : gras ;
  couleur : #619dce ;
  contre-incrément : li ;
  contenu : compteur(li);
  durée de transition : 0,3 s ;
  
  dimensionnement de la boîte : bordure-boîte ;
  }
  .nizualisanelag li:hover:avant (
  couleur : #337AB7 ;
  }
  .nizualisanelag li:après (
  position : absolue ;
  haut : 0 ;
  gauche : -29px ;
  largeur : 41px ;
  hauteur : 41px ;
  bordure : 5px solide #468bd0 ;
  rayon de bordure : 50 % ;
  contenu: "";
  opacité : 0,5 ;
  -webkit-box-sizing : bordure-box ;
  -moz-box-sizing : bordure-box ;
  dimensionnement de la boîte : bordure-boîte ;
  }
  .nizualisanelag li:hover:après (
  animation : 500 ms de facilité d'entrée et de sortie, 0 s de rebond ;
  opacité : 1 ;
  }

  @keyframes rebondIn (
  0% {
  opacité : 0 ;
  transformation : scale3d(.3, .3, .3);
  }
  20% {
  transformation : scale3d(1.3, 1.3, 1.3);
  }
  40% {
  transformation : scale3d(.9, .9, .9);
  }
  60% {
  opacité : 1 ;
  transformer : scale3d(1.03, 1.03, 1.03) ;
  }
  80% {
  transformation : scale3d (.97, .97, .97);
  }
  à (
  opacité : 1 ;
  transformation : scale3d(1, 1, 1);
  }
  }

  
  Livré avec une belle animation.

  4 Quatrième option :

  

  
  
  • Le premier élément du site
  
  
  • Deuxième élément pour le site
  
  
  • Troisième élément pour le site
  
  
  • Le quatrième élément du site
  
  
  • Le cinquième élément du site
  
  
  
  CSS

  Remplissage : 0 ;
  style de liste : aucun ;
  }
  .kudezamuden li(
  remplissage : 6 px ;
  }
  .kudezamuden li:avant (
  remplissage à droite : 11 px ;
  poids de la police : gras ;
  couleur : #4979a0 ;
  contenu : "\2606" ;
  durée de transition : 0,4 s ;
  }
  .kudezamuden li:hover:avant (
  couleur : #235e90 ;
  contenu : "\2605" ;
  }

  
  Similaire versions précédentes, seule l'icône elle-même a été modifiée.

  En général, il s'agit d'une petite sélection de listes que le webmaster peut réaliser belle liste sur le portail, où il peut lui-même le concevoir davantage, comme il veut lui-même le voir.

  Si vous devez placer des éléments dans une liste numérotée au lieu d'une liste à puces, du HTML ordonné sera utilisé. Cette liste est créée à l'aide de la balise ol. La numérotation commence à un et augmente de un pour chaque élément de liste ordonné suivant avec la balise li.

  La seule différence est que cette balise est strictement destinée aux listes de numérotation. Le nom de la balise vient de l'abréviation anglaise « Ordered List » - une liste numérotée.

  Syntaxe des balises

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3
  4. ...

  Où l'attribut type="value" peut prendre les valeurs suivantes

  • A - définit des marqueurs sous forme de lettres latines majuscules (A, B, C..) ;
  • a - définit des marqueurs sous forme de lettres latines minuscules (a, b, c..) ;
  • I - place des marqueurs sous forme de grands chiffres romains (I, II, III, IV..) ;
  • i - définit des marqueurs sous forme de petits chiffres romains (i, ii, iii, iv..) ;
  • 1 (par défaut) - définit des marqueurs sous forme de chiffres arabes (1, 2, 3 ..) ;

  L'attribut start="value" spécifie la valeur initiale (valeur de départ) du rapport.

  L'attribut inversé spécifie le comptage inversé (si nécessaire).

  Étiqueter

  nécessite l'utilisation obligatoire d'une balise de fermeture

  Pour former des éléments de liste, une balise appariée est utilisée

  • . Entre les balises d'ouverture et de fermeture se trouvent des mots individuels, des phrases, des paragraphes, des images, des morceaux de code et bien plus encore qui constituent le contenu de la liste à puces.

    Note

    Dans la liste, vous pouvez remplacer le compte par le vôtre. Il existe un attribut spécial value="" sur la balise à cet effet.

  • , auquel est attribué un certain valeur numérique. Par exemple

    1. Élément n°1
    10. Élément n°2
    11. Élément n°3

  Exemples avec des listes numérotées en html (

  )

  Exemple 1. Liste numérotée HTML en lettres latines

  Exemple avec des majuscules

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Exemple avec des lettres minuscules

  1. Élément n°10
  2. Élément n°11
  3. Élément n°12

  Voici à quoi cela ressemble sur la page :

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Exemple 2. Liste numérotée HTML en lettres romaines

  Exemple avec des majuscules

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Voici à quoi cela ressemble sur la page :

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Exemple avec des lettres minuscules

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Voici à quoi cela ressemble sur la page :

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Exemple 3. Liste numérotée HTML position de départ différente

  Un exemple qui montre les capacités de l'attribut start, qui vous permet de définir la valeur de départ du compteur.

  50. Élément n°1
  51. Élément n°2
  52. Élément n°3

  Voici à quoi cela ressemble sur la page :

  1. Élément n°1
  2. Élément n°2
  3. Élément n°3

  Exemple 4. Modification du nombre dans les listes numérotées HTML

  Vous trouverez ci-dessous un exemple avec la possibilité de modifier les valeurs du compteur à l'aide de l'attribut value lors de l'affichage de nouveaux éléments dans les balises

  • .

    10. Élément n°1
    11. Élément n°2
    100. Élément n°3
    101. Élément n°4

    Voici à quoi cela ressemble sur la page :

    1. Élément n°1
    2. Élément n°2
    3. Élément n°3
    4. Élément n°4

    Exemple 5. Liste numérotée inversée en HTML

    Vous trouverez ci-dessous un exemple de liste numérotée inversée (en comptant dans l’ordre inverse).

    10. Élément n°1
    11. Élément n°2
    12. Élément n°3
    13. Élément n°4

    Voici à quoi cela ressemble sur la page :

    1. Élément n°1
    2. Élément n°2
    3. Élément n°3
    4. Élément n°4

    Élément

    (de l'anglais « unordered list ») crée une liste à puces (non ordonnée). Généralement, l'élément
    utilisé pour créer des listes où la modification de l'ordre des éléments dans cette liste ne change pas de manière significative la signification de la liste.

    Étiqueter

    fait référence à des éléments de bloc, il occupera donc toute la largeur dont il dispose et la taille de la hauteur dépendra de la quantité de contenu.

    Les éléments des listes numérotées sont définis à l'aide d'une balise

    • , qui, en plus du texte, peut inclure d'autres éléments HTML (listes, images, titres, paragraphes, etc.). Par défaut, listes à puces sont affichés sur la page Web sous forme de liste commençant par un petit cercle noir. Les navigateurs ajoutent une petite marge à gauche lors de l'affichage des éléments de liste.

      Note: Si pour

      s'applique Propriété CSS, alors les éléments
      • hériter de ces propriétés.

        Conseil: Pour modifier le type de marqueur, utilisez la propriété CSS list-style-type ou la propriété list-style-image, qui vous permet de remplacer les marqueurs par des images. Pour créer des listes numérotées, utilisez la balise

        .

        Syntaxe

        ...
        • ...
        ...

        Balise de fermeture

        Requis.

        Attributs

        compactObsolète en HTML5 Réduit l’indentation et l’espacement des lignes. type HTML5 Définit le type de marqueur de liste.

        Disponible pour cet article attributs globaux Et événements.

        Style par défaut

        La plupart des navigateurs afficheront l'élément

        avec ce qui suit Valeurs CSS défaut:

        Ul ( affichage : bloc ; type de style de liste : disque ; marge supérieure : 1 em ; marge inférieure : 1 em ; marge gauche : 0 ; marge droite : 0 ; remplissage gauche : 40 px ; )

        Différences entre HTML 4.01 et HTML5

        Les attributs compact et type ne sont pas pris en charge en HTML5.

        Exemple d'utilisation :

        Liste HTML non ordonnée :

        Exemple HTML :

        Essayez-le vous-même
        • Café
        • Thé
        • Cacao

        Caractéristiques

        Spécification	Statut
        WHATWG HTML Niveau de vie (WHATWG)	Niveau de vie
        HTML4.01 (W3C)	Recommandation
        HTML5 (W3C)	Recommandation
        HTML5.1 (W3C)	Recommandation

        Prise en charge du navigateur

        Essayez-le vous-même - Exemples

        Comment puis-je faire commencer la liste par un chiffre autre que 1 ?

        Continuons nos conversations sur les débuts du HTML. Dans cet article, je souhaite expliquer comment créer des paragraphes, des listes et des titres dans le texte. Et aussi sur les balises simples
        Et

        ---

        .

        Je vous conseille fortement de lire la première leçon de cette série, ainsi que l'article d'introduction sur la façon de commencer à étudier le HTML pour ceux qui ne les connaissent pas encore.

        Nous allons maintenant continuer à étudier les balises. Je suppose que le lecteur est déjà familier avec le contenu des articles ci-dessus.

        Comme toujours, plan de travail :

        1. Paragraphes
        2. Sauts de ligne
           
        3. Listes et éléments de liste
        4. Rubriques
        5. Règles horizontales

           ---

        Paragraphes

        Le texte est presque toujours constitué de paragraphes. Un paragraphe est un élément de texte qui véhicule une pensée complète.

        En HTML, un paragraphe, comme le montre son titre, est désigné par . La lettre « p » est tirée du mot « paragraphe », qui signifie simplement « paragraphe ».

        Regardons un exemple :

        Le texte du premier paragraphe. Il contient une pensée. Mais maintenant, cette réflexion est terminée.
        

        
        

        Une autre réflexion a déjà commencé et nous l'écrivons dans un autre paragraphe.
        

        Comme vous pouvez le constater, l’utilisation des paragraphes est très simple et ne nécessite aucun commentaire particulier. Si nous regardons ce code dans un navigateur, nous verrons deux lignes avec une ligne vide entre elles. Dans les textes russes, il est d'usage de séparer un paragraphe non pas par une ligne vide, mais en décalant la première ligne vers la droite. Mais c'est exactement le formatage qui est souvent utilisé sur Internet, il est donc souvent laissé dans les textes en russe. Cependant, si vous n'aimez pas ce comportement, vous pouvez le modifier à l'aide de CSS.

        Sauts de ligne
        

        Parfois, vous devez traduire une ligne sans terminer une pensée ni fermer un paragraphe. Autrement dit, accédez simplement à une nouvelle ligne. Il y a une seule balise pour cela
        . Voici un exemple de son utilisation :

        Le vent souffle joyeusement
        
        Et le bateau accélère
        
        Il court dans les vagues
        Avec les voiles relevées.
        

        Ce fragment d'un poème d'A.S. Pouchkine nous a aidé à illustrer l'action du tag
        . J'ai spécifiquement placé les deux dernières lignes de ce quatrain dans une seule ligne de code pour montrer que les lignes sont transférées vers une nouvelle ligne non pas parce que nous avons placé des sauts de ligne, mais parce que nous avons placé des balises.
        . Cette balise est très simple et ne nécessite pas d’explications détaillées, nous arrêterons donc d’en discuter ici.

        listes,

        et lister les éléments

        Parfois, vous devez énumérer quelque chose dans le texte. A cet effet, trois balises sont utilisées : ul, ol, li. Toutes ces balises sont des balises de conteneur, mais la balise est toujours contenue dans l'un des conteneurs ou et n'a aucune signification en dehors d'eux. Le conteneur ul est utilisé lorsque nous ne nous soucions pas de l'ordre des éléments répertoriés et que nous ne voulons pas nous concentrer sur l'ordre dans lequel ils apparaissent. La balise ol, au contraire, concentre l'attention sur la séquence des éléments, en numérotant automatiquement chaque ligne. Regardons un exemple :

        
        
        • Chignon
        
        
        • Tarte
        
        
        • Miche de pain
        
        
        • Tarte
        
        

        Sur l'écran du navigateur, ce code ressemblera à ceci :

        • Chignon
        • Tarte
        • Miche de pain
        • Tarte

        Si on remplace simplement la balise ul par la balise ol, on obtient une liste numérotée :

        
        
        1. Chignon
        
        
        2. Tarte
        
        
        3. Miche de pain
        
        
        4. Tarte
        
        

        Maintenant, cela ressemble à ceci :

        1. Chignon
        2. Tarte
        3. Miche de pain
        4. Tarte

        Personne n'interdit d'imbriquer une liste dans une autre, en formant des listes imbriquées avec des sous-listes :

        
        Outils:
        
        • Scie
        
        
        • Tournevis
          
          
          
          1. Droit
          
          
          2. Croix
          
          
          
          
        
        
        • Percer
        
        

        Vous devez expérimenter un peu ces listes pour vous habituer à les utiliser. Il existe un autre type de liste, mais elle est rarement utilisée, je n'en parlerai donc pas maintenant. Peut-être dans un autre article.

        Bien sûr, comme tout le reste, apparence Ces éléments peuvent être modifiés au-delà de la reconnaissance à l'aide de CSS.

        Rubriques

        Bien entendu, les paragraphes aident à structurer les documents. Mais afin de diviser un texte volumineux en parties logiques plus petites, vous pouvez nommer chacune d'elles. Chaque partie peut contenir d'autres sous-parties, avec leurs propres titres de niveau inférieur, et ainsi de suite. Pour définir le titre, utilisez des balises , où « x » est un nombre compris entre 1 et 6. Plus le nombre est élevé, plus le titre est bas. Autrement dit, le titre de niveau supérieur sera appelé h1 et le titre de niveau inférieur sera appelé h6. Par défaut, le texte de ces titres est affiché en gros caractères et en retrait. Ce texte est affiché sur toute la ligne, c'est-à-dire que les balises hx sont des balises de bloc. La balise h1 a la police la plus grande et la balise h6 a la police la plus petite. En règle générale, il y a une, au maximum deux balises h1 de niveau supérieur sur une page. À mesure que le niveau diminue, le nombre de balises augmente. Mais il est rare qu’un webmaster soit capable de fragmenter le texte au point de nécessiter des titres de niveau 5 ou 6. Même le niveau 4 est rarement utilisé.

        Moins de mots, plus d'action !