HTML DIV and SPAN Elements

In HTML, the div and span elements that have traditionally been used to structure a page and to format portions of inline content. You need to know how these elements work because you're sure to see them in the HTML for pages that haven't yet been converted to HTML5. In this HTML tutorial, you will learn how to structure the content with div and span elements.

HTML Block Element for Structuring a Web Page

Element	Description
div	Lets you divide a page into divisions that can be formatted and positioned with CSS.
span	Lets you identify text that can be formatted with CSS.

Notes on HTML div and span Elements

Use div tags only when the HTML5 semantic elements don't apply.
Use span tags only when the tags for identifying content don't apply.
Before HTML5, div elements were used to define divisions within the body of a document. Now, the HTML5 semantic elements will be replacing div elements.
Before HTML5, span elements were used to identify portions of text that you could apply to format. Today, a better practice is to use the elements such as, header, section, article, etc. which we will discuss in the later tutorials.

HTML div and span Example

<html lang="en">

<head>
    <style>
        #header {
            background-color: grey;
            color: white;
        }
        
        #main {
            color: blue;
        }
        
        #welcome {
            background-color: red;
            color: white;
        }
        
        #footer {
            background-color: black;
            color: white;
        }
    </style>
</head>

<body>
    <h1>HTML div and span Elements</h1>
    <div id="header">
        <h3>Shatin Town Mall</h3>
    </div>
    <div id="main">
        <p><span id="welcome">Welcome to Shatin Town Mall</span> We have some fascinating stuff for you this season.</p>
    </div>
    <div id="footer">
        <p>&copy; Copyright 2019 Abc Town.</p>
    </div>
</body>

</html>