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

ElementDescription
divLets you divide a page into divisions that can be formatted and positioned with CSS.
spanLets 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>

Output

As shown in the featured image of this article.

See also:

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.

Leave a Reply