The HTML <div> and <span> tags

CSS

0 Comments

On this page we'll learn about 2 new HTML tags: <div> and <span>. These tags will make it easier to style things in CSS.

Example

<div id="header">
    ...
</div>

<div id="main">
    <h2>Delidded Web Design</h2>

    <p>Welcome to <span class="domain">delidded.com</span>.</p>
</div>

The HTML <div> tag

You can use this tag to group together HTML for a specific section of your page (so that you can style it differently with CSS). Think of div as a generic container.

In the example, one div (Line 1) holds the header at the top of the page and another (Line 5) holds the main content at the bottom of the page. These two sections are styled completely differently, so it makes sense to use divs here to group the related HTML elements. You'll see how div helps with styling in Project 2 of this guide.

The HTML <span> tag (Line 8)

This tag is similar to div. On Line 8, you'll see we wrapped our domain name with a span tag. This will allow us to make the domain bold and color it green. Without the span tag, this would not have been possible.

The difference between span and div is that span is for inline elements (elements that sit next to other elements on the same line) and div is for block elements (elements that sit on their own line). You'll learn more about inline and block later in this tutorial.

Leave a Comment