Confused by "block" elements and others

Discussion in 'Web Design and Development' started by eclipse, Dec 2, 2008.

  1. eclipse macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #1
    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.)
     
  2. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #2
    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 :D), 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.
     
  3. eclipse thread starter macrumors 6502a

    eclipse

    Joined:
    Nov 18, 2005
    Location:
    Sydney
    #3
    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?
     
  4. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #4
    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,
    HTML:
    <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.

    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.
     
  5. 66217 Guest

    Joined:
    Jan 30, 2006
    #5
    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.:p


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

    Code:
    <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.

    Code:
    <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 -->
     
  6. SrWebDeveloper macrumors 68000

    SrWebDeveloper

    Joined:
    Dec 7, 2007
    Location:
    Alexandria, VA, USA
    #6
    According to the W3C, here is how any HTML element may be displayed:

    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
     
  7. werther macrumors regular

    Joined:
    May 15, 2006
    #7
    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).
     

Share This Page