Student No: 07973426
Report on HTML5 and CSS3

Introduction

The technologies I have chosen to research and write a report about are HTML5 & CSS3. I chose these as HTML is the foundation of building web pages and there is much discussion regarding the next evolution of this technology and its counterpart CSS3. The report will look at brief backgrounds regarding the two technologies to establish the relevance of these technologies. I will then focus on the latest specifications for the two technologies and their existing relevance, use/features before looking at the advantages and disadvantages of HTML5 and CSS3.I will complete the report by analyzing and evaluation the technologies and providing working examples of their use.

HTML background

Hypertext Markup Language is the predominant markup language in use on the web and has been prevalent since its creation establishing itself as the basic building blocks of web pages (Wikipedia, 2011).

Websites are HTML pages strung together using links and common opening and closing tags such as <head>, </head>, <body>, </body> and <a>, </a>. HTML has continued to evolve since Tim Berners-Lee initial specification and in 1999 the HTML 4.01 specification was released. Since that time, 12 years ago, much work has taken place to develop CSS but little has happened to develop HTML.

CSS background

Cascading Style Sheets were developed in 1997 (Kyrnin) , as HTML was never intended to contain tags which formatted content, CSS was developed to separate content from formatting. Using external style sheets to define how to display HTML elements became popular and allowed for easier changes to be made to the look of a website. By separating presentation and content you can live on existing code longer, with changes to the websites design done using CSS.

HTML 5

HTML5 is the latest HTML standard for structuring and presenting content on the World Wide Web, and is currently under development. Core aims of HTML5 are to improve semantics, and provide further support for interactive elements on a webpage through the use of web apps without the additional need for plug-ins. HTML5 is also an attempt to define a markup language that can be written in either HTML or XHTML syntax (W3C, 2011). HTML5 also attempts to provide some cross browser consistency by addressing the current existing inconsistencies in how browsers deal with erroneous code, and provide standards regarding how browsers should parse the markup (W3C, 2011).

In February 2011, WC3 announced that July 2014 would be the official date that HTML5 will become the recommended web standard (HTML5 Tutorial, 2011). Two groups of people are currently involved in the development of HTML5, the major web browser developers such as Mozilla, Microsoft, Apple and Google and other industry groups with a major interest (Gonzalez, 2010). W3C has several working groups that meet and decide the best ways in which to move the web forwards. The HTML5 working group, The Web Hypertext Application Technology Working Group (WHATWG) was formed in 2004 and as a result HTML5 is an attempt to address issues inherent to HTML4 and XHTML, providing tools to support new levels of interaction for users. The first public draft of the HTML5 specification was released in January 2008 (SearchSOA, 2010).

HTML 5 Markup

HTML5 will introduce a number of new elements. Elements such as <content> and <footer> are seen as semantic replacements for generic blocks such as <div> elements. <audio> and <video> to replace the use of <object> (Wikipedia, 2011).

Deprecated elements from HTML 4.01 such as <font> and <center> have been dropped from the HTML5 specification and are not achieved through CSS (Wikipedia, 2011). HTMl5 syntax is not longer based on standard generalised markup language, and has been designed to be backwards compatible with parsing of older HTML versions.

Existing layout with DIVS
Figure 1 - Existing layout using DIVS (Hunt, 2007)

Layout with HTML5
Figure 2 - Layout when using HTML5 elements (Hunt, 2007)

HTML 5 differences compared to HTML 4.01 & XHTML

Taken from (Wikipedia, 2011) and (W3C, 2011).

New elements such as article, canvas, audio, video, header, footer, aside
Introduction of a number of APIs that can help with creating web applications
Improved semantics
New parsing rules which allow for flexible parsing and cross browser compatibility
New form controls
Ability to use SVG and MathML in text/html
Deprecated elements dropped such as applet, basefont, big, center, font, frame

CSS3

At the Worldwide Developers Conference Apple defined HTML5 as not only a proposed standard but also that HTML5 is effectively a combination of HTML5 markup, CSS3 and JavaScript (Web Design Magazine, 2010), throughout this report I will refer to HTML5 and CSS3 as HTML5.

Much of the HTML5 visual upgrades come as a result of CSS3. Some support for CSS3 has been added to the latest browser rendering engines, but all browser developers are continuing to work on adding support for the latest incarnation of CSS. CSS3 definition is defined in several separate documents called modules rather than the previous single large document CSS2 specification. These modules add new selectors and features, as well as extending those of CSS2. The original CSS3 draft specifications were published in 1999 (W3C, 2011). This modularisation of CSS3 has led to inconsistencies as some modules are in more advanced stages of development than others, 40 CSS modules have been published by the CSS working group as of March 2011 (W3C, 2011).

