Night More

Revise Now

Cambridge AS levels

Physics Chemistry Computer Science

Programming and coding

Learn HTML Learn SEO


What do you want
to do?

Contact us Donate Support More Services Send a tweet Social media

more topic chapters

HTML div & Span Tags

Almost all elements are either block or inline elements by default. We will discuss what is a block element and what is a inline element

Block elements

A block element is like a normal block of content. Think it as a container which has a defined shape.

So usually a block element can contain other block elements in it

When you define an block element. It always takes a new line

By default the block element takes the size of the available space (width) and required height

Here are some elements which are by default block elements:

<h1> to <h6> - used to create headings

<p> - used to create paragraphs

<aside> - used to display data aside. Just a container!

<section> - used to hold data aside. Just a container!

<article> - used to hold data . Just a container!

<nav> - used to hold navigational links. Just a container!

<header> - used to hold data and heading. Just a container!

<footer> - used to hold data for the footer. Just a container!

Tags such as aside and section have no real difference except there meaning and purpose is different. They will work in the same way though. These are used to optmise the Google SEO and make the webpage more clear and structured

The <div> element

This is a general block element which could be used to store any form of data(no meaning). The block is a container and it will take the size of the space available. If you want you can define it's size using CSS style


An <aside> tag is used to show that there is no difference between it and the <div> tag

With CSS you could style the div blocks/containers to make them look better

Inline elements

An inline tag is a tag which has no defined shape. It is not a container! It taks the space only required to hold the data. Most elements are block elements. However, by using CSS we can define it as inline. I am doing this just to show you

Also an inline block does not begin on a new line. It continues on the same line if space is available.


As you can see both paragraphs are on the same line. Paragraphs are by default block elements which occupy a new line for each paragraph

The most famous inline tag is the <img> tag which is by default inline

When an object is inline you can't define it's space properly or position it properly. So we usually make the images to block elements by default

Even <a> tags are also inline tags

This is a very important point to rememeber

Warning! An inline element can not contain or hold block elements(there are some exceptions) even though the property of the inlne element is changed to block. Do not experiment with these things it could make results unpredictable

The <span> element

Like for the block element the <div> element is the general block element, the <span> is the general inline tag

<span> elements provide no meaing to the data it holds so it could be used to hold links and even javascript events


If you want some examples for default inline elements. Go to the HTML text formatting chapter

Without CSS, HTML is useless! Don't worry Revise Zone provides the best learning resources and is ranked the 2nd best developer site for coding. Our CSS chapter is coming soon!

Revisezone.com Copyright 2020 Developers & Coding section