Hurry! Domain names and web hosting are on sale. Get them while they're cheap! You'll need both of these things to place your website on the internet.

Up to 60% OFF NEW Hosting + $4.99 on Select Domains with Promo Code Spring2017


HTML Span and Div Tags

HTML <span> and <div> tags are used along with CSS (Which will be learned later on).

HTML Div Element

<div> tags or division tags are used to divide sections of the page. They're mainly used for building layouts.

<div>This is a block of content</div>
<div>This is another block of content.</div>

Division elements are considered block elements.

Above <div>This is our div element</div> Below

You will notice with the code above, although everything is on the same line, the content in the division element is on its own line in the browser. The same applies to paragraph and heading elements which, by default, are also block elements.

HTML Span Element

The <span> element is an inline element. This means that unlike the division element, the span will not take it's own line in the document. The span element is used to give meaning to sections of text or code.

This will all be on <span>the same</span> line.

Division and span elements really become useful for layouts when you start applying styles to them with CSS. We'll cover that in later tutorials.

ID's and Class Names

You can give almost any element an ID and / or class name attribute. This will be useful for when we get into CSS and Javascript.

<div id="content-wrap">
    <div class="content">
        First content block
    <div class="content">
        Second Content Block.

Note: An ID should only be used on one element while a class name can be used on multiple elements.

Tutorial Steps

Share This Tutorial

Link To This Tutorial

Tutorial URL


Help Us to Help You

This website and it's tutorials are only made possible with your support. Support money goes towards keeping our servers online.

Link to Us

Spread the word! Let people know about our tutorials by placing links on blogs, websites, forums and other places.


Copyright 2017 Step By Step HTML. All Rights reserved.