Due to this the general consensus seems to be to apply the principle of progressive enhancement, using stable CSS to style the page so that it works correctly in all major browsers, and then adding extra CSS3 functionality for the web browsers that support the new selectors and features.

Uses/Features

HTML is the building block of the web, the foundation that web pages are structured with. HTML5 is predicted to change the way the web works. HTML5 introduces more API objects and methods that will be available via JavaScript.

Video

Video and universal browser playback are one of the uses of HTML5, although at present cross browser compatibility is n0t supported due to the lack of being able to agree on a universal codec. At present it appears deploying HTML5 video is also more complicated that deploying a flash video. YouTube, however have began development on a beta site using HTML5 video which can be viewed with compatible browsers. Since rendering a webpage is native to a browser, then it will be advantageous if just by having a web browser the user has all the software they need to play videos rather than relying on downloading, installing and updating plug-ins.

Application Cache/Web Storage

Application Cache allows the storing of web apps locally, Google has made use of this feature in Gears, replacing their mail client with HTML5 (Dharne, 2010). Web storage was originally part of the HTML5 specification but has since been moved to a separate specification (W3C, 2011).

Canvas

HTML5 introduces a new <canvas> element, that allows the manipulation of graphics and photos enabling a more efficient rendering of images using a procedural method for drawing graphics in the browser directly. This will potentially mean neither jQuery nor flash will be required for such tasks, saving development time (Dharne, 2010) as interactive charting, and graphical animations may be possible through HTML5.

Web Workers API

The web workers feature allows a web application to execute tasks independently therefore not slowing down or interfering with webpage performance (Dharne, 2010), it does this by offloading complex operations to background scripts.

Drag and drop

Drag and drop is used across many different GUI, and is used commonly in Operating systems for both MAC and Windows. HTML5 looks to bring this feature to the WWW, and Google's web email client, Gmail currently supports drag and drop HTML5 in the most recent Chrome and Safari browsers.

Microdata

Microdata is used to nest semantics with content that exists on web pages. Search Engines and browsers can extract Microdata and use it to provide a better browsing experience for the web sites users. Microdata helps search engines and crawlers understand what information is contained within a page. Microdata works by annotating HTML elements with machine readable tags (Wikipedia, 2011). At present Google indexes Microdata but does not yet provide an advantage for including Microdata in your website (Lawson, 2011).

Web Forms 2.0

Originally called XForms basic, Web Forms 2.0 was the initial step towards the creation of the HTML5 (Web Forms 2.0, 2011). The web forms specification has not been entered as a 'form chapter' into the HTML5 specification. Web Forms look to standardise form controls, and render them natively in the browser. Under the new specification there will no generic input types, with each input type being able to be assigned specific entries of what the developer expects back, such as date. HTML5 forms also provide regular expressions for use in validating fields such as email addresses.

CSS3 Features

Border-radius – ability to have rounded corners without images or JavaScript.
Box Shadow – ability to add shadows to any element on the website without the need for images or JavaScript.
Multi-Column Layout – text can be arranged into columns similar to that of newspapers, CSS3 offers the developer the choice of choosing how many columns.
The text inside of this box will be split into three columns to display CSS3 multi-column property. To fill the box further I will use latin filler text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce non ipsum vel magna sollicitudin aliquet. Donec eget sem vel lacus iaculis dignissim et a sem. In sit amet varius velit. Praesent auctor ultrices odio at ornare. Fusce tincidunt hendrerit interdum. Suspendisse eu neque a ipsum commodo viverra.
@font-face – supported in CSS2, but the CSS3 adaption allows the use of .tff, .otf font types as well as the Embedded Open Type.
This shows off the use of @fontface in compatible browsers. This text is written using a font called Zag Regular
Opacity – allows elements to be given transparency
RGBA colours
Transform – can transform elements in a page, rotate, skew, scale again without the need for bloated JavaScript

Geolocation

HTML5's Geolocation feature enables the identification of locations using various technologies, such as GPS, IP addresses, RFIDs and Wi-Fi to name a few (Dharne, 2010). Geolocation is an attempt to standardise a method of retrieving location information. To ensure privacy the system is bound by regulations and authorization is required before it can be used.

Relevance

HTML5's relevance comes from the need to advance the existing markup to co-incide with the new demands for interactive content users of the web desire. This coupled with the ever evolving platforms on which the web can be displayed which were not a consideration during the specification of HTML 4.01. Mobile technologies are gaining market share and HTML5 is suitable for mobile development, iPads, iPhones and Android phones are already making use of HTML5 elements. HTML has helped structure the web since its creation, and HTML5 is aimed at structuring the future foundations of the World Wide Web. CSS3 provides HTML5 with much of the visual functionality, and provides the method for keeping the content and formatting separate. CSS3 can allow for some things to be accomplished which previously would have required the importation of JS.

