Balise de section HTML-tutoriel HTML-php.cn

Balise de section HTML

WBOY

Libérer： 2024-09-04 16:31:33

original

889 Les gens l'ont consulté

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>

Copier après la connexion

CSS

section{
--your css code—
}

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!