The <div> and <span> tags in HTML are used for grouping and styling sections of a webpage. These tags are fundamental for structuring and formatting HTML content.
- The <div> tag is used to create a container for the main content and a separate section for a note.
- Block-level Element: It takes up the full width available and starts on a new line.
- Styling: Commonly used with CSS to style groups of elements.
- The <span> tag is used to highlight specific words within the text.
- Inline Element: It does not start on a new line and only takes up as much width as necessary.
- Styling: Used with CSS to style specific portions of text or inline elements.
<!-- ===================================== -->
<!-- Example Code for <Div> and <Span> Tag -->
<!-- ===================================== -->
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 80%;
margin: 0 auto;
background-color: #f9f9f9;
padding: 20px;
}
.note {
background-color: #ff0;
padding: 10px;
margin: 10px 0;
}
.highlight {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to My Webpage</h1>
<div class="note">
<p>Note: This is an important message.</p>
<p>Make sure to read the
<span class="highlight">highlighted</span> parts carefully.</p>
</div>
<p>It contains information about various topics
and includes multiple <span style="color: blue;">colorful</span>
and <span style="font-style: italic;">styled</span> text.</p>
</div>
</body>
</html>
No comments:
Post a Comment