HTML Archives - Simplifying Web

Div and Span are two HTML elements used to define a section or a line on the web page. Sometimes this can be confusing, in this article I will help you in understanding what are they. Where to use DIV and where exactly to use the SPAN elements. Both have simple roles on a web page and are the most commonly found HTML codes.

What is DIV?

DIV is for making boxes on a web page. Technically they are called BLOCK-LEVEL-ELEMENTS. It means whenever you use a DIV element you will see a BLOCK or a BOX. See the image below. When you use a DIV element it is reflected as a block on a page. DIV is a short form of DIVISION.

What is DIV?

What is SPAN?

Span is to decorate a text or a line, it is a way to add some CSS effects without breaking the line. Using the Span element you can define custom CSS styles to some para, or text. All you have to do is wrap the text with the element and apply CSS codes.

What is Span?

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <style>

        .house {

            background-color: yellowgreen;

            width: 800px;

        }

        .house2{

            background-color: teal;

        }

        .highlight {

            color:brown;

        }

    </style>

    <title>Document</title>

</head>

<body>

    <div class=”house”>

        <p>peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura.peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. peet pe chura. <span class=”highlight”>Gja madarch****d hai.</span></p>

        <a href=”#”>Test Link</a>

    </div>

    <div class=”house2″>

        <h2>Song dedicated to Gja</h2>

        <p>Kaal se pehle wohi tha, <br>

            Kaal ke baad wohi,<br>

            Jaane kitni sadiyon se,<br>

            Le raha wo teri.<br>

            teri teri teri teri<br>

            teri teri teri teri<br>

            g**d main dande re<br>

            teri g**d main dande re<br><br>

            na baans ki bansi,<br>

            na sone ka sariya<br>

            g**d main dande re<br><br>

            g**d main dande re, teri g**d main dande re<br>

            na baans ki bansi,<br>

            na sone ka sariya,<br>

            g**d main dande re</p>

        <a href=”#”>Test Link</a>

    </div>

</body>

</html>

RAAJ

HTML

DIV vs. SPAN Html Elements – What’s the difference?

What is DIV?

What is SPAN?

You can use Visual Studio Code to generate an instant HTML Template. A huge time saver and a cool editor.