Block and Inline Elements

Which HTML Elements are considered “block” elements?

Which HTML Elements are considered “inline” elements?

Debbie

It’ll be our little secret… :wink:

:lol:

Debbie

Nice link!

If anyone wants to post an all-inclusive list of Block and Inline Elements here, feel free!! :slight_smile:

Debbie

Block level elements like <div> <p> take up 100% of the width of their parent element while inline elements like <img> <span> <input> do not necessarily.

A block level element can contain inline elements but not vice-versa.

Some examples of block and inline elements.

Debbie, if you want something that’s useful for a quick reference I actually recommend the Wikipedia article:

It has the body elements broken down into block and inline levels so you can clearly see which fall into which purpose (though you need to remember that CSS can turn elements into a block or inline level entity using the display property). Hope it’s useful (if you wanted something quick and simple). :slight_smile:

Thanks but I think I might have stumbled into the wrong forum :blush: and if Mrs Kalon catches me you could get me in a lot of trouble.

But you’re so much cuter… :wink:

Debbie

I hope so :slight_smile: otherwise it’s :smashy: for me :frowning:

Ha ha.

Well, when your wife Googles you, that response should keep you safe for a while!!!

Debbie

Someone once told me that there are 2 types of women in the world:

1 - the one’s you marry :smiley_vtines:

2 - the one’s you go out with :whip:

Unfortunately, keeping secrets is not my strong suit :unhappy: :wink:

My advice for anyone just starting out is to use this reference:

It’s an older one (like circa 1998 old), but probably the most accurate I’ve ever dealt with since it just takes the specification and turns it into plain english with clear meaningful examples.

Specifically relating to your question:

http://htmlhelp.com/reference/html40/inline.html

In addition to block-level and inline-level, you also have that some elements regardless of their ‘level’ can only contain certain specific other tags.

The organizational list on that page helps a lot – and I really suggest reading every tag’s page and looking at their examples; In particular go to a page like the one for UL’s…

Contents One or more LI elements
Contained in APPLET, BLOCKQUOTE, BODY, BUTTON, CENTER, DD, DEL, DIV, FIELDSET, FORM, IFRAME, INS, LI, MAP, NOFRAMES, NOSCRIPT, OBJECT, TD, TH

Telling you exactly what tags it’s valid to have UL inside, as well as what tags are allowed directly inside it (which in the case of a UL the only direct-child elements allowed are LI). It’s little details like that people screw up on all the time and then wonder why they have cross-browser issues.

– edit – oops, didn’t notice Kalon posted the same site. Here I thought I was the only one recommending that one.

let :google: be your friend

List of block level elements

List of inline elements

Enjoy :slight_smile: