Difference Between div tag and span tag

Properties	Div Tag	Span Tag
Elements Types	Block-Level	Inline
Space/Width	Contain Whole Width Available	Takes only required Width
Examples	Headings, Paragraph, form	Attribute, image
Uses	Web-layout	container for some text
Attributes	Not required,with common css, class	Not required,with common css, class

The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.

Example:

This example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element.

html

<!DOCTYPE html>
<html>

<head>
    <title>gfg</title>
    <style type=text/css>
        p {
            background-color: gray;
            margin: 10px;
        }


        div {
            color: white;
            background-color: 009900;
            margin: 2px;
            font-size: 25px;
        }

        span {
            color: black;
            background-color: gray;
            margin: 5px;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <!-- below some div tags -->

    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>

    <!-- below some span tags -->
    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>
</body>

</html>

Output:

HTML Div Tag Example Output

HTML Div Tag

The HTML <div> tag defines sections in HTML documents, serving as containers styled with CSS or controlled with JavaScript. It’s easily customized using class or id attributes and can contain various content.

Note: Browsers add line breaks before and after <div> elements by default.

Difference Between div tag and span tag

Example:

HTML Div Tag

Similar Reads