Skip to content

Commit 7c14bdd

Browse files
committed
section vs div
1 parent 7fd6195 commit 7c14bdd

File tree

1 file changed

+68
-1
lines changed

1 file changed

+68
-1
lines changed

README.md

Lines changed: 68 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2148,7 +2148,74 @@ The **lang** attribute specifies the language of the element\'s content.
21482148
<b><a href="#">↥ back to top</a></b>
21492149
</div>
21502150

2151-
#### Q. ***What is the difference between `<section>` and `<div>`?***
2151+
## Q. ***What is the difference between `<section>` and `<div>`?***
2152+
2153+
The `<section>` tag creates independent sections within a webpage having logically connected content. And the `<div>` tag is an empty container specifying a division or a section.
2154+
2155+
**The `<section>` Element**
2156+
2157+
According to the W3C specification, the `<section>` tag means that the content inside this element is grouped. In other words, the content relates to a single theme. It must be an entry in the outline of the page.
2158+
2159+
**Example**
2160+
2161+
```html
2162+
<!DOCTYPE html>
2163+
<html>
2164+
<head>
2165+
<title>Section Tag Example</title>
2166+
</head>
2167+
<body>
2168+
<h1>W3Docs</h1>
2169+
<section>
2170+
<h2>W3Docs Sections</h2>
2171+
<ul>
2172+
<li>Books</li>
2173+
<li>Quizzes</li>
2174+
<li>Snippets</li>
2175+
</ul>
2176+
</section>
2177+
<section>
2178+
<h3>Books</h3>
2179+
<p>Learn HTML</p>
2180+
<p>Learn CSS</p>
2181+
<p>Learn Javascript</p>
2182+
</section>
2183+
</body>
2184+
</html>
2185+
```
2186+
2187+
**The `<div>` Element**
2188+
2189+
The `<div>` element only represents its child elements and doesn\'t have a special meaning. It can be used with the `lang`, `title`, and `class` attributes to add semantics that is common to a group of consecutive elements. This element can also be used in a `<dl>` tag and wrap groups of `<dt>` and `<dd>` elements.
2190+
2191+
**Example**
2192+
2193+
```html
2194+
<!DOCTYPE html>
2195+
<html>
2196+
<head>
2197+
<title>Div Tag Example</title>
2198+
<style>
2199+
div {
2200+
background-color: #87f5b3
2201+
}
2202+
</style>
2203+
</head>
2204+
<body>
2205+
<h1>Example</h1>
2206+
<div>
2207+
<h2>A heading in a <div> tag.</h2>
2208+
<p>Some text in a <div> tag.</p>
2209+
</div>
2210+
<p>Here is some other text in a <p> tag.</p>
2211+
</body>
2212+
</html>
2213+
```
2214+
2215+
<div align="right">
2216+
<b><a href="#">↥ back to top</a></b>
2217+
</div>
2218+
21522219
#### Q. ***Where and why is the rel="noopener" attribute used?***
21532220
#### Q. ***Can a web page contain multiple `<header>` elements? What about `<footer>` elements?***
21542221
#### Q. ***What are Web Workers?***

0 commit comments

Comments
 (0)