Depending on the kind of element, every HTML element has a default display value. Block and inline are the two display options.
A block-level element always starts on a new line, and browsers add some space (a margin) before and after it.
A block-level element always occupies the entire available width (stretches out to the left and right as far as it can).
<p> and <div> are two regularly used block elements.
In an HTML page, the <p> element defines a paragraph.
In an HTML document, the <div> element establishes a divide or segment.
| <address> | <article> | <aside> | <blockquote> | <canvas> | <dd> |
| <div> | <dl> | <dt> | <fieldset> | <figcaption> | <figure> |
| <footer> | <form> | <h1>-<h6> | <header> | <hr> | <li> |
A new line is not created when an inline element is added. An inline element uses only as much space as is required.
| <a> | <br> | <i> | <small> | <time> | <img> |
| <button> | <span> | <strong> | <input> | <b> | <sub> |
| <label> | <script> | <textarea> |
The <div> element is frequently used to hold additional HTML elements.
Although there are no required attributes for the <div> element, it is typical to use style, class, and id.
The <div> element can be used to style content blocks when combined with CSS:
Example :
<div style="background-color:black;color:white;padding:20px;">
<h2>Delhi</h2>
<p>Delhi is the capital city of India. It is the most populous city in the India, with a metropolitan area of over 9 million inhabitants.</p>
</div>
The <span> element is an inline container that can be used to mark up a section of text or a document.
There are no required characteristics for the <span> element, however style, class, and id are popular.
The <span> element can be used to style sections of the text when used with CSS:
Example:
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>