Introduction to HTML section Tag

The following article provides an outline of the 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 for 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 the <section> tag should logically appear on the outline of the document.
<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 none of the other semantic container elements (article, aside and nav) is appropriate.

Syntax:

Below are 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 :

Tag-Specific Attributes

There is no specific attribute present to be used with the <section> tag.

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

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> Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
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&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:

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, we can use the <div> element, which will probably be 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>.

Introduction to HTML section Tag

Introduction to HTML section Tag