HTML role attributes

Introduced as part of XHTML, they mark the functionality or orientation of a give content. Used by WAI-ARIA capable screen readers to deduct content from the page. Example:

<div role=”banner”>This is my banner</div>

This is supposed to be more semantic than <div class=”banner”>

There are a bunch of roles that can be used (you can’t make them up):

banner
This is a region that contains the prime heading or internal title of a page. Most of the content of a banner is site-oriented, rather than being page-specific. Site-oriented content typically includes elements such as the logo of the site sponsor, the main heading for the page, and the site-specific search tool. This typically appears at the top of the page, spanning the full width.

complementary
This is any section of the document that supports but is separable from the main content, yet is semantically meaningful on its own even when separated. There are various types of content that conform to this role. For example, take the case of a portal—this may include but not be limited to show times, current weather, related articles, or stocks to watch. The content should be relevant to the main content; if it is completely separable, a more general role should be favored.

contentinfo
This is meta information about the content on the page, or the page as a whole. For example, footnotes, copyrights, links to privacy statements, and suchlike would belong here.

main
As the name suggests, this is the main content in a document. It marks the content that is directly related to or expands upon the central topic of the page.

navigation
This refers to the collection of links suitable for use when navigating the document or related documents.

note
This denotes content parenthetic or ancillary to the main content of the resource.

search
The search tool of a web document, this is typically a form used to submit search requests about the site or to a more general internet search service.

A quick glance at these values shows considerable overlap between many of the new HTML5 elements; the banner role and header element, complementary role and aside element, navigation role and nav element, all seem very closely related. Indeed, the complementary and note roles in combination cover the purpose of the aside element. We saw that the aside element has been stretched to include two quite different purposes; arguably having two separate roles (or elements, in HTML5 ) would make more sense.

The main role also arguably provides a purpose for which HTML5 does not have an element—the main content block of a page.

Now, unlike with class or id, you can’t simply invent your own role values. It is possible to define your own role values formally, though in most instances this will be of no practical value as browsers and other software won’t have any idea of what to do with it, and in any case it’s beyond the scope of this course. However, as you might have guessed, ARIA defines a number of additional values in addition to the standard role values defined in XHTML 1.1. ARIA roles can be quite complex, so let’s focus on some of the most immediately useful ones. Note also that simply adding a role value to an element (for example, role="button" to a span element) doesn’t make that element a button. Rather, role is for describing the purpose for which you are using the element. It’s up to the developer to make the span behave like a button.

ARIA defines several types of role, among these widget roles (we saw earlier that a widget is what ARIA calls controls), landmark roles (regions of the page intended as navigational landmarks) and document structure roles (structures that organize content in a page). Next up, let’s run through a quick overview of the most common ARIA roles.

Widget Roles

Widget roles include:

  • alert
  • alertdialog
  • checkbox
  • combobox
  • dialog
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • progressbar
  • radio
  • scrollbar
  • slider
  • spinbutton
  • status
  • tab
  • tabpanel
  • textbox
  • timer
  • tooltip
  • treeitem

Landmark Roles

Landmark roles include:

  • banner
  • complementary
  • contentinfo
  • main
  • navigation
  • search

Document Structure Roles

Document structure roles include:

  • article
  • group
  • heading
  • list
  • listitem
  • note
  • presentation
  • separator

Optimizing for mobile screens

Include the following meta tag:
<!– Mobile viewport optimized: j.mp/bplateviewport –>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Another variation of this is:
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
Note that only Safari understands this meta tag. In other browsers this will be ignored.

Other small details:
Turn off telephone auto link:
<meta name=”format-detection” content=”telephone=no”>
Turn off autocorrect:
<input autocorrect=”off” autocomplete=”off” autocapitalize=”off”>

HTML5 template

HTML coding in general:

1) Divide semantic or meaningful parts of your website in containers. Everything must have a container as a logical section.

