html5

= = = = = = = __HTML 5 - The reason to learn a new language... now!__ =

**From HTML4 to HTML5:**
** HTML5 is a new web standard for HTML ** created by the World Wide Web Consortium (W3C) and Web Hypertext Application Technology Working Group (WHATWG). HTML5 is an elaboration of the previous version of HTML (HTML4) which was released in 1999, when the web was a very different place from today. (w3schools.com, 2012).

However, since 1999, much has changed in web-design expectations as many new devices came into play. This means that even though HTML4 still works perfectly fine, it became slightly outdated and insufficient given the possibilities arising on the web. **Thus, HTML5 is quite significant as this is the first major advancement in HTML in over a decade, bringing with it new elements and tools to fit the modern web.**

**Advantage of HTML5 over HTML4:**

A particularly notable advantage of HTML5 over HTML 4 is that **it provides an alternative to Adobe Flash Player in rendering audio and video on the web**. Auditory and visual content can be rendered **through markup instead of through the use of plug-ins**. This novel way of embedding graphics, sound and animation not only allows sites to load faster but it also means websites with such content can easily render on mobile devices. Furthermore, with the usage of Apple technology and Macintosh computers on the rise, going around Flash players also means that the content is viewable on Ipods, Iphones and Ipads, which are not Flash compatible.

In other words, HTML5 is far more **mobile-friendly than HTML4**. However, it is worth mentioning that HTML5 has still very low compatibility with Internet Explorer.

**Code Changes brought by HTML 5:**

**Some old and rarely used elements from HTML 4.1 have been removed from HTML5**. In exchange, some structures and elements from HTML 4.1 were “refreshed” and new elements, forms, and tags were added.

