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.
<div> <h1>Title</h1> <p>Information goes here....</p> </div>
Example: This example shows <div> tag.
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 the 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.
<section> <h1>Title</h1> <p>Information goes here....</p> </section>
Example: This example shows <section> tag
Differences between <div> and <section> tag: use <section> during requirements of headers or footers or any other section of documents.
<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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.