The <section> element was introduced in HTML5. It wraps an area of content or page that almost always requires a heading.
nanadwumor
The <section> element was introduced in HTML5. It wraps an area of content or page that almost always requires a heading.
An article element can have its content split into sections. Also, a section can contain some article elements. section should not be used as a general wrapper for styling purposes. The section element is similar to the div. However, the div is a semantically neutral element, whereas the section element is not.
Join other Subscribers on our YouTube channel and enjoy daily pogramming tutorials.
Syntax of <section> element
|
1 |
<section>...</section> |
<section> outlines a document
A section should typically have a header element (H1 through H6) to describe the purpose of the section.
Recommended
Difference Between Absolute and Relative References in HTML
A relative reference does not specify the complete path to a web page. It specifies only the name...
Example of <section> in code
The <section> element creates items inside outline of the document. Because of this, a section should typically have a header element (H1 through H6) to describe the purpose of the section in a sentence or two. Thus, if you cannot come up with a title for the section, the div element will be more suitable than the section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <html> <body> <!-- section element follows here --> <!--Note the h2 header that preceeds content of each section--> <section> <h2>Java Tutorials - section 1</h2> <p>content of section 1 goes here </p> </section> <section> <h2>Python Tutorials - Section 2</h2> <p>content of section 2 goes here </p> </section> <section> <h2>HTML Tutorials: Section 3</h2> <p>content of section 3 goes here</p> </section> </body> </html> |
Output
Common usage of the <section> element
Some common usage of the section element include the following:
- The individual portion of a tab switcher or content slider can be put into sections using the section element, especially if if an unordered list is not needed.
- Any lengthy page such as Privacy Policy, Terms and Conditions page can be divided into parts using the section element.
- The section element can divide the different sections of a one-page website or portfolio.
- It can be used to divide a book into chapters or sections.
When is it recommended to use the section element?
- The <section> element is similar to the <div> element so that means we can decide to use either the <div> or the <section> element. The question now is, when is it appropriate to use the <section> element? The <section> element is highly recommended to be used if the content of the element would be listed explicitly in the document’s outline. That is, you should be able to give a title to that portion of code you want to introduce the <section> element. The <section> element shouldn’t be thought of as any element you use to group a portion of your code that needs to be styled later in a CSS like the way the <div> element is used. It should however be used in the circumstance where the content it contains will be enumerated in your document’s outline. However, if an element is needed only for styling purposes, it is more appropriate to use the <div> element.
- Besides, if you find it difficult to describe elements in the <section> in brief statement, then <div> should be used in its stead.
When is it recommended to use the section element?
The <section> element creates items inside outline of the document. Because of this, a section should typically have a header element (H1 through H6) to describe the purpose of the section in a sentence or two. Thus, if you cannot come up with a title for the section, the div element will be more suitable than the section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head><title>The section element in HTML5</title></head> <body> <article> <hgroup> <h1>Electronics Gallery</h1> <h2>Smart Electronics</h2> </hgroup> <section> <!--This section is for Mobile Phones--> <h2>Mobile Phones</h2> <p>Fresh and smart mobile phones at extremely affordable prices</p> <p>All phones are brand new</p> <h3> 5G mobile phones</h3> <p>These phones use the latest 5G technology</p> </section> <section> <h2>Televisions</h2> <p>These are smart televisions with HD graphics</p> <p> All televisions have in-built satellite</p> </section> <section> <h2>Computer Accessories</h2> <p>Her are your favorite computer accessories</p> <p> Computers come from all high brands</p> <h3>Special offer</h3> </section> </article> </body> </html> |
Output
We have also said earlier that if you find it difficult to describe elements in the <section> in brief statement, then <div> should be used in its stead.
Program shows the use of <div> to group a bunch of code for styling.
A <div> element is preferred over a <section> here because the code is for styling purpose only and won’t be outlined in the document.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <style> div#pupil{ color:red; font-size:20px; } </style> </head> <body> <p>The school authorities were alarmed at the action of the new student.</p> <div id="pupil">John Wood, Mark Smith, Golden Gorden are some few.</div> </body> </html> |
Output
Global Attributes
The <section> element supports the global attributes in HTML
Event Attributes
The <section> element supports the event attributes in HTML
Default CSS Settings
The default CSS setting in most browsers is as below:
|
1 2 3 4 |
section { display : block; } |
You May Also Like…
Block And Inline Level Tags in HTML
Block elements start on a new line and end with a carriage return. That's, immediately after ending on a horizontal...
Selecting a browser for HTML5 development
Google's Chrome browser is simple to use and has the most up-to-date HTML5 features making it easier for developers....
Top 10 HTML5 formatting tags
HTML offers a range of elements for formatting text. HTML formatting tags include : <b> - Bold text...
Recent Comments