__Notable additions through the HTML5 line-up include:__ Elements for structure and semantic purposes such as:
 * : new tag which defines an article (much like Drupal's version)
 * : new tag which allows the user to input extra details or description
 * : new tag which defines and generates a visible head for the tag
 * : new tag that directly edits navigational links

In addition to new structural components, there are also new media elements introduced in HTML5. These elements hold a lot of potential for different ways of consuming multimedia content:
 * : Defines an audio or sound-based content type
 * : Defines a video or movie content type
 * : Allows for multiple media sources for the and tags
 * : Auto-generates an embed player that can house some kind of video or audio content (such as a video player or audio player)
 * : Generates text tracks for and content types
 * : Generates an area where the user can draw on a webpage, dynamically

Some elements which were removed from HTML5 (and which were part of HTML4) are:
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

(all information in this section: w3schools.com, 2012)

HTML 5 & Drupal
Even though HTML5 simplifies many HTML elements, **some of the new standards can be tricky to implement in Drupal 7** because of aspects hard-coded in the CMS’s core. As an attempt to help users circumvent these potential “technical difficulties”, the Drupal community has built several tools (themes and modules). However, Drupal users don’t necessarily need to use any of those tools in order to make use of HTML5 elements.

**An easy way to implement HTML5 in themes is to override functions** set in the theme’s **//template.php//** and **//page.tpl.php//** files. One example of overriding is setting the doctype appropriately as follows:

//Change://

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">//

To this://

<!DOCTYPE html>

With this change, HTML5 tags such as, , can be used in the design process (Delst, 2011).

However, since in web-design not everything is as simple as it may seem at first, it can be useful to be aware of basic HTML5 Drupal Modules currently available.

HTML5 & Drupal - Modules:
**I- HTML5 Tools ** //(This module requires the **[|Elements]** module)// The HTML5 tools module is the basis for HTML5 use in Drupal. This module prepares themes for HTML5 by giving the user access to HTML5 form elements. These elements include, etc. HTML5 Tools also comprises a sub-module, HTML5 Form Tools, that is used to override Drupal’s default forms with the HTML5 counterparts. However, currently it is only applicable to:
 * Email elements on User Settings and Site Configuration pages
 * Search element on Search Module
 * Search element on Search Theme Form



( Home » Administration » Configuration » Markup )

Another feature of this module is simplifying the markup in the. These changes help validate an HTML5 document.



( Home » Administration » Configuration » Markup )

**Note: //html5shiv//** is an Internet Explorer enabling script. It uses javascript to enable HTML5 elements in versions of IE8 (and lower) to be styled through CSS. The code consists of:

//

// Other variables can also be converted to HTML5 through this module, such as date markups. This module also allows you to use these elements directly in your Views. //

( Home » Administration » Configuration » Markup ) In summary, this is a module that allows users to use HTML5 “language” in their Drupal development. HTML5 Tools tells Drupal, who is otherwise used to reading HTML4 codes, that it now it should comprehend and execute HTML5 commands as well.//

**II - HTML5 Media**
This module aims to bring a “standardized, open source GPL front end media solution to Drupal core”. This module has HTML5 media support for both and elements. However, they also have plug-ins available that allows for integration of Flash Fallback and YouTube API integration. Currently, the creators of this module, along with the Drupal community, are aiming towards providing a “tight integration into other HTML5 initiatives” for the future.

In other words, this is the basic HTML5 module for embedding video and audio to Drupal websites. That is, one can create audio or video content using HTML5 markup and circumvent Flash or other plug-ins if necessary, which makes for one of the main advantages of using HTML5 in the first place.

By using both modules, HTML5 Tools and HTML5 Media, Drupal users can incorporate the benefits of HTML5 to their Drupal-enabled websites. Yet, HTML5 compatibility can be further addressed using the appropriate themes.

HTML 5 & Drupal - Themes:
Since HTML5 is still in its infancy, **not all Drupal themes work well with the new coding scheme**. However, a few themes have been created to enable web-designers to make use of HTML5 tags. Just to illustrate how new HTML5 still is in relation to web- design, until 2011, only 16 out of the 174 Drupal themes available claimed to use HTML5 markup (Williams, 2011). Out of the 16, eight have active development and many installs made. All eight themes can all be used as a starting point for custom theme creation. Some of the themes (such as Omega) allow for complete HTML5 coding in the design process, whereas other (such as Zen) are more complex and are “designed to bring Drupal HTML up to HTML5, include CSS resets & content first HTML, as well make some "preferred" features available to Drupal developers“. (Williams, 2011)

The table below shows the eight main HTML5-based themes available in Drupal 7, compared across eight different functionality/features criteria:

Table from: digget.com

Below follows a brief description of the most popular HTML5-based themes::

I - Omega - Responsive HTML5 Base Theme
The Omega Drupal 7 Base Theme is a highly configurable HTML5/960 grid base theme. Each zone (group of regions) can be configured for content first layouts (push/pull classes), hidden at any time and each region can be disabled, resized, and placed easily any way. Omega allows for contextual layouts (different layouts/settings for various portions of a site) through integration with Delta and the Context module. With the Omega Tools module, one can create a subtheme of Omega using Drush. This theme seems to be the most used theme for HTML5 in Drupal 7. Also, according to community feedback it seems that **Omega is the easiest and most simple HTML5-based theme for beginner and intermediate web-designers.**

II - Boron Theme
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">Boron is a base theme for Drupal that converts core template files to HTML5 markup. It includes only a few lines of layout-driven CSS, and markup that is search engine optimized. Boron utilizes the new HTML5 doctype and semantic elements, such as Article, Header, Footer, and Section. The result is a standards-compliant theme with valid markup and minimal CSS that is great for developing new sub-themes.

<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">III. Zen sub-theme (Boron for Zen)
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">The Zen sub-theme (or Boron for Zen) “transforms” the HTML Zen theme into an HTML5 theme. As noted earlier, Boron uses the new HTML5 doctype and semantic elements, such as Article, Header, Footer, and Section. This makes this theme standards-compliant with minimal CSS files-- this can be a great start to developing new sub-themes. Zen sub-theme is a port of the [|Boron] base theme and runs as a [|Zen] sub-theme. Designers can still create thier own sub-themes from this, thus gaining the benefits of Zen as well as the HTML5 markup from Boron. <span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 12px;"> The goal of developing this theme was to convert core Drupal templates to HTML5. Wherever possible, core markup, attributes and class names were left intact, and elements were simply converted to their HTML5 equivalents. This should simplify development, since this theme follows the standards of its core templates.

<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 12px;">A note to Drupal web-designers: //Since this theme is not widely used yet, it would probably be a good idea to wait for further development support before trying it out.//

Drupal Community: Changes anticipation:
Drupal’s user community has been highly anticipating wider HTML5 adoption. In fact, the community is so excited that it hopes Drupal 8 is fully HTML5 (has native markup and form elements built into its core). Nonetheless, the community still seems to utilize current modules, which greatly facilitate the design process without overriding the existing core. However, users seem even more eager for a fully HTML5 compliant core that allows for even greater flexibility in designing, without the dependency on these additional tools. Therefore, current and future Drupal users should stay on the lookout for an HTML5 Drupal 8.

Interesting HTML 5 websites
//Add your own examples too!//

Neat game created using HTML5 markup: [] Website containing various examples of HTML5: http://html5websites.net/