Updated July 10, 2023
Introduction to HTML section Tag
The following article provides an outline of the HTML section Tag. HTML <section> tag defines the section of documents such as headers, chapters, footers, etc. The <section> tag splits the web page content into sections & subsections. It is usually used when there is a demand for two footers, headers, or any other new section. Section tag generally groups the generic block of related content. The main advantage of using <section> tag is that it is a semantic element that describes its meaning to both the developer and browser.
Important Points to be Noted for section Tag
Both Start and End tags are required for the Section tag in HTML5, i.e., <section>……..</section>
- <section> tag is used to bifurcate the content, i.e., it distributes the section and subsection.
- The permitted content type for section tag is flow content means <address> tag, as a parent, cannot have nested <address> element; then the same <address> content cannot have <address> tag as its parent; sectioning content and palpable content.
- <section> element must not be a descendant of an <address> element.
- Each <section> should be visualized by introducing a heading tag as a child of the <section> element.
- If we need to syndicate the content of an <section> element individually, then we can use a <article> tag instead.
- <section> element should not be used as a generic container; this is what <div> is for, especially whenever the sectioning is done only for styling purposes. A rule of thumb is that the <section> tag should logically appear on the document’s outline.
- <section> element being a semantic element, it provides meaning about the enclosed content, focusing on a section of the document to both human and user agents. It is a generic semantic element, so you should use it when no other semantic container elements (article, aside, and nav) are appropriate.
Syntax:
Below is the syntax mentioned:
HTML/XHTML
<body>
<section> ... </section>
<body>CSS
section{
--your css code—
}Attributes of Html section Tag
Below are some of the attributes mentioned :
1. Tag-Specific Attributes
No specific attribute is present to be used with the <section> tag.
2. Global Attributes
Like all other HTML tags, the <section> tag also supports the global attributes in HTML5.
The following are the global attributes:
- onabort
- onautocomplete
- onautocompleteerror
- onblur
- oncancel
- oncanplay
- oncanplaythrough
- onchange
- onclick
- onclose
- oncontextmenu
- oncuechange
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmouseenter
- onmouseleave
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreset
- onresize
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onsort
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- ontoggle
- onvolumechange
- Onwaiting
3. Event Attributes
No event attribute is present to be used with the <section> tag.
CSS Text Formatting Properties in <section> Tag
Given below are the CSS Text Formatting Properties:
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Line-height
- Text-direction
- Text-shadow
- Word-spacing
CSS Font Properties in <section> Tag
Given below are the CSS Font Properties:
- 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 <address> 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:
Example #2
Nested Section Tag.
The <section> 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:
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 ©2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>Output:
Example #4
Code:
<!DOCTYPE>
<html>
<head>
<style>
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:
Example #5
While creating a <section> 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 <div> element, which will probably be more appropriate, and always never use the <section> 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:
Conclusion
The <section> element is a structural HTML element that groups all the related elements. Each <section> usually includes one or more heading elements and additional elements presenting related content.<section> 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 <section>.
Recommended Articles
We hope that this EDUCBA information on “HTML section Tag” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