Advantages

From research these are advantages of HTML5
The semantic web features of HTML5 will improve Search Engine Optimization as machines are able to understand page context more so than at present. More effective tags for the organisation of content make it more readable for spiders. Page segmentation will allow a developer to tell a bot how to segment pages, the website will have a cleaner more organised structure meaning bots will have an increased understanding of the relevancy of webpage content and be able to rank and index the pages more accurately (Krenbrink, 2010). New tags relating to SEO are:
- Article – allows the marking of separate articles on a website. Search Engines will likely put more weight on content within an article tag (WebConfs.com, 2011).
- Section – used to identify separate sections on a page, each section can have its own HTML heading (WebConfs.com, 2011).
- Header
- Footer
- Nav
The new tags will also result in cleaner code.
Potentially smaller pages as the need for Ajax libraries is reduced.
Browser handling of the back button. As Ajax based applications modify content of pages it becomes difficult to manage the history of such sites, being able to manage this is important for accessibility and technology such as screen readers. HTML5 allows the setting of various states that can be navigated using the back and forward buttons.
Interoperability between web browsers, so that documents and applications are consistent in their behaviour regardless of the browser rendering the content.
HTML5 can track impressions and clicks, and take less time to load on devices, it can be supported across all smart phone platforms (DeLanoy, 2010).
Backwards compatibility meaning older browsers can ignore HTML5 code, the specification means whilst developers are not able to use old elements, browsers are still required to support them (W3C, 2011).
HTML5 is not a complete overhaul of HTML 4.01 and also ensures ease of learning as many HTML 4.01 elements are present. This was one of the underlying concepts of HTML5, to keep it accessible to the masses (Krenbrink, 2010).
Functionality will be built into the browser, as most of this is currently done by having to use other tools, plug-ins, add-ons, widgets and other languages the development time increased. HTML5 allows for this without the need for third party applications and plug-ins saving development time and lowering the complexity (Valle, 2010).
Consistency and Interoperability. Websites will be rendered the same in each browser and also there will be a consistency n how developers code for different sites allowing developers and machines to understand page structure easily.
In theory with the new semantics, assistive technologies will be able to gain a more thorough understanding of a page by parsing the HTML5 code.
The simplicity of HTML5 will allow for more web apps to be used without the need for difficult methods of working them into websites (Valle, 2010).
CSS3 simplifies many old complex tasks, allowing for many new things to be rendered in the browser which in the past would have required JavaScript.

Disadvantages

Browser support for both CSS3 and HTML5 is varied and still being implemented. Some CSS3 features can be used by using vendor specific prefixes such as –webkit and –moz. These inconsistencies are perhaps the larger problem at present as different parts of the standard are implemented.
It will take time for the specifications to become standard, for developers to develop their browsers to render new specifications ensuring cross compatibility, and for developers to start implementing the tags into their sites.
A lack of software supporting HTML5 and CSS3 development.
Security is a major concern, the new HTML5 features may open up further opportunity for phishing and malware attacks.
Due to the languages still being a spec, the specification could change at any time.
Licensing issues – at present browsers are unable to agree on what codec to use to support native browser playback of multimedia.
Many of the large brands involved in developing the technologies have vested interests elsewhere, for example the video tag may cause problems for Google and YouTube, Adobe and Flash may be threatened by HTML5 (Gonzalez, 2010).

Analysis

At present, despite the importance of consistency in browser parsing and rendering of HTML5 there is a clear inconsistency as browsers are supporting different parts of the standard. It is difficult to imagine how quickly it will take off in the corporate world, many companies still use old web browsers in their intranet environments due to the costs of upgrading. HTML5 will only become viable to the corporate market when they upgrade their browsers to support it.

Many of the disadvantages will be resolved as development continues, especially if the cross compatibility criterion is met. HTML5 will be providing developers more flexibility and a simpler, efficient lightweight method of completing many of the tasks which currently require other libraries and languages adding complexity.

HTML5 seems to be the perfect technology to compliment the rise in mobile internet browsing, especially with many smartphones supporting it, and Opera as one of the main groups involved in the development of HTML5 making their web browser available for download on other smartphones as well.

New descriptive semantics will change the shape of SEO, and accessibility when the standard is official, HTML5 is taking into account the way the internet has evolved and trying to fix existing issues with this and also take the next step into adopting the evolution of its user's requirements and incorporating them in its spec.

Rather than completely changing the landscape, HTML5 is refining much of it, which means that learning HTML5 will not feel like learning an entirely new language.

Evaluation

