HTML div and span Tags

<div> tag

The HTML <div> tag is an block level element and it represents a section or content within an HTML document.

The <div> tag enables you to group sections of HTML elements together and format them with CSS.

It can have any types of html emements (table,links, image, div and etc..).

In default this will start a new line.

Syntax

Example 1 - Simple

Try Yourself

Example 2 - HTML elements inside the <div> tag

Try Yourself

Example 3 - Simple usage of <div> tag with css

Try Yourself

Do you feel the above example is difficult? leave it! you will learn css in the future chapter.

Example 4 - Simple usage of <div> tag with javascript

Try Yourself

Do you feel the above example is difficult? leave it! you will learn JavaScript in the future chapter.


<span> tag

The <span> tag is used as a container used to hold different elements.

It can have any type of html elements (table,links, image, div and etc..).

<div> tag create a new line, while <span> tag does not create it.

Example

Try Yourself

Difference between span and div tag

In the following tutorial there are two span tags and both will appear in the same line since it is an inline element, but the div tag will appear in two separate lines since div tag is an block level element.

Example - Difference between span and div tag

Try Yourself