HTML Block and Inline Elements
Free Web development courses with real-time projects Start Now!!
All elements within an HTML document are displayed as either ‘block-level’ or ‘inline-level.’ Thus, block and inline are the default display options for most of the elements. In this article, we are going to learn about HTML Block elements and HTML inline elements.
So let’s see each of these one by one.
HTML Block Level Elements
HTML block-level elements start on a new line and stretch across the entire width of the web-page wherein they are displayed. An example of the block-element is the <div> element that can act as the container for other HTML documents. The commonly used attributes with it are style, id, and class.
Syntax of block elements in HTML
<div>DataFlair</div>
<!DOCTYPE html>
<html>
<body>
<style>
body {
text-align: center;
}
h1 {
color: blue;
}
</style>
<!-- The Div element. -->
<div style="background-color:black;
color:white;
padding:20px;">
<h1>DataFlair</h1>
<h3>DataFlair is an E-Learning website.</h3>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</div>
</body>
</html>
Output-
Other examples of HTML block-level elements are:
- <address>
- <article>
- <aside>
- <blockquote>
- <canvas>
- <dd>
- <div>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>-<h6>
- <header>
- <hr>
- <li>
- <main>
- <nav>
- <noscript>
- <ol>
- <p>
- <pre>
- <section>
- <table>
- <tfoot>
- <ul>
- <video>
Block-level elements help in providing structure and clarity to the content. These are essential for creating distinct sections of the content which helps the users to read and understand the information provided in an easier manner. By using block elements, one can ensure that the webpages are well-organized and visually appealing.
Block-level elements play a crucial role in responsive design also. They allow greater flexibility in layout management which ensures that the content adapts well to different screen sizes and devices.
HTML Inline Elements
Unlike block-level elements, HTML inline elements do not start on a new line and do not take up the whole width of the web-page; only the necessary width is taken to stretch. The <span> element is the most commonly used inline element.
Syntax of html inline elements
<span>DataFlair</span>
<!DOCTYPE html>
<html>
<body>
<style>
body {
text-align: center;
}
h1 {
color: blue;
}
</style>
<!-- The Span element. -->
<h1>Data<span style="color:green;">Flair</span></h1>
<h3>DataFlair is an E-Learning website.</h3>
<p>We continuously work hard to bring you the best trainers to enable your smooth learning at your home as per your convenience. This is the reason why most of the DataFlair students get placed in top MNCs in Big Data just after the training.</p>
</body>
</html>
Output-
The other inline elements are-
- <a>
- <abbr>
- <acronym>
- <b>
- <bdo>
- <big>
- <br>
- <button>
- <cite>
- <code>
- <dfn>
- <em>
- <i>
- <img>
- <input>
- <kbd>
- <label>
- <map>
- <object>
- <output>
- <q>
- <samp>
- <script>
- <select>
- <small>
- <span>
- <strong>
- <sub>
- <sup>
- <textarea>
- <time>
- <tt>
- <var>
CSS display property can also be used to specify the display of a particular element. It can be set to block or inline.
Difference between Block elements and Inline elements
| Inline Elements | Block-level Elements |
| They contain only data and other inline elements. | They may contain data, other block-level elements, and inline elements. |
| Create smaller structures | Create larger structures |
| They do not begin from a new line. | They begin from a new line. |
Summary
In this article, we’ve looked at the block-level and inline elements of HTML5, which are the default display options for most of the other elements. We’ve discussed the commonly used <div>(block-level) and <span> (inline) element. Examples related to both the display elements have also been mentioned. We have also seen differences between HTML Block elements and HTML Inline elements.
Your opinion matters
Please write your valuable feedback about DataFlair on Google
