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>
HTML Inline Elements
Technology is evolving rapidly!
Stay updated with DataFlair on WhatsApp!!
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.
You give me 15 seconds I promise you best tutorials
Please share your happy experience on Google
