Free Online Web Tutorials

HTML Block Level and Inline Elements

by ·

Every HTML element has a default value that is displayed on browsers. The values for most elements are block or inline. Based on these values, all elements can be divided into two categories ─ (1) Block-level Elements and (2) Inline Elements.

Block-level Elements

A block-level element occupies the entire space of its parent element (container). It stretches out to the left and right of its parent element as far as it can.

A block-level element always starts on a new line. The element is block because browsers have a built-in style sheet, that is selector {display: block;}.

A list of block-level elements

  • <div>
  • <h1> – <h6>
  • <p>
  • <ol>, <ul>, <dl>
  • <form>
  • <pre>
  • <blockquote>
  • <address>
  • <hr>

An Example of Block-level Elements

Example Try this Code 
<h1>This is an <h1> element</h1>
<div>This is a <div> element</div>
<p>This is a <p> element</p>
<ul>
   <li>item 1</li>
</ul>
<pre>
Nice to meet you,
... 
</pre>
<blockquote>This is a <blockquote> element</blockquote>

The <div> Element

The <div> element is a block-level element that is often used as a container for text or other HTML elements. Even this element can be used to create webpage layout and designed using CSS. The class, id, and style attributes are common used in this element.

The example below contains a simple web page layout that is designed with CSS. You have to click the “Try this Code” button to see how it looks like.

Example Try this Code 
<div>This example contains a lot of codes...
Of course you have to click on the "Try this Code" button</div>

HTML Inline Elements

An inline element does not start on a new line and only takes as much width as necessary. All inline elements do not contain inline value, even some elements don’t have any built-in style sheet in browsers.

A list of Inline Elements

  • <span>
  • <a>
  • <img>
  • <b>, <strong>
  • <em>, <cite>, <i>
  • <small>
  • <br>
  • <code>
  • <button>
  • <input>, <label>, <select>, <textarea>
  • <abbr>
  • <mark>
  • <sub>, <sup>

An Example of Inline Elements

Example Try this Code 
<p>A text can be wrapped with <span> tag. A link is
made by <a> tag. An alt text is required for an image.
The <b> tag defines bold text and <strong> tag defines
important! text but both are bold. The <em> and <i> tags
both are italic but <em> tag emphasized a text/phrase.
This is a simple <button>Button</button>. Use <mark> tag
to highlight a text. The <input> tag is basically used in form.
Use <code> tag to display a code on a web page.</p>

The <span> Element

The <span> element is an inline element can be used as a container for one or more text. It has no required attributes but style and class are most common.

Sometimes you might need to make a different color or highlight any text inside the content, then you should use this <span> tag including CSS like ─

Example Try this Code 
<p>Using <span> tag, I used red color
for <span style="color: red">this text</span>.</p>

Block-level vs. Inline Elements

  • Block-level elements start on new lines, but inline elements can start anywhere in a line.
  • Block-level elements can contain inline elements and other block-level elements.
  • Block-level elements should not be used into inline elements.
  • Block-level elements create “larger” structures than inline elements.