Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What is the appropriate HTML 5 element for a hero unit/showcase?

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?

like image 830
deb Avatar asked Jun 18 '12 21:06

deb


People also ask

What is hero element HTML?

A hero image is a website design term used to describe an oversized banner image at the top of a website. Sometimes called a “hero header”, it serves as a user's first glimpse of your company and offering because of its prominent placement towards the top of a webpage that usually extends full-width.

Does hero go in header?

A hero header is the use of a hero image, text and navigation elements on your homepage or at the top of any webpage. Hero headers can be used in a variety of ways – as an image or image with text, image slider, fixed image, or video or animated image.

What is CSS hero?

CSS Hero is the definitive WordPress plugin to easily customize the look of your Themes and Plugins with an easy and intuitive point and click interface. It will allow you to easily change colors, fonts, backgrounds, pretty much whatever on your site.


1 Answers

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.

like image 54
Chris Avatar answered Sep 22 '22 06:09

Chris