Grouping Text
explain.html
explain.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explain div and span</title>
</head>
<body>
<!--
<div> = Block-level container
--------------------------------
- Used to group large sections of content
- Always starts on a new line
- Automatically takes full width of the page
- Commonly used for layout, wrappers, boxes, and components
- Does NOT add semantic meaning (generic container)
-->
<div style="border: 2px solid #4a90e2; padding: 10px; margin-bottom: 20px;">
This is an example of a <div> element (block-level).
</div>
<!--
<span> = Inline container
---------------------------
- Used to wrap small pieces of text inside a line
- Does NOT start a new line
- Takes only as much width as needed
- Often used for styling individual words or phrases
- Also does NOT add semantic meaning (generic container)
-->
<p>
This is a sentence with a
<span style="background: yellow;">highlighted word using <span></span>
inside it.
</p>
</body>
</html>
explain.html
explain.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explain div and span</title>
</head>
<body>
<!--
<div> = Block-level container
--------------------------------
- Used to group large sections of content
- Always starts on a new line
- Automatically takes full width of the page
- Commonly used for layout, wrappers, boxes, and components
- Does NOT add semantic meaning (generic container)
-->
<div style="border: 2px solid #4a90e2; padding: 10px; margin-bottom: 20px;">
This is an example of a <div> element (block-level).
</div>
<!--
<span> = Inline container
---------------------------
- Used to wrap small pieces of text inside a line
- Does NOT start a new line
- Takes only as much width as needed
- Often used for styling individual words or phrases
- Also does NOT add semantic meaning (generic container)
-->
<p>
This is a sentence with a
<span style="background: yellow;">highlighted word using <span></span>
inside it.
</p>
</body>
</html>