HTML elements can be displayed either in block
or inline style.
The difference between these is one of the most basic things you need
to know in order to use CSS effectively.
The 3 ways that HTML elements can be
All HTML elements are naturally
displayed in one of the following ways:
Takes up the full width available,
with a new line before and after (display:block;)
Takes up only as much width as it
needs, and does not force new lines (display:inline;)
Some tags, like <meta
/> and <style> are not visible (display:none;)
<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.
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:
Your general-purpose box
Lists (unordered, ordered and
List items, definition list terms,
and definition list definitions
Like an indented paragraph, meant
for quoting passages of text
Indicates a block of preformatted
An input form
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
Your all-purpose inline element
Anchor, used for links (and also to
mark specific targets on a page for direct linking)
Used to make your content strong,
displayed as bold in most browsers, replaces the narrower
<b> (bold) tag
Adds emphasis, but less strong than
<strong>. Usually displayed as italic text, and replaces
the old <i> (italic) tag
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.
Form input fields like
Indicates an abbr. (hover to see how it
Working much like the abbreviation,
but used for things like this TLA.
You change the display property of
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
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,
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