SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Oct 2004
    Location
    Texas
    Posts
    429
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    HTML5: Where do you normally place the banner content? Header area, Section, or..?

    Lets say you have a home page with a banner (slider) right below the logo and nav menu. Do you place that banner in the HEADER area or the SECTION area? I'd like to avoid the vanilla DIV element for semantic purposes.

    In other words, is the BANNER normally considered part of the HEADER?

    Thanks for any clarification.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Theoretically, the <header> element is meant to contain "introductory or navigational aids", which is not really the purpose of a slider, as I see it, although I guess you could argue otherwise. I think of it more as regular content, so I'd put it in a <section> (that is, if I were prepared to use these elements at all, which I'm not, as I consider them to be vague and silly. I would probably use a UL.)

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,733
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    This is why I often say SEMANTICS is about what you MEAN TO SAY, not about tags or placements.




    Before HTML5, I GENERALLY structured a page like this:


    Code:
    <div role="branding">
    <div class="logo"></div>
    <div class="motto">most often a client is too confused to actually develop  some branding  copy and relies instead on sliders (shotgun approach, but ok)  so this worked nicely</div>
    </div>
    <ul role="nav">
    </ul>
    <div role="content">
          <div role="main">
          </div>
          <div role="aside">
          </div>
    </div>
    <div role="foot">
    </div>
    on occasion i used a cephalothorax (as content and foot being metaphorically the abdomen for some reason) which simply meant I put a wrapper around NAV and BRANDING. remember that there is nothing wrong with having the occasion DIV in HTML5

    So it really depend on what the slider is. Think about it this way ... if you were placing a simple motto or mission statement in the same place in the header would you feel such trepidation? So if the slider is just a poor marketing strategy for clients who can decide on an identity and this what they ape putting in place of a mission statement or motto , or list of capabilities.. then it quite reasonable to have the slider in the main header, is it not?

    If the slider is really just a 'portfolio', or functional mini pages .. then it most likely just a SECTION .

    Hope that helps

  4. #4
    SitePoint Member
    Join Date
    Jan 2012
    Location
    Chennai
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    it depends on the content of slider. If it is not important, it should be placed as section.

  5. #5
    SitePoint Member
    Join Date
    Jun 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I place it at header.

  6. #6
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,233
    Mentioned
    47 Post(s)
    Tagged
    1 Thread(s)
    what is
    <div role="branding">?

    No such role exists that I know of. I think unlike classes, you're restricted in your role values.

    Skunker: be aware there is something in HTML called "banner" but that's not what you're talking about, so in case you find articles talking about banners, know this is completely different.

    <header role="banner"> is not uncommon; the "banner" role is usually analogous to the main document <header>: showing as ralph said general site logos and sometimes navigation, which don't change per page. They're used for site orientation and create an easy-to-skip area once users are familiar with the site already. There is only one "banner" role per page, while there can be multiple <header> tags throughout.

    Your banner would not belong in the role="banner" box (or doesn't sound like it), but maybe right under it in a separate div if you want.

  7. #7
    SitePoint Member
    Join Date
    Jun 2013
    Location
    Edmond, WV
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I normally structure it like this:

    Code:
    <header id="banner" role="banner">
    	<div class="logo">
    		<h1><a href="index.php">My Agency Name</a></h1>
    		<span><a href="index.php">my cheesy slogan and opening hours</a></span>
    	</div><!-- logo -->
            <nav id="menu" role="navigation">
                    <h6>Agency Navigation</h6>
            	<address>0770 123 4567</address>
                    <ul>
    		<li class="selected"><a href="index.php">HOME</a></li>
    		<li><a href="gallery.php">GALLERY</a></li>
    		<li><a href="new.php">NEW GIRLS</a></li>
    		<li><a href="about.php">ABOUT US</a></li>
    		<li><a href="blog.php">BLOG</a></li>
    		<li><a href="jobs.php">JOBS</a></li>
    		<li><a href="contact.php">CONTACT US</a></li>
    		<li><a href="links.php">LINKS</a></li>
                </ul>
            </nav>
         </header><!-- header -->
        <div id="content" role="main">
          <section id="slider">
          </section><!-- slider -->
       </div><!-- content -->
    Sometimes I keep it outside the content area, but never inside the header. Hope this helps. Sorry for the weird indentation, it looks like crap.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •