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.
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.)
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:
<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
it depends on the content of slider. If it is not important, it should be placed as section.
I place it at header.
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.
I normally structure it like this:
<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.