Learn HTML

Learn to code and become a Front End Web Developer.

Campsite Coders Bootcamp Coding Adventure

HTML Div & Span Elements

On this page, we're going to unravel the secrets of two versatile and foundational HTML tags: the <div> and <span>. These unassuming tags might not seem flashy, but they are the unsung heroes of structured content on the web. If you're eager to understand how these tags work, when to use them, and how they can elevate your web design, you're in the right place. Here we will explore the <div> and <span> tags, their roles, and the art of using them effectively in your HTML.

Basically, there are two tags that you can use to wrap around text when you are working with positioning elements on a page or styling a specific piece of content. The HTML div tag is known as a "block" element which means that by default, nothing will be beside it (unless CSS definitions correct this). The html span tag is an in-line tag and can be used inside of a div tag or outside of a div tag depending on what you are trying to accomplish.

You can think of a div tag as a tent with two different rooms. Then think of the span tag as people in the tent. You can have 4 people inside of each of the rooms in this tent - a total of 8 people. Or you could put 5 people in one room and 3 people in the other room and that is fine. But you can't put the tent inside of the people - just like you can't put a div tag inside of a span tag. Got it?

camping tent divided into two rooms

HTML Div Elements

The <div> tag is a block-level container. It's like an empty box or a container that can hold other elements, text, or even nested <div> elements. Its primary function is to group and structure content, providing a logical division in your webpage. The <div> tag is a fundamental building block for creating layouts and organizing content into sections.

<div>

<h1>Welcome to Our Website</h1>

<p>We're here to provide you with valuable information and insights.</p>

</div>

In this example, the <div> element acts as a container for the page's main content. It groups the heading and the introductory paragraph together.

You can bring in cascading style sheets by linking to them in the head section of your html web page. If the stylesheet exists in your project folder then you can simply add a link to the file starting with the folder name and then file name. If you are linking to an external stylesheet hosted on another website then you must include the https:// path to the stylesheet. Be sure to use rel="stylesheet" or your styles will not work. You then add the link to the external file in the value of the href property. The link tag is a self closing tag so you don't have to include it at the end of it. Some web developers add / > to the end of the line of code for the link but it will work with or without it.

html div tags
results of html div code

HTML Span Elements

On the other hand, the <span> tag is an inline styling element. Unlike the <div>, it doesn't create a block-level container but instead targets specific portions of text or inline elements. The primary role of the <span> tag is to apply styles or scripting to specific parts of text within a block-level container.

<p>Welcome to our <span style="color: blue; font-weight: bold;">website</span>. We're here to provide you with valuable information.</p>

In this snippet, the <span> tag is used to apply specific styling to the word "website" within the paragraph.

The HTML span tag is an in-line container. These are often used inside of a paragraph tag when you want to add styles to only a piece of content contained within the paragraph. You will learn more about this technique when you study HTML paragraphs.

html span element
result of html span element

When to Use the <div> Tag

The <div> tag shines when you need to create structured layouts, group related elements, or define clear sections within your webpage. Here are some common scenarios for using the <div> tag:

Layout Structure: Use <div> to define header, footer, navigation, and content sections of your webpage.

<div id="header">Header Content</div>

<div id="nav">Navigation Links</div>

<div id="content">Main Content</div>

<div id="footer">Footer Information</div>


Grouping Content: Group related elements together to apply styling or scripting to them collectively.

<div class="quote">

<p>"Web development is an art and a science."</p>

<cite>- John Doe</cite>

</div>


Styling Blocks: Apply CSS styles to <div> elements to create consistent visual effects across your webpage.

<style>

.alert {

background-color: yellow;

border: 1px solid orange;

padding: 10px;

}

</style>

<div class="alert">This is an important message.</div>

When to Use the <span> Tag

The <span> tag, as an inline styling element, is your go-to choice for applying styles or scripts to specific portions of text within a block-level container. Here are some scenarios where the <span> tag proves handy:


Text Styling: Apply specific text styling, like color, font size, or weight, to a portion of a sentence or a paragraph.

<p>Our product is available in <span style="color: green; font-weight: bold;">green</span> and blue colors.</p>


Text Styling: Apply specific text styling, like color, font size, or weight, to a portion of a sentence or a paragraph.

<p>Our product is available in <span style="color: green; font-weight: bold;">green</span> and blue colors.</p>


Scripting Effects: Use <span> to target and manipulate specific text or inline elements with JavaScript.

<p>Click <span style="cursor: pointer;" onclick="showDetails();">here</span> to see more information.</p>


Content Highlighting: Apply a background color or other visual effects to highlight specific words or phrases.

<p>We offer the best <span style="background-color: yellow;">deals</span> in town.</p>

Best Practices for Using <div> and <span> Tags

To maximize the benefits of <div> and <span> tags, consider these best practices:

Use <div> for Structured Layout: When creating a structured layout or defining clear sections on your webpage, use <div> elements to maintain an organized structure

.Apply Specific Styling with <span>: Use <span> to apply specific styling or scripting to text or inline elements within a block-level container.

Limit Inline Styles: Minimize the use of inline styles, and instead, apply styles using external CSS whenever possible. It promotes consistency and maintainability.

Optimize for Accessibility: Ensure that your use of these tags does not hinder accessibility. Use them thoughtfully and follow accessibility guidelines to accommodate users with disabilities.

HTML <div> and <span> tags are the unsung heroes of web development, serving as versatile tools for creating structured layouts, grouping content, and applying specific styling or scripts to text. Understanding when and how to use these tags is crucial for building well-organized and visually appealing web pages. Whether you're crafting layouts with <div> or adding finesse with <span>, these tags are at the heart of structured, functional, and stylish web content. Keep exploring, keep coding, and keep harnessing the power of the <div> and <span> tags to create exceptional web experiences. Your web development journey is on the right track!


Now you know the difference between DIV and SPAN! You can put a span tag element inside of a div but you cannot put a div tag element inside of a span.

At this point, you should have a good understanding of when to use a div tag element and when to use a span tag element. It's now time to learn about creating header tags for your content.

Campsite Coders Bootcamp Coding Adventure
Road Map for Coding Adventure One

Campsite Coders

56747 Ewing Rd

Moffat, CO 81143

720-515-1124

Campsite Coders logo in footer

Copyright 2023 . All rights reserved