2) Use your containers (divs, or see HTML5 below for other tags) to apply padding, and margin separation between sections. Also, use them for borders and drop shadow effects.

HTML5 specific:

1)The hgroup surrounds header elements (say, the h1 and any other h2 or h3s underneath it) and when a outline algorithm hits the page, it just shows the h1 element of it. Each hgroup can contain an h1, so in theory, if you are using hgroups, it should be “ok” to have several h1’s in your page. Note: this element has been removed from the HTML5! Browsers will probably regard it as an unknown element, but most likely it won’t validate.

2) Notice how the bottom navigation links are not marked with the <nav> tag, this is explicitly recommended in the HTML draft document, leaving <nav> for more important parts of the document, and making <footer> sufficient enough to tell these are just generic links.

3) <main> is the newest addition to the html5 family. It basically encompass your main content, so you avoid doing stuff like <div class=”main”> or <div id=”main”>. Not a lot of browser support as of 2/16/2013, but you can just add a temp CSS patch to make sure it works as expected:

main{

display: block;

}

4) <section> is a related group of content in a document, the <div> tag was used before to enclose this, but section is more generic, and it can contain sections within sections. If you just want to style a group of HTML elements, don’t use a section (which is more like a sub-part of an article), but throw a div in the mix instead.

5) <article> is a piece of the document that can be used as a standalone piece of content, reusable if taken independently from the page content. If you can put that piece as a blob in an RSS feed, it is a good candidate for an article, if in doubt, make it a section. Articles usually contain several sections, not the other way around.

6) <aside> is for a piece of content that relates to the page content (or to the page article) tangentially.

7) Published <time datetime="2010-06-15T11:00" pubdate>June 15 2010</time> is used to mark up dates and times. The datetime part is machine readable, the pubdate, if there, signifies this article's (or whatever is this contained in) publication date.

8)<figure> is used to encapsulate images and captions. It usually contains a <figcaption> tag, which describes what the <figure> image is about

9) <mark> used to highlight content

10) The attribute “role” is used to mark what kind of content the specific DOM element has. For example:

<nav role=”navigation”>
<ul> <li><a href=”#”>Why?</a></li>
<li><a href=”#”>Synopsis</a></li>
</ul>
</nav>

This will be used to indicate that the

Here are other roles and their description:

– application: This role is used to specify a region used for a web application.
– banner: This role is used to specify a sitewide (rather than document specific) area. The header and logo of a site, for example.
– complementary: This role is used to specify an area complementary to the main section of a page.
– contentinfo: This role should be used for information about the main content. For example, to display copyright information at the footer of a page.
– form: You guessed it, a form! However, note that if the form in question is a search form, use the search role, instead.
– main: This role is used to specify the main content of the page.
– navigation: This role is used to specify navigation links for the current document or related documents.search: This role is used to define an area that performs a search.

EXAMPLE OF A PAGE WRITTEN IN HTML%:

