HTML Block and Inline Elements

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.

html block elements

So let’s see each of these one by one.

Keeping you updated with latest technology trends, Join DataFlair on Telegram

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-

html block elements

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

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-

html inline elements

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 ElementsBlock-level Elements
They contain only data and other inline elements.They may contain data, other block-level elements, and inline elements.
Create smaller structuresCreate 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.