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
?
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With