<!doctype html>
<head>
<meta charset=”utf-8″>
<!– Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess –>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<title></title>
<meta name=”description” content=””>
<meta name=”author” content=””>
</head>
<body>
<header>
<hgroup>
<h1>Web Directions USA</h1>
<h2>The Web Industry Conference</h2>
</hgroup>
<p>September 21-25</p>
<p>Midtown Atlanta</p>
<p>Register before August 15 and save $100!</p>
<nav>
<ul>
<li>Skip to the content</li>
<li>Home</li>
<li>Program</li>
<li>Workshops</li>
<li>Sponsor</li>
<li>Expo</li>
<li>Venue</li>
<li>Pricing</li>
<li>Contact</li>
<li>Register now!</li>
</ul>
</nav>
<nav>
<ul>
<li>Design Track</li>
<li>Development Track</li>
<li>Keynotes</li>
<li>Networking</li>
<li>Speakers</li>
</ul>
</nav>
</header>
<section>
<h2>Design Track</h2>
<p>Dan Rubin gets creative with CSS3 and HTML5; Juliette Melton runs effective remote research; Aaron Walter gets all emotional about design; Esther Derby introduces agile to UI; Ryan Freitas balances data-driven and genius design; Zoe Mickley Gillenwater streamlines sites with CSS3 and Jason Cranford Teague celebrates the year of web typography.</p>
<p>Agile Meets UI</p>
</section>
<article>
<hgroup>
<header><h2>HOW TO INCORPORATE UI & UX INTO AN AGILE PROCESS</h2></header>
<figure>
<img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”>
<figcaption>Presenter: Stephanie (Sullivan) Rewis </figcaption>
</figure>
</hgroup>
Agile teams work in short iterations and deliver working software that means coded, tested, documented, and if the customer decides the time is right, ready to go out the door. Teams work on features in tiny slices based on prioritized user stories, avoiding big up front design. But without a design phase, where does UX and UI fit?
Esther will share strategies for evolving UI design as the software grows, keeping UI designers in the loop and helping everyone on the team be a better designer (cause they think already are).
Learning to Love Humans: Emotional Interface Design
</article>
<article>
<hgroup>
<header><h2>BOW DOWN TO THE MACHINE NO LONGER!</h2></header>
<figure>
<img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”>
<figcaption>Presenter: Aarron Walter</figcaption>
</figure>
</hgroup>
Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand.
In this talk, Aarron Walter will introduce you to the emotional usability principle a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.
Creativity, Design and Interaction with HTML5 and CSS3
</article>
<section>
SEARCH
</section>
<section>
LOEWS ATLANTA HOTEL
Special offer: stay at the conference venue for just $179 per night  that’s $100 off!
</section>
<section>
STAY IN TOUCH
Twitter: @webdirections
See what all the speakers have to say on Twitter
Track the latest Web Directions news (RSS)
</section>
<section>
DOWNLOAD OUR ONE-PAGER
Need to convince the person who writes the checks? Grab our ready to print one-pager.
</section>
<section>
FROM OUR ATTENDEES
One of the best organised and most informative conferences in the digital arena I’ve been to.
PAUL MCCARTHY, NSW DEPT OF COMMERCE
</section>
<section>
BROUGHT TO YOU BY
OUR EXHIBITORS
OUR SPONSORS
CHAMPIONS
OUR COMMUNITY PARTNERS
<section>
<footer>
<h3>ABOUT WEB DIRECTIONS</h3>
Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and  Read more
<h3>SIGNUP TO THE NEWSLETTER</h3>
Drop in your email address and stay up to date with the latest.
Name:
Email:
<h3>SUBSCRIBE</h3>
<p>Web Directions Pty Ltd. ABN: 20 118 802 118. All rights reserved.</p>
News Feed (RSS) | Podcast | Terms and Conditions | Privacy Policy
</footer>
</body>
</html>

<!doctype html>
<head>  <meta charset=”utf-8″>  <!– Always force latest IE rendering engine (even in intranet) & Chrome Frame          Remove this if you use the .htaccess –>    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>       <title></title>    <meta name=”description” content=””>    <meta name=”author” content=””>

