Introduction to HTML section Tag
The following article provides an outline on HTML section Tag. HTML <section> tag is used to define the section of documents such as headers, chapters, footers, etc. The <section> tag splits the web page content into section & subsections. It is usually used when there is a demand of two footers or 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, which describes its meaning to both developer and browser.
Important Points to be noted for section Tag
Both Start and End tag are required for 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.
- It is important that <section> element must not be a descendant of an <address> element.
- Each <section> should be visualized, typically by introducing a heading tag as a child of the <section> element.
- If we need to individually syndicate the content of an <section> element 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 purpose. A rule of thumb to follow is that <section> tag should logically appear on the outline of the document.
- <section> element being a semantic element it provides meaning about what the enclosed content is—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 none of the other semantic container elements (article, aside and nav) are appropriate.
Syntax:
HTML/XHTML
<body>
<section> ... </section>
<body>
CSS
section{
--your css code—
}
Attributes of Html section Tag
1. Tag-Specific Attributes
There is no specific attribute present to be used with the <section> tag.
2. Global Attributes
Similar to all other HTML tags present, 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
There is no event attribute 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 are 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>
4.5 (4,750 ratings)
View Course
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 class can be used multiple times when necessary.
Always we should have a header element (H1 to H6) as a part of the section. If a title cannot be given for the section, then we can use the <div> element which will be probably more appropriate and always never ever 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 type of structural HTML element which is used to group together 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 which is used to define an important section of a document. It is better to use within articles, to define navigation or in the header or footer. If a section of the content deserves its own heading, and that heading would be listed in a theoretical or actual table of contents, it should be placed as a <section>.
Recommended Articles
This is a guide to the HTML section Tag. Here we discuss the introduction, attributes of Html section Tag, and examples. You may also have a look at the following articles to learn more –