Clearly HTML5 is expected to revolutionise the web, but it requires massive collaborative efforts from all involved to meet expectations and provide consistency across browsers, as well as backwards compatibility. HTMl5 opens up the internet for more complex applications and better accessibility, as well as affixes for many of the problems developers have had to work around. HTML5 is a work in progress and will take time, but it is worth understanding and learning as it progresses, especially as browsers although varied are supporting many of the elements of HTML5.

Clearly lessons have been learned from past mistakes, and companies are realising the need to work together, rather than separately to create cross compatibility. By doing this HTML5 is set to benefit everyone that uses the internet. With HTML5 it will mean multiple vendors can contribute to the development of applications, and no single vendor can control and monopolise certain areas of the World Wide Web.

I don't believe HTML5 will make Flash, or Silverlight obsolete, they can still do many things that HTML5 will not be able to achieve, but perhaps the introduction of HTML5 will push the developing companies into more specialised areas, further advancing the technologies to take advantage of HTML5s capabilities.

Examples

Many of the CSS3 examples can be viewed above in the CSS3 features
I have chosen to provide different samples which make use of some of the new features of HTML5 and CSS3, as I stated in the report, currently one of the main issues is consistency across browsers and this is emphasized in my examples as browsers display the new tags differently, or not at all. For HTML5 examples and other CSS3 examples, look here.

References

DeLanoy, J., 2010. HTML5 Explanation and Relevance. [Online] Available at: http://www.bynd.com/2010/10/15/html5-explanation-and-relevance/ [Accessed 16 March 2011].
Dharne, 2010. The 5 Most Important Features of HTML5. [Online] Available at: http://www.dharne.com/blog/2010/04/06/the-5-most-important-features-of-html5/ [Accessed 16 March 2011].
Gonzalez, M., 2010. HTML5 Development. [Online] Available at: http://www.optimum7.com/internet-marketing/web-development/html5-development.html [Accessed 16 March 2011].
HTML5 Tutorial, 2011. Why is HTML5 important? [Online] Available at: http://www.html5tutorial.info/html5-is-important.php [Accessed 15 March 2011].
Hunt, L., 2007. A preview of HTML5. [Online] Available at: http://www.alistapart.com/articles/previewofhtml5 [Accessed 16 March 2011].
Krenbrink, K., 2010. How HTML 5 Will Change SEO Forever. [Online] Available at: http://www.beanstalk-inc.com/blog/2010/08/kainolophobia-impedes-html-5-implementation/ [Accessed 16 March 2011].
Kyrnin, J., n.d. About.com What is CSS? [Online] Available at: http://webdesign.about.com/od/beginningcss/a/aa021607.htm [Accessed 13 March 2011].
Lawson, B., 2011. HTML5 and Search Engine Optimisation (SEO). [Online] Available at: http://html5doctor.com/html5-seo-search-engine-optimisation/ [Accessed 16 March 2011].
SearchSOA, 2010. HTML5. [Online] Available at: http://searchsoa.techtarget.com/definition/HTML-5 [Accessed 16 March 2011].
Valle, S., 2010. Advantages of HTML5. [Online] Available at: http://oshyn.com/_blog/General/post/Advantages_of_HTML5/ [Accessed 16 March 2011].
W3C, 2011. A vocabulary and associated APIs for HTML and XHTML. [Online] Available at: http://dev.w3.org/html5/spec/Overview.html#syntax-errors [Accessed 16 March 2011].
W3C, 2011. Descriptions of all CSS specifications. [Online] Available at: http://www.w3.org/Style/CSS/specs [Accessed 16 March 2011].
W3C, 2011. HTML5 differences from HTML4. [Online] Available at: http://www.w3.org/TR/html5-diff/ [Accessed 16 March 2011].
W3C, 2011. HTML5 Differences from HTML4 section 1.2. [Online] Available at: http://www.w3.org/TR/html5-diff/#backwards-compatible [Accessed 16 March 2011].
W3C, 2011. Web Storage. [Online] Available at: http://www.w3.org/TR/webstorage/ [Accessed 16 March 2011].
Web Design Magazine, 2010. Open HTML5. Web Design Magazine, 10 May. pp.24-33.
Web Forms 2.0, 2011. Web Forms 2.0. [Online] Available at: http://webforms2.org/ [Accessed 16 March 2011].
WebConfs.com, 2011. HTML5 and SEO. [Online] Available at: http://www.webconfs.com/html5-seo-article-27.php [Accessed 16 March 2011].
Wikipedia, 2011. HTML. [Online] Available at: http://en.wikipedia.org/wiki/HTML [Accessed 14 March 2011].
Wikipedia, 2011. HTML5. [Online] Available at: http://en.wikipedia.org/wiki/HTML5 [Accessed 16 March 2011].
Wikipedia, 2011. Microdata (HTML5). [Online] Available at: http://en.wikipedia.org/wiki/Microdata_(HTML5) [Accessed 16 MArch 2011].