HTML Block & Inline



An HTML file is made of elements.

In HTML every element has a unique view.

There are two display values:

  • block Elements
  • Inline Elements

Block-level Elements

A block-level element always starts with a new line and takes the full width of a web page, from left to right. 

The <div>element is a block-level element.

Example : 

<div>Hello World</div>

Following are the block-level elements in HTML

<address> <article>   <aside> <blockquote> <canvas> <dd> <div> <dl>
<dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header>
<hr> <li> <main> <nav> <noscript> <ol> <output> <p>
<pre> <section> <table> <tfoot> <ul> <video>    

Inline Elements

An inline element does not start on a new line. An Inline Elements take width as per requirement.

This is a <span> element inside a paragraph.


Example :

<span>Hello World</span>

Following are the Inline elements in HTML

     

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

Note: An inline element cannot contain a block-level element!