The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:

Block

Takes up the full width available, with a new line before and after (display:block; )

Inline

Takes up only as much width as it needs, and does not force new lines (display:inline; )

Not displayed

Some tags, like <meta /> and <style> are not visible (display:none; )

Block example

<p> tags and <div> tags are naturally displayed block-style.

(I say "naturally" because you can override the display style by setting the CSS display property e.g. display:inline; .)

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.

Here I've started a paragraph and now I'm going to insert a <div>

new div inside my paragraph

and then continue the text here...

 

See how the <div> jumped in and took over the full width of the space?

Common HTML elements that are naturally block-display include:

<div>

Your general-purpose box

<h1> ... <h6>

All headings

<p>

Paragraph

<ul>, <ol>, <dl>

Lists (unordered, ordered and definition)

<li>, <dt>, <dd>

List items, definition list terms, and definition list definitions

<table>

Tables

<blockquote>

Like an indented paragraph, meant for quoting passages of text

<pre>

Indicates a block of preformatted code

<form>

An input form

Inline example

Inline-display elements don't break the flow. They just fit in with the flow of the document.

So here I've got a paragraph going on, and I'm going to add a <span> tag that has a yellow background and italic text . See how it just fits right in with the flow of the text?

More elements are naturally inline-style, including:

<span>

Your all-purpose inline element

<a>

Anchor, used for links (and also to mark specific targets on a page for direct linking)

<strong>

Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag

<em>

Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag

<img />

Image

<br>

The line-break is an odd case, as it's an inline element that forces a new line. However, as the text carries on on the next line, it's not a block-level element.

<input>

Form input fields like and

<abbr>

Indicates an abbr. (hover to see how it works)

<acronym>

Working much like the abbreviation, but used for things like this TLA .

You change the display property of any elements

Although each HTML element has its natural display style, you can over-ride these in CSS.

This can be very useful when you want your page to look a particular way while using semantically-correct HTML.

Examples

Say you want to provide a list of items, but you don't want a big bulleted list. You just want to say that you're going to the store to buy:

• some fizzy drinks,
• a chainsaw,
• and some nylon stockings.

 

Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a <ul> .

Here's the code

 

<ul>

<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact us</a></li>

</ul>

 

Here's how it looks as a normal list

• Home
• About us
• Products
• FAQs
• Contact us

Just adding the class "toolbar"...

 

<style type="text/css">

.toolbar li {

display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;

}

</style>

<ul class="toolbar">

<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Contact us</a></li>

</ul>

 

Here's how it looks with the CSS styles applied

• Home
• About us
• Products
• FAQs
• Contact us