Search This Blog

Thursday, 11 June 2015

HTML5, Not Just a Version Number (Part 2)

The number in HTML5 means something more than a mere version. The environment asks for a minimal effort on some basic programming patterns. If your aim is to have contents adaptable as much as possible to a wide range of devices: accessibility, responsivity and semantics built-in properties are a good starting point.  





Harder: Better, Faster, Stronger






Accessibility is one of the oldest topic in web debates, as much-discussed so it was disregarded. But the new environment is natively thought to meet the needs of people with disabilities, that use assistive technology.

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) sets a first frame of rules and methods to give a meaning to your mark-up. The role attribute, states and properties cover a first need in accessibility golden path.
"The role attribute provides information on what the object is. The States and Properties module (ARIA-State) adds meaning about relationships and current states"
http://alistapart.com/article/waiaria
Accessibility is not only WAI-ARIA, there are serveral rules to respect, often these bounds are clearly exposed in national laws:
Despite ethic questions, people with disabilities are a small market segment, accessibility became real mainly when grew a generalized demand of responsive pages.

It's true, a web page mark-up can be responsive without be accessible but everything accessible is, at least partially, responsive. For instance, the domain of responsive can be related to different screen sizes of a similar device but also to different kinds of devices.

Responsiveness is one of the newest items in Internet, the rise of mobile web pushed up the need to have a liquid mark-up adaptable as much as possible to ... anything.

I found really interesting these slides to set up a mobile approach workflow:
HTML5 design encourages you to write code Accessible and Responsive, but there is a third reccomendation: you can also do this using the new semantic elements.
Semantics: The branch of linguistics and logic concerned with meaning. The two main areas are logical semantics, concerned with matters such as sense and reference and presupposition and implication, and lexical semantics, concerned with the analysis of word meanings and relations between them. (http://www.oxforddictionaries.com/definition/english/semantics).
Any respectable article about semantics quotes Magritte.

Semantics is the bugbear of mark-up debates in the last 15 years:
Just mentioning the word generates flames, ruins families and undermines zen gardens:
The HTML5 approach to Semantics is smart. Semantic or not, the mark up can reach the same results in terms of responsivity and accessibility. Even if you use generic DIVs instead of semantic oriented tags (ARTICLE, ASIDE, SECTION) you can layout them and give them a meaning with the roles.

But choosing the Semantics way makes the code faster and reduces redundancy:
Semantic tags, attributes and rules are modeled from the most common types of webpages/services:
  • <header>, <nav>, <main>, <footer> for the page organization;
  • <article>, <section>, <summary>, <details>, <time> are the essential containers for serveral kinds of contents, for instance: blog, e-commerce, e-press;
  • <audio> and <video>, the new tags for common multimedial contents.
In the HTML5 semantic frame we consider also the new input types, they:
  • help to link consistently form fields with db data types,
  • bring essential infos for validation process,  
  • route the interpreter to the right data output,
and, at least:
  • INPUT TYPES give a meaning to a relevant part of a web site like a form, an interface between users and you.
At the end, if you want a more granular semantics in your data, HTML5 works fine also with Microformats:
Posted by at
Labels: , , , , , ,

1 comment:

Subscribe to: Post Comments (Atom)