treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Website HTML structure.

  • <!DOYCTYPE html>

    <html lang="en">

    <head>


    </head>

    <body>

    <header>

    <h1>Photography</h1>

    <nav>
    <ul>
    <li><a href="#">Gallery</a></ul>
    <li><a href="#">Bio</a></ul>
    <li><a href="#">Contact</a></ul>
    </ul>
    </nav>

    </header>

    <div id="main-content">

    <section id="view-as">
    View as: <a href="#" id="small">Small</a> | <a href="#" id="medium">Medium</a> | <a href="#" id="large">Large</a>
    </section>


    <section id="gallery-type-display">

    </section>



    </div>

    <footer>
    &Copy;Copyright 2010-2011. All Rights Reserved.
    </footer>

    </body>

    </html>


    http://twitpic.com/6r19v8

    Am i going along the right lines? or what should i change?
  • Looks good to me other than using section for listing a bunch of images.
    Section is not an alternative to the div element.
  • I think the view-as section should be an un-ordered list with anchor tags, I don't see it as a section. To me the section would be more where the div is because it is sectioning the content. So you have a list of buttons and a list of images in multiple columns, but that is just my take on it.
  • The only thing I would change is the section#view-as to a div, or even just a p. A section is used to group related content together, much like a div, but in a more semantic way. In this instance, there really is no grouping (looking at it single font-size chooser, and not a group of links). I also question if this is even needed today as most users are aware of their browsers abilities to zoom or increase font-size.

    I disagree with Chris and Adman, and feel the sectioning of the images is acceptable. Of course, this is purely subjective.
  • I completely looked over the most significant #view-as. I would agree with @wolfcry911
  • so the final Comment for it would be div or section? and list or no list?
  • I think based on his picture a unordered list would fit him better. I could be wrong but I see it as more of a list of options then as a paragraph. This is what I see him going for in regards to layout of the view-as and the images http://razorjack.net/quicksand/.
  • but the
    <section id="gallery-type-display">

    </section>


    is still good right? just because the content is somewhat going to change, like size and all.
  • @attilahajzer - No because you're listing the images. That's not what section is about.

    @Adman - Again, I overlooked that. I think you're right using an unordered list.
  • @attilahajzer if you realllly want to use the section tag you could replace the main-content div with a section :-) , because technically that is a section.
  • I would disagree with that. You're basically stating to use what the div should be and replacing it with section.
  • You are correct, I just did a bit more research with the W3C and basically if you can't put a h1 or some type of header tag inside it, then it can't be classified as a section, so a div should be used.
  • could you get back to my other topic please? im getting super mad.

    i think i would rather re-write a stylesheet for mobile.