The difference between Block and Inline HTML elements

I “kind of” knew what block elements were but I thought that I should research them. Searching the net I think I have found some good definitions. Basically there are 3 types of elements you can have on a page.

1. Block
2. Inline
3. Not Displayed

Block Elements

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

To define an element as a block you can do it in CSS by typing:

display:block;
 
Common HTML elements that are naturally block-display include: 

<div>
<h1> … <h6>
<p>
<ul>, <ol>, <dl>
<li>, <dt>, <dd>
<table>
<blockquote>
<pre>
<form>

Inline Elements
Inline-display elements don’t break the flow. They just fit in with the flow of the document. 
To define an element as an inline you can do it in CSS by typing:
display:inline;
 
More elements are naturally inline-style, including: 

<span>
<a>
<strong>
<b>
<em>
<i>
<img />
<br>
<input>
<abbr>
<acronym>

Can you imagine a “<a>” tag being a BLOCK element? I can’t. That would suck if all links had to be on a new line all by themselves!
Not Displayed
Some tags, like <meta /> and <style> are not visible
Share this:
Tweet