xxxxxxxxxx
<span id="span1">
<div>
<h1>Heading</h1>
<p>Paragraph</p>
</div>
</span>
xxxxxxxxxx
The HTML <span> element is a generic inline container for
pieces of content, which does not inherently represent anything.
It is mostly used for grouping and styling bits of content.
<span> is very much like a <div> element, but <div> is a
block-level element whereas a <span> is an inline element.
xxxxxxxxxx
<!--
Span is used to group inline elements.
You can apply specific attributes to the span element
that will only be applied to the content within.
Below is a simple example -->
<p>Black text <span style="color:#ff0000">Red Text </span>Back to Black</p>
xxxxxxxxxx
The <span> tag is an inline container used to mark up a part of a text,
or a part of a document. The <span> tag is easily styled by CSS or manipulated
with JavaScript using the class or id attribute. The <span> tag is much like
the <div> element, but <div> is a block-level element and <span> is an inline
element. :)
xxxxxxxxxx
<!--div and span is use to group or style elements in webpage-->
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<style>
/* CSS styles for div and span elements */
#header {
background-color: blue;
color: white;
padding: 10px;
}
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="header">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</div>
<main>
<section id="about">
<h2>About Us</h2>
<p>Here is the example on how span work as this text is highlighted <span class="highlight">see its highlighted</span> using span with css.</p>
</section>
<section id="services">
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</main>
<footer>
<p>Copyright ©2022 My Website</p>
</footer>
</body>
</html>
xxxxxxxxxx
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
font-size: 25px;
}
</style>
</head>
<body>
<p>
<span style="color: red;">Who doesn't like Rainy days?</span>Rainy days are so awesome! The sound of raindrops and the earthy smell in the air make them really special. It is very important to learn about the importance of rain
</p>
</body>
</html>
xxxxxxxxxx
<body>
<h2>Hello World</h2>
<p>Welcome to <span style="color:red;font-weight:bolder">Scaler Academy</span>.</p>
</body>