What is the difference between <section> and <div> tags in HTML ?
Both the tags (<div> and <section>) are used in the webpage, <section> tag means that the content inside relates to a single theme, and <div> tag is used as a block part of the webpage and don’t convey any particular meaning.
HTML <div> Tag: It is called a division tag. The <div> tag is a block-level element that only represents its child elements and doesn’t have a special meaning. It takes the Whole Width available on the screen. It is generally used with the title and class attributes. The <div> tag is one of the most used tags in website creation. Use <div> element for style purposes or for wrapping paragraphs within a section that are all to be given similar properties. Requires closing </div> tag too.
Note: It is recommended to use the <div> element as a last option and use other various tags such as <main>, <article> or <nav> as this practice is more convenient for the readers.
Syntax:
<div> <h1>Title</h1> <p>Information goes here....</p> </div>
Example: This example shows <div> tag.
HTML
<!DOCTYPE html> < html > < head > < title >Div example</ title > </ head > < body > < h1 style = "color:green" >GeeksForGeeks</ h1 > < div style = "background-color:#189" > < h2 >This is heading inside Div tag</ h2 > < p >This is paragraph inside Div tag.</ p > </ div > < p style = "color:red" >This is outside div tag</ p > </ body > </ html > |
Output:
Html <section> Tag: The <section> tag is not a generic container in a web-page. The content inside <section> tag will be grouped i.e. it’ll connect to a single subject and appear as an entry in an outline of the page. A common rule is that the <section> element is valid only if that element’s contents would be listed explicitly in the document’s outline. Section tag is used to distribute the content with a similar theme. The main advantage of the section tag is, it describes its meaning in a web page. It is mostly used when headers, footers, or any other section of documents are needed in a web page. Requires closing </section> tag too.
Syntax:
<section> <h1>Title</h1> <p>Information goes here....</p> </section>
Example: This example shows <section> tag
HTML
<!DOCTYPE html> < html > < head > < title >Title of the document</ title > </ head > < body > < h1 style = "color:green" >GeeksForGeeks</ h1 > < section > < h2 >GeeksForGeeks </ h2 > < ul > < li >Machine learning</ li > < li >DSA</ li > < li >Competitive programming</ li > < li >Web-Development</ li > < li >Java</ li > </ ul > </ section > < section > < h3 >Books</ h3 > < p >Learn Machine learning</ p > < p >Learn DSA</ p > < p >Learn Competitive programming</ p > < p >Learn Web-Development</ p > < p >Learn Java</ p > </ section > </ body > </ html > |
Output:
Differences between <div> and <section> tag:
<div> | <section> |
---|---|
It is called as division tag. | It is called as section tag. |
It represents its child elements and doesn’t have a special meaning. | It represents its child elements and has a special meaning. |
It doesn’t have any specific meaning. | It describes its meaning in the web page. |
Use <div> element for style purposes in webpage. | use <section> during requirements of headers or footers or any other section of documents. |
Please Login to comment...