What is the appropriate HTML 5 element for a hero unit/showcase?
html, semantic-markup
Solution
From HTML5 doctor, where they discuss how to mark up the main content:
An assistive technlogy like a screenreader can find the main content because it is the first thing inside a page that isn't a header, nav or footer.
So I would just wrap your "hero unit" in a `section`. Each related group of content on a page should be grouped in its own `section`, with the first section being the start of the main content.
I would however second @net.uk.sweet's suggestion to frequently use a HTML5 outliner. Also, check out the HTML outlining article on the Mozilla Developers Network, it was really helpful for me.
Problem
A lot of marketing and content-heavy sites showcase the page's primary content using large text and/or images, sometimes with a slider, containing a call to action for signing up for a service, or downloading an app, etc.. I'm not sure what this design element is called, I got the term hero unit from twitter bootstrap: http://twitter.github.com/bootstrap/components.html#typography I think most of you know what I'm trying to describe... If it's not clear I can add screenshots or links to this question. I looked at a few different sites, and some put this hero unit inside a `ASIDE` element, others use `SECTION`, `ARTICLE` and even `HEADER`. Using twitter bootstrap as an example again: ``` <header class="jumbotron masthead"> <div class="inner"> <h1>Bootstrap, from Twitter</h1> <p>Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.</p> <p class="download-info"> ``` Is `HEADER` the most appropriate tag for this type of content? Or should I use `ASIDE`, `ARTICLE` or `SECTION`?