0

It is my understanding that the basic HTML5 layout is:

<body>
  <header>
  </header>
   <nav>
   </nav>
   <section id="possible-image-slider">
   </section>
   <section>
    <article>
    </article>
    <aside>
    </aside>
   </section>
 <footer>
 </footer>
</body>

I also know from this that the section element "is NOT a generic container element." It really should only be used when there is an obvious natural heading for the section...

<h1>Image Slider</h1>

HOWEVER

  • That text is unnecessary and silly to appear next to my image slider on the welcome page
  • I don't want to smack a random div in the middle of my neat HTML5 layout

So, I want to use the section element for this.

  • Is it true that this is not correct usage?
  • MORE IMPORTANTLY! Will I lose SEO points for doing this?
Improve this question

2 Answers 2

Reset to default
0

If you only care about SEO, most of this wouldn’t matter for general web search engines (like Google, Bing, DuckDuckGo, etc.). It’s relevant if you care about semantic markup (which can be useful for various consumers and tools).

There is no general answer for this (just like your "basic HTML5 layout" cannot be used like that for many pages).
It depends on what the slider is about, what the previous content is, and what the following content is.

For example, if the image slider gives an introduction about your company on the homepage, the correct place would be the header of the body sectioning root:

<body>
  <header><!-- image slider here --></header>
</body>

If the slider is the main content of the page (e.g., a page titled "Impressions" and the slider contains all the images), it should be in main > article:

<body>
  <header></header>
  <main>
    <article><!-- image slider here --></article>
  </main>
</body>

If the slider is just giving some eye candy, or suggestions for other pages the user might be interested in, aside would be appropriate:

<body>
  <header></header>
  <main>
    <article></article>
  </main>
  <aside><!-- image slider here --></aside>
</body>

And so on.

A good way for deciding if a sectioning element (section, article, nav, aside) should be used, is answering the question: Should it be part of the document’s outline?

If yes, a sectioning element should be used, and unless the content matches the definitions for article/nav/aside, the "fallback" element section is the correct choice.

Improve this answer
0
0

You will not loose any SEO points for not including headings for each section. You will get an HTML validation error though, but that might be fine in some cases. I would probably just use div since it's not less descriptive than section in this case. I would then add each image in the slider as a list item (li), because it's a list of images. I would also look up more info about HTML5 figure element. Maybe that's something one could use? http://html5doctor.com/the-figure-figcaption-elements/

Improve this answer
4
  • Thanks. So are html5 elements purely for organizing content or can we liberally apply styling as well?
    – ma77c
    Nov 4, 2015 at 8:35
  • Not sure if I understand your question. But yes, use HTML to structure the document so it's logical for robots, browsers and screen readers, and use CSS to make it logical for humans :)
    – Tony Gustafsson
    Nov 4, 2015 at 10:02
  • To clarify I mean is it best practice to not put stuff like float:left or border:1px solid #000000 on HTML5 elements. Should I just leave that for the divs?
    – ma77c
    Nov 4, 2015 at 15:50
  • Hm, no you can style all elements. HTML5 elements is no different from any other element. Inline styles were seen as bad practice though because it's a good idea to keep data structure (html) and styling separate. However, this is mostly for the developers well being, and will not implement SEO. Some validators will complain about it though. There are tools out there that put lots of inline styles in HTML - often to increase performance (to load "above the fold" stuff directly without having to wait for the rest of the CSS).
    – Tony Gustafsson
    Nov 5, 2015 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.