suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML-Abschnitt-Tag

HTML-Abschnitt-Tag

WBOY
WBOYOriginal
2024-09-04 16:31:331112Durchsuche

Der folgende Artikel bietet eine Übersicht über den HTML-Abschnitt Tag. HTML Tag definiert den Abschnitt von Dokumenten wie Kopfzeilen, Kapitel, Fußzeilen usw. Das

Tag unterteilt den Webseiteninhalt in Abschnitte und Unterabschnitte. Es wird normalerweise verwendet, wenn zwei Fußzeilen, Kopfzeilen oder ein anderer neuer Abschnitt erforderlich sind. Abschnitts-Tags gruppieren im Allgemeinen den generischen Block verwandter Inhalte. Der Hauptvorteil der Verwendung von
Tag ist, dass es sich um ein semantisches Element handelt, das seine Bedeutung sowohl für den Entwickler als auch für den Browser beschreibt.

Wichtige Punkte, die für den Abschnitt Tag beachtet werden sollten

Für das Section-Tag in HTML5 sind sowohl Start- als auch End-Tags erforderlich, d. h.

……..

  • Tag wird verwendet, um den Inhalt zu unterteilen, d. h. es verteilt den Abschnitt und den Unterabschnitt.
  • Der zulässige Inhaltstyp für das Abschnitts-Tag ist Flow-Inhalt, d. h. Das Tag kann als übergeordnetes Tag keine verschachtelten
    -Tags haben. Element; dann ist die gleiche Der Inhalt darf keine haben. tag als übergeordnetes Element; Unterteilung von Inhalten und greifbaren Inhalten.
  • Das Element darf kein Nachkomme eines
    -Elements sein. Element.
  • Jeder sollte durch die Einführung eines Überschriften-Tags als untergeordnetes Element des
    visualisiert werden. Element.
  • Wenn wir den Inhalt eines Element einzeln, dann können wir ein
    Tag stattdessen.
  • Element sollte nicht als generischer Container verwendet werden; Das ist es, was
    Dies gilt insbesondere dann, wenn die Aufteilung nur zu Stylingzwecken erfolgt. Als Faustregel gilt, dass der Das Tag sollte logischerweise in der Gliederung des Dokuments erscheinen.
  • Da es sich bei dem Element um ein semantisches Element handelt, liefert es sowohl für Menschen als auch für Benutzeragenten eine Bedeutung des eingeschlossenen Inhalts und konzentriert sich dabei auf einen Abschnitt des Dokuments. Da es sich um ein generisches semantisches Element handelt, sollten Sie es verwenden, wenn keine anderen semantischen Containerelemente (article, aside und nav) geeignet sind.

Syntax:

Unten ist die Syntax erwähnt:

HTML/XHTML

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

CSS

section{
--your css code—
}

Attribute des HTML-Abschnitts-Tags

Im Folgenden sind einige der genannten Attribute aufgeführt:

1. Tagspezifische Attribute

Es ist kein spezifisches Attribut vorhanden, das mit dem verwendet werden kann. Tag.

2. Globale Attribute

Wie alle anderen HTML-Tags ist auch der

Tag unterstützt auch die globalen Attribute in HTML5.

Die folgenden globalen Attribute sind:

  • bei einem Abort
  • onautocomplete
  • onautocompleteerror
  • onblur
  • oncancel
  • oncanplay
  • oncanplaythrough
  • onchange
  • onclick
  • onclose
  • oncontextmenu
  • oncuechange
  • ondblclick
  • ondrag
  • hervorragend
  • ondragenter
  • ondragexit
  • ondragleave
  • ondragover
  • ondragstart
  • ondrop
  • ondurationchange
  • einmal geleert
  • onended
  • Ein Fehler
  • onfocus
  • bei Eingabe
  • ungültig
  • onkeydown
  • auf Tastendruck
  • onkeyup
  • aufladen
  • onloadeddata
  • onloadedmetadata
  • onloadstart
  • onmousedown
  • onmouseenter
  • onmouseleave
  • onmousemove
  • onmouseout
  • onmouseover
  • onmouseup
  • auf dem Mausrad
  • Onpause
  • onplay
  • Weiterspielen
  • im Fortschritt
  • onratechange
  • onreset
  • onresize
  • onscroll
  • onseek
  • auf der Suche
  • onselect
  • onshow
  • onsort
  • installiert
  • onsubmit
  • onsuspend
  • pünktliche Aktualisierung
  • Ein/Aus
  • onvolumechange
  • Warten

3. Ereignisattribute

Es ist kein Ereignisattribut vorhanden, das mit dem verwendet werden kann. Tag.

CSS-Textformatierungseigenschaften in Markieren

Im Folgenden sind die CSS-Textformatierungseigenschaften aufgeführt:

  • Textfarbe
  • Textausrichtung
  • Textdekoration
  • Texttransformation
  • Linienhöhe
  • Textrichtung
  • Textschatten
  • Wortabstände

CSS-Schrifteigenschaften in
Markieren

Im Folgenden sind die CSS-Schriftarteneigenschaften aufgeführt:

  • 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:

HTML-Abschnitt-Tag

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:

HTML-Abschnitt-Tag

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:

HTML-Abschnitt-Tag

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:

HTML-Abschnitt-Tag

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:

HTML-Abschnitt-Tag

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
.

Das obige ist der detaillierte Inhalt vonHTML-Abschnitt-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

html5 css html xhtml define if for while using class Length Attribute Property Event Generic number this table word
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML-Strike-TagNächster Artikel：HTML-Strike-Tag

In Verbindung stehende Artikel

Mehr sehen