Divs and spans

Web Design with HTML & CSS

🕑 This lesson will take about 15 minutes

A div is a section or a ‘division’ in a web page. A div can be thought of as a block. Divs can be used to organise a web page into different sections such as headers, navigation bars, columns and rows, and footers.

On the other hand, a span is used to group inline elements in an HTML web page. For example, a span could be used to change the style of just a few words from a paragraph or heading.

The div and span tags are made for CSS. Divs and spans are unnoticed and do not change the way a page displays until you use CSS to apply styles to them. If a div or span exists in a HTML document but no style is applied to it in a CSS style sheet, then the appearance of the web page will not change.

In the example below, there is a div with a dark green border and light green background. The div contains a line of text and some of that text is within a span that has a red border and a light blue background. This means the text in the div can have a specific style (eg. green background and border), while text inside the span (which is inside the div) can have another style (eg. light blue background and red border).

The video below shows how to add divs and spans to a web page. It also shows how to change the border, background colour, width and height of a div; and how to change the text colour, background colour and text-decoration inside span tags. Scroll further down to see the sample code.

The HTML code below shows how to add divs and spans. Note that the HTML code references an external CSS style sheet. Make sure you make a CSS file and give it the same name as the reference in the HTML file. The CSS file in this example is called theme.css.

Here is the HTML and CSS code:

You can also use the following CSS code if you want to place the div in a specific position on the page using position: absolute and specifying values for top and left:

div{
    border: 2px solid green;
    background-color: lightyellow;
    padding: 50px;
    width: 20%;
    height: 200px;
    position: absolute;
    top: 50;
    left: 20;
}
span{
    color: blue;
    background-color:lightblue;
    font-family: Arial;
}