HTML Block And Inline Elements - DataFlair

Trang chủ » Html Block Elements Display » HTML Block And Inline Elements - DataFlair

Có thể bạn quan tâm

Full Stack 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.

html block 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-

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>

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-

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.

Did you like our efforts? If Yes, please give DataFlair 5 Stars on Google

Từ khóa » Html Block Elements Display