<span> elements are a generic HTML element similar to <div>. If you recall, divs are a generic container primarily used for the layout of a webpage and take up as much space as they can because they are a block element.
Spans are an inline element. They only take up as much space as needed and are primarily used for emphasizing something.
Here is a visual representation of each:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Divs vs Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: black;
}
.highlight {
font-style: italic;
display: inline-block;
height: 100px;
width: 75%;
display: flex;
align-items: center;
background:mediumslateblue;
color: ivory;
}
h3 {
text-decoration: underline; }
</style>
</head>
<body>
<h3>Divs</h3>
<div class="div-style">I'm a div</div>
<div class="div-style">I take up as much space as I can</div>
<h3>Spans</h3>
<span class="span-style">I'm a span</span>
<span class="span-style">
I only take up exactly as much space as I need.
</span>
<span class="span-style">I emphasize text a lot.</span>
<div class="div-style">
<span class="span-style">Spans can go inside divs...</span>
<p>... have different styling than other text...</p>
<span class="span-style"
>...and are inline elements that can't have height or width
manipulated unless you set
<span class="highlight">display: inline-block</span></span
>
</div>
</body>
</html>We use classes to group the spans and the divs together to change the color and background color in CSS. Remember height or width on spans cannot be changed unless you add the display: inline-block property.
Here’s what it looks like when they work together:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Divs/Spans</title>
<style>
* {
box-sizing: border-box;
font-size: 1.4rem;
font-family: monospace;
}
.div-style {
background: purple;
color: blanchedalmond;
height: auto;
padding: 20px;
margin: 10px;
}
.span-style {
background: orange;
color: ivory;
}
h3 {
text-decoration: underline;;
}
.nav {
background:goldenrod;
padding: 20px;
}
.headline {
font-weight: bold;
font-size: 1.6rem;
}
.flex-container {
display: flex;
}
.container {
display: flex;
flex-direction: column;"
}
.sidebar-main-container {
background:indianred;
padding: 20px;
}
.sidebar {
background: white;
color: black;
width: 40%;
padding: 20px;
}
.main-container {
width: 60%;
padding: 20px;
background:green;
font-size: 1.2rem;
}
.main-content {
width: 100%;
margin: 10px 0px;
display: flex;
}
.child-container {
width: 50%;
font-size: 1.0rem;
}
.pink {
background: pink;
color: black;
}
.red {
background: red;
}
p{
font-size: 1.2rem;
}
.footer {
text-align: center;
background: cornflowerblue;
}
.footer span {
font-size: .7rem;
}
</style>
</head>
<body>
<h3>Using Divs and Spans Together:</h3>
<div class="div-style container">
<div class="headline">Div 1: Main Overall Container</div>
<div class="nav">
<h2>Div 1a: Header</h2>
<p>Divs can create boxes for web layout</p>
</div>
<div class="sidebar-main-container">
<p>Div 1b: Sidebar-Main Content</p>
<div class="flex-container">
<div class="sidebar">
<span style="font-size: 1.2rem;">Div 1b.1</span>
<span style="font-size: 1.2rem; color: purple;">Sidebar Container</span>
</div>
<div class="main-container">
<span style="font-size: 1.2rem;">Div 1b.2</span>
<span style="font-size: 1.2rem; color: orange;">Main Container</span>
<div class="main-content">
<div class="child-container pink">Child 1 1b.2.1</div>
<div class="child-container red">Child 2 1b.2.2</div>
</div>
</div>
</div>
<div class="footer">
<span>Footer</span>
<span>Container</span>
<span>Goes Here</span>
</div>
</div>
</div>
</body>
</html>Spans and divs work in conjunction with other HTML elements to create the basic building blocks of your website. Spans can be styled separately from your divs to create emphasis.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