</head>
<body>
<header>
<hgroup><h1>Web Directions USA</h1>
<h2>The Web Industry Conference</h2></hgroup>
<p>September 21-25</p>
<p>Midtown Atlanta</p>
<p>Register before August 15 and save $100!</p>
<nav> <ul> <li>Skip to the content</li> <li>Home</li> <li>Program</li> <li>Workshops</li> <li>Sponsor</li> <li>Expo</li> <li>Venue</li> <li>Pricing</li> <li>Contact</li> <li>Register now!</li> </ul> </nav> <nav> <ul> <li>Design Track</li> <li>Development Track</li> <li>Keynotes</li> <li>Networking</li> <li>Speakers</li> </ul> </nav></header>
<section><h2>Design Track</h2>
<p>Dan Rubin gets creative with CSS3 and HTML5; Juliette Melton runs effective remote research; Aaron Walter gets all emotional about design; Esther Derby introduces agile to UI; Ryan Freitas balances data-driven and genius design; Zoe Mickley Gillenwater streamlines sites with CSS3 and Jason Cranford Teague celebrates the year of web typography.</p><p>Agile Meets UI</p></section>
<article><hgroup><header><h2>HOW TO INCORPORATE UI & UX INTO AN AGILE PROCESS</h2></header><figure>    <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”>    <figcaption>Presenter: Stephanie (Sullivan) Rewis </figcaption></figure></hgroup>Agile teams work in short iterations and deliver working software that means coded, tested, documented, and if the customer decides the time is right, ready to go out the door. Teams work on features in tiny slices based on prioritized user stories, avoiding big up front design. But without a design phase, where does UX and UI fit?Esther will share strategies for evolving UI design as the software grows, keeping UI designers in the loop and helping everyone on the team be a better designer (cause they think already are).Learning to Love Humans: Emotional Interface Design</article><article><hgroup><header><h2>BOW DOWN TO THE MACHINE NO LONGER!</h2></header><figure>    <img src=”/speaker_s_sullivan.png” alt=”Headshot of Stephanie (Sullivan) Rewis”>    <figcaption>Presenter: Aarron Walter</figcaption></figure></hgroup>Humans, though cute and cuddly, are not without their flaws, which makes designing for them a challenge. By understanding how the wet, mushy processor works in these hairy little devils, you can design interfaces and web experiences that will have them hopelessly devoted to your brand.In this talk, Aarron Walter will introduce you to the emotional usability principle a design axiom that identifies a strong connection between human emotion and perceived usability. Through real-world examples, you’ll learn practical interface design techniques that will make your websites and applications more engaging to the humans they serve.Creativity, Design and Interaction with HTML5 and CSS3</article>
<section>SEARCH</section>
<section>LOEWS ATLANTA HOTELSpecial offer: stay at the conference venue for just $179 per night  that’s $100 off!</section>
<section>STAY IN TOUCH Twitter: @webdirections See what all the speakers have to say on Twitter Track the latest Web Directions news (RSS)</section> <section>DOWNLOAD OUR ONE-PAGERNeed to convince the person who writes the checks? Grab our ready to print one-pager.</section>
<section>FROM OUR ATTENDEES One of the best organised and most informative conferences in the digital arena I’ve been to.PAUL MCCARTHY, NSW DEPT OF COMMERCE</section>
<section> BROUGHT TO YOU BY
OUR EXHIBITORS OUR SPONSORS CHAMPIONS OUR COMMUNITY PARTNERS<section> <footer> <h3>ABOUT WEB DIRECTIONS</h3> Founded in Australia in 2004, by long time web industry figures Maxine Sherrin and John Allsopp, Web Directions conferences bring together the web industry’s leading experts from around the world to educate and  Read more  <h3>SIGNUP TO THE NEWSLETTER</h3> Drop in your email address and stay up to date with the latest. Name: Email: <h3>SUBSCRIBE</h3> <p>Web Directions Pty Ltd. ABN: 20 118 802 118. All rights reserved.</p> News Feed (RSS) | Podcast | Terms and Conditions | Privacy Policy</footer>
</body>
</html>

If you have doubts about what tag to choose, see the image below (original coming from http://html5doctor.com/downloads/h5d-sectioning-flowchart.png )

 

And, a list that gets updated with the tags that are supported by HTML5:

http://www.w3schools.com/tags/default.asp

On Charsets and other strange black sciences

This is basically the software representation of a given map of language characters. The English language, not having lots of different letters, can be represented by 8 byte construct, which give you about 256 characters. Enough to cover all the letters and punctuation signs. Most browsers and computer systems would default to this if not specified.

In HTML4, it is specified as:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
In HTML5, the specification is:
<meta charset="utf-8">