Maison  >  Article  >  interface Web  >  Balise de section HTML

Balise de section HTML

WBOY
WBOYoriginal
2024-09-04 16:31:331108parcourir

L'article suivant donne un aperçu de la balise de la section HTML. HTML

La balise
La balise divise le contenu de la page Web en sections et sous-sections. Il est généralement utilisé lorsqu'il y a une demande pour deux pieds de page, des en-têtes ou toute autre nouvelle section. La balise Section regroupe généralement le bloc générique du contenu associé. Le principal avantage de l’utilisation de
La balise est qu'il s'agit d'un élément sémantique qui décrit sa signification à la fois pour le développeur et le navigateur.

Points importants à noter pour la balise de section

Les balises de début et de fin sont requises pour la balise Section en HTML5, c'est-à-dire

……..

  • La balise est utilisée pour bifurquer le contenu, c'est-à-dire qu'elle distribue la section et la sous-section.
  • Le type de contenu autorisé pour la balise de section est le contenu de flux signifie la balise, en tant que parent, ne peut pas avoir une balise élément; puis la même le contenu ne peut pas avoir marquer comme son parent ; contenu de sectionnement et contenu palpable.
  • L'élément ne doit pas être un descendant d'un élément élément.
  • Chaque
    doit être visualisé en introduisant une balise de titre en tant qu'enfant de la
    élément.
  • Si nous devons syndiquer le contenu d'une
    élément individuellement, nous pouvons alors utiliser un
    tag à la place.
  • L'élément ne doit pas être utilisé comme conteneur générique ; c'est ce que
    est destiné, surtout lorsque la coupe est effectuée uniquement à des fins de style. En règle générale, la
    la balise devrait logiquement apparaître sur le plan du document.
  • L'élément étant un élément sémantique, il donne un sens au contenu inclus, en se concentrant sur une section du document aux agents humains et utilisateurs. Il s'agit d'un élément sémantique générique, vous devez donc l'utiliser lorsqu'aucun autre élément de conteneur sémantique (article, apart et nav) n'est approprié.

Syntaxe :

Ci-dessous la syntaxe mentionnée :

HTML/XHTML

<body>
<section> ... </section>
<body>

CSS

section{
--your css code—
}

Attributs de la balise de section Html

Voici quelques-uns des attributs mentionnés :

1. Attributs spécifiques aux balises

Aucun attribut spécifique n'est présent pour être utilisé avec la

étiquette.

2. Attributs globaux

Comme toutes les autres balises HTML, la

La balise prend également en charge les attributs globaux en HTML5.

Voici les attributs globaux :

  • sur l'avortement
  • onautocomplete
  • onautocompleteerror
  • onflou
  • onannuler
  • oncanplay
  • on peut jouer
  • en changement
  • sur clic
  • onclose
  • dans le menu contextuel
  • oncuechange
  • ondblclick
  • ondrag
  • ondraende
  • ondragenter
  • ondragesortie
  • ondragleave
  • ondragover
  • ondragstart
  • en livraison
  • changement de durée
  • non vidé
  • terminé
  • erreur
  • concentré
  • en entrée
  • oninvalid
  • onkeydown
  • sur une touche
  • onkeyup
  • charger
  • données chargées
  • métadonnées chargées
  • onloadstart
  • onmousedown
  • onmouseenter
  • en congé de souris
  • onmousemove
  • onmouseout
  • au survol de la souris
  • sur la souris
  • sur la molette de la souris
  • en pause
  • en jeu
  • en jeu
  • en cours
  • sur le changement de taux
  • onreset
  • onresize
  • surdéfilement
  • recherché
  • en quête
  • sur sélection
  • présentation
  • sortie
  • installé
  • onsubmit
  • suspendre
  • mise à jour à l'heure
  • activer la bascule
  • sur le changement de volume
  • En attente

3. Attributs de l'événement

Aucun attribut d'événement n'est présent pour être utilisé avec la

étiquette.

Propriétés de formatage du texte CSS dans
Étiquette

Vous trouverez ci-dessous les propriétés de formatage du texte CSS :

  • Couleur du texte
  • Alignement du texte
  • Texte-décoration
  • Transformation de texte
  • Hauteur de ligne
  • Direction du texte
  • Texte-ombre
  • Espacement des mots

Propriétés de la police CSS dans la
Étiquette

Vous trouverez ci-dessous les propriétés de la police CSS :

  • font-style: normal|italic|oblique|initial|inherit
  • font-variant: normal|small-caps|initial|inherit
  • font-weight: normal|bold|bolder|lighter|number|initial|inherit
  • font-size: medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
  • font-family: family-name|generic-family|initial|inherit

CSS Test Shadow Property for
Tag

Given below is the CSS Test Shadow Property:

<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>

Examples of HTML section Tag

Given below are the examples of HTML section Tag:

Example #1

Code:

<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
</section>
</body>
</html>

Output:

Balise de section HTML

Example #2

Nested Section Tag.

The

tag can be nested wherein the font size of the subsection is smaller than the section only if both have the same font properties. The subsection is used for organizing complex data.

Code:

<!DOCTYPE html>
<html>
<head>
<title>Section tag</title>
</head>
<body>
<section>
<h1>eduCBA: Article 1</h1>
<p>Content of Article 1</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 2</h1>
<p>Content of Article 2</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
<section>
<h1>eduCBA: Article 3</h1>
<p>Content of Article 3</p>
<section>
<h1>Subsection</h1>
<h1>Subsection</h1>
</section>
</section>
</body>
</html>

Output:

Balise de section HTML

Example #3

Code:

<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Section tag example</h1>
</header>
<main>
<article> An article on HTML Section tag</article>
</main>
<aside> Body of an article </aside>
<footer>
<section>Copyright &copy;2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>

Output:

Balise de section HTML

Example #4

Code:

<!DOCTYPE>
<html>
<head>
<style&gt
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<h2> List of Articles</h2>
<section>
<h3>Article 1 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 2 heading</h3>
<p> Body of article </p>
</section>
<section>
<h3>Article 3 heading</h3>
<p> Body of article </p>
</section>
</body>
</html>

Output:

Balise de section HTML

Example #5

While creating a

tag in HTML5, we can use either the class or id attributes wherein each id should be unique, and the class can be used multiple times when necessary.

The section should always have a header element (H1 to H6). If a title cannot be given for the section, we can use the

element, which will probably be more appropriate, and always never use the
tag just for putting styles.

Code:

<!DOCTYPE>
<html>
<head>
<style>
section{
border:1px solid pink;
padding:15px;
margin:10px;
}
</style>
</head>
<body>
<section id="sectiontag" class="sectionclass">
<h2>HTML Section tag</h2>
<p>Random text Random text Random text...</p>
</section>
<section id="articletag">
<h2>HTML Article tag</h2>
<p>Random text Random text Random text...</p>
</section>
<section id="footertag">
<h2>HTML Footer tag</h2>
<p>Random text Random text Random text...</p>
</section>
</body>
</html>

Output:

Balise de section HTML

Conclusion

The

element is a structural HTML element that groups all the related elements. Each
usually includes one or more heading elements and additional elements presenting related content.
is a new HTML5 element used to define an important document section. It is better to use it within articles, to define navigation, or in the header or footer. If a section of the content deserves its heading, which would be listed in a theoretical or actual table of contents, it should be placed as a
.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Balise d'avertissement HTMLArticle suivant:Balise d'avertissement HTML