Div vs Span - The Difference Guide
HTML

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

by Raaj
written by Raaj

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

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

0 comment
0 FacebookTwitterPinterestEmail
HTML Code Default Template
Tips

Using Visual Studio Code To Create An HTML Template – Super Easy

by NEO
written by NEO

Visual Studio Code is extremely simple to use Source Code Editor by Microsoft. Creating web pages on it is fast. If you are looking for starting your Web Development career and trying to find the best Code Editor then go for Visual Studio Code. It carries an add-on feature to make tasks easy. It has an in-built Live server that lets you test pages on the go. I am going to share more amazing tips and tricks on Visual Studio Code in the coming time. Till then here is how to instantly create an HTML page structure or template using Visual Studio Code.

HTML Structure Tips – VS Code

Launch VS Code and create a New File. You can do this by clicking on File > New file or by pressing Ctrl + N.  Now save the file by pressing Ctrl + S. Name it as “Sample” and from the below tab next to Save as type: select HTML. Save the file, our blank HTML file is ready. Now here is how to instantly add an HTML structure to this file. The structure plays a vital role in coding, without this you cannot code a web page.

<!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″>
    <title>Document</title>
</head>
<body>
</body>
</html>

 

Press ! and hit Enter on the keyboard.  VS Code will give you a default HTML Template where you can start making web pages. Also, it auto-completes and auto-corrects HTML Tags. This is a huge time saver.  Your blank HTML file will look like what is showing above. Under /head tags you can insert the CSS, Meta’s, and Title Tag.

Under /body, you can write down your page’s code and build anything from scratch. This is how you can use VS Code to create a basic HTML template without worrying about major codes. The blank template also holds codes for Mobile Optimization, which auto-adjust the page size on the small screen.

0 comment
0 FacebookTwitterPinterestEmail