Confused by "block" elements and others

[eclipse]

OK, what's the deal?

Remember, I'm just getting my head around the basics of code and the tutorial I just saw sort of confused me on the basics.

A "Block" element should not be placed in another "block"?

What are our blocks and what are our in-line elements?

EG: Can DIV's be in DIV's?

(100 points to anyone who can generate a memorable Dr Seuss poem "DIV's not in Blocks" or whatever.)

 

[angelwatt]

Edit: I didn't fully think things out before posting so my statements here are not 100% true. See my later post.

Blocks can be inside blocks (and can also be stacked to create buildings ), and is very common. Maybe the tutorial you're were following was using their own definition for block in parts.

A Div is a block
A Block can stack
Tutorials may mock
But we got your back
-----
A div in a block
Like a block in a block
Will div your page
So CSS may build your page

Feel free to laugh. Probably not memorable.

 

[eclipse]

OK, 50 points.
Is the header a block?

So, the "body" tag is the "block" of the whole page?

Then, is a paragraph a block? We don't put paragraphs in other paragraphs for example.

Are you saying a DIV is mainly a way to tag a section/ block/whatever for CSS purposes?

 

[angelwatt]

OK, 50 points.
Is the header a block?

So, the "body" tag is the "block" of the whole page?

Then, is a paragraph a block? We don't put paragraphs in other paragraphs for example.

Headers (h1, h2, etc.) are block elements, and a paragraph is a block element (and I guess body is a block element, and the head tag is irrelevant since it's invisible be cause it's implemented as such). A paragraph cannot go inside another paragraph according to the DOCTYPE. And what would it mean anyways (read: semantically)? I didn't consider these non-semantic uses. You also can't put headers inside paragraphs. So not all blocks can be in other blocks. Divs can go in divs though. I generally think of "blocks" as only divs.

So, rethinking about the original question after some new thought, most block elements cannot go inside other block elements except if it's a div (actually, any tag that can go inside the body tag, can go in a div tag). There's also other situations like an li inside a ul or ol, which are all block elements.

Wikipedia shows the block and inline elements.

A side thought, because of the way HTML was defined when you do,

<p>Some text in a paragraph
<p>Some other text inside a paragrpah

The second p starts a new paragraph and ends the first one since it's not required to close paragraphs (though of course you should) so it ignores attempts to place one inside the other.

Are you saying a DIV is mainly a way to tag a section/ block/whatever for CSS purposes?

Yes, pretty much. They can be used to add semantic meaning to the document as well, but mostly it's about dividing a page and making it easier to style things with CSS.

Hopefully I didn't add to your confusion, I didn't fully think out the original question when I posted.

 

[66217]

Then, is a paragraph a block? We don't put paragraphs in other paragraphs for example.

Are you saying a DIV is mainly a way to tag a section/ block/whatever for CSS purposes?

The blocks you should forget,
and to coding you should get,
you may now not know,
but know you will,
and your mind would be as clear as snow.

OK, the last lines were bad.


Really, forget about blocks. Just try and grasp the basics. For example, why would you want to put a paragraph inside a paragraph.

<p> hello <p>hello again</p> </p>

The same goes for <li> and similar code.

As for DIVs, they serve to give different attributes to your code. For example, you can create a main div named CONTENT, and inside that div, you might created another named COPYRIGHT, which would affect only your copyright, but not the rest of the page.

<div id="content>

<div id="side_menu">
<p>text</p>
<li>list</li>
</div> <!-- Div side_menu ends -->

<p>text</p>

</div> <!-- Div content ends -->

 

[SrWebDeveloper]

According to the W3C, here is how any HTML element may be displayed:

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)

Those are the actual core behaviors or the golden rules. Then learn which tags and elements do what. The other various excellent examples and opinions posted above by the helpful members here are REAL WORLD solutions that exemplify the W3C standards being used properly. They based their examples on experience with layouts, various browsers quirks, etc. that you can usually count on. Compliments to all respondents here, this is very useful and interesting. I just wanted to add in the W3C stuff since standards are important to learn too.

-jim

 

[werther]

SrWebDeveloper hit the nail on the head straight from the source.

Essentially all block level element have line breaks before and after. This means that two block level elements like DIVs cannot reside side by side (on the same line) without CSS to force them to. To make a block level element display on the same line you could, for example, 'display:inline' or use float.(I suppose there are always exceptions)

Inline elements are kinda the opposite. They are on the same line (inline).