What will be the web design advantages of HTML5 over XHTML1.1? by Chris Ayres

What will be the web design advantages of HTML5 over XHTML1.1?

By: Chris Ayres Course: Multimedia Technology Level 6 Module: Research & Planning

HTML5 is being standardised as the next method for building websites. This report was written to discover the advantages it will bring over the current XHTML1.1, and uses literature from the Internet to do so. The result is that HTML5 is easier to write, offers better search engine optimisation as well as accessibility for disabled users, and has improved cross-browser compatibility. It appears that it will enhance Web 2.0 greatly, but because it is not currently standardised, is not yet ready for commercial use.

Table of Contents Abstract Table of Contents

2 3

Introduction

Aim

Objectives

Discussion 4.1 The need for a new standard 4.2 The way in which HTML5 will be

4.3 4.4 4.5 4.6

structured How multimedia will be embedded New interactive features Aesthetic improvements for websites The way in which HTML5 will affect the

5 7 9 10

web design industry

Conclusion

Recommendations

Bibliography

What will be the web design advantages of HTML5 over XHTML1.1? Introduction The World Wide Web Consortium (W3C) is currently developing HTML5, the next standard for structuring and presenting content on the Internet. Aim 3

This report will identify the key features and benefits that HTML5 is expected to bring that XHTML1.1 doesn’t currently offer. It also aims to determine why and how they are being implemented, and the impact it may have on the web design industry. Objectives •

To identify the need for a new standard.

•

To discover the way in which HTML5 will be structured.

•

To discover how multimedia will be embedded.

•

To identify any new interactive features.

•

To assess aesthetic improvements for websites.

•

To identify the way in which HTML5 will affect the web design industry.

The need for a new standard Before discovering what changes are being made to the HTML standard, it’s important to know why they are happening. As the Internet is evolving and being displayed on more devices each year, its capabilities are expanding. This is especially true in mobile devices, where people need quick and intuitive websites to get the information they need as soon as possible. Nancy Davis (2010 p.20) reported that Apple’s announcement that their iPhone and iPad would be supporting HTML5 created immediate urgency for the standard. Due to the immense amount of multimedia being embedded in to sites now (such as streaming video and music) web developers are often expected to learn new languages and plugins to implement them. As Addy Osmani (2010) points out in his article, this can significantly increase the development time on a project, and can also cost businesses more in terms of hiring staff with different specialties.

The issues don’t end there either, according to Joe Aimonetti (2010). Adobe Flash is the dominant multimedia format for the web, and it’s very resourcehungry. Jan Ozer (2010) discovered that HTML5, in most circumstances, is much more CPU-friendly. When computers process a lot of data they use more energy, which is a problem for mobile devices in particular, causing batteries to drain prematurely. A recent topic that this also concerns is green computing. HTML5’s superior energy efficiency would have less of an environmental impact than Flash, and so the moral implications of using so many computers are decreased. A more user-oriented issue with Flash is that when it displays graphically intense content it can struggle on lower specification machines, meaning many people suffer considerable lag, spoiling their online experience. Based on the literature studied it is clear that a new standard is needed to unify the way in which browsers display content, and provide a faster, less power-consuming method of viewing the Internet, particularly for those using mobile devices. The way in which HTML5 will be structured As the core of HTML language, the structure seems the most appropriate area to analyse first. HTML is written using “tags” to specify elements of the page, which order they should be displayed in, and the content within them. As a new standard is being introduced, it makes sense that there will be modifications to existing tags, and entirely new tags will be made. Declaration At the beginning of every website is a declaration to state which version of HTML the page is using, in order for the browser to ‘read’ and display it correctly. W3Schools (2010) states that XHTML1.1 has four different possible 5

declarations: Strict, Transitional, Frameset and standard. Strict, for example, would be displayed thusly: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> The HTML5 declaration is as follows: <!DOCTYPE HTML> The immediately obvious advantage of this new declaration is that it’s simple and easily memorised in comparison to the older method. Webmonkey (2010) says that the idea behind this is to stop versioning HTML, therefore simplifying backwards compatibility. Elements The elements are what define the structure of a website, so these are the most important aspects to study. Jennifer Kyrnin (2010) reports that HTML5 has better definition of structure than previous standards. There are tags that now specifically refer to a section of a website, making both the HTML and CSS quicker to type out, and easier to manage. Kyrnin put together an example of how these new tags work in terms of placement on the page compared to how XHTML1.1 might be written for the same structure. How a website might be structured in XHTML1.1 <div id=”header”></div> <div id=”nav”></div> <div class=”section”></div> <div id=”sidebar”></div> <div id=”footer”></div> How the same site would be structured in HTML5. 6

< header></header> < nav></nav> <section></section> <aside></aside> <footer></footer> This new method is much simpler, and easier for web designers to distinguish each area of the page when trawling through their code. These elements provide a way to mark up nested sections with heading levels (h1 to h6), allowing many more than the current six available with XHTML1.1. Kyrnin also points out that having the purpose of each section identified in the element tag enables assistive technology to aid the user in navigating the page, dramatically improving accessibility. From studying the way HTML5 is structured it appears less code is needed, simplifying a web designerâ&#x20AC;&#x2122;s job. The way in which the markup has been named will improve the browsing experience of those with disabilities. How multimedia will be embedded With broadband speeds increasing rapidly in recent years according to independent regulator Ofcom (2010), multimedia is extremely accessible to Internet users. XHTML1.1 was officially recommended by the W3C (2001) in May 2001, a time when Computer Active (2001) states broadband had scarcely been adopted. Itâ&#x20AC;&#x2122;s likely that there are some changes to fit with the rise in demand, so this report will now find out what they are. Currently websites rely on external plug-ins such as Adobe Flash Player to embed video and audio. Adobe (2010) claims that 99% of Internet-enabled desktops have Flash Player installed, meaning the vast majority of browsers can display this type of content. To display a Flash video on a site in XHTML1.1, a web designer may write something like this: <object width="550" height="400">

The “object” tag is also used to embed audio files, meaning it’s a generic tag with multiple uses. W3Schools (2010) shows that HTML5 is much more specific in its tag markup. The following code is how a video would be placed on to a website in HTML5: <video src="movie.ogg" controls="controls"> Backup text in case the browser doesn’t support HTML5 </video> And this is how audio would be embedded: <audio src="music.ogg" controls="controls"> Backup text in case the browser doesn’t support HTML5 </audio> This is more efficient in that there is only one element, rather than a few elements nested inside others, and yet provides the same level of basic control over how the multimedia object will display. The text within the elements is not only there as something to display in case the browser doesn’t support HTML5, but also for accessibility for the disabled. Blind people using page readers will hear the aforementioned text instead of the video playing, and deaf users can read details about the audio. Elliotte Harold (2007) notes that this feature will also improve search engine optimisation, because the search engines can identify the content of the video by reading the text. New Interactive Features According to Marketing Charts (2008), one of the most popular uses of the Internet is accessing news reports. The main aspect that separates the 8

electronic source from traditional newspapers is the ability to interact with it, in ways such as searching and leaving comments. With this trend firmly in place, it’s likely that HTML5 will bring increased support for interactivity, so this report will now find out more about it. In modern web design, almost all interactive features on a website are constructed using Javascript. Bruce Lawson (2010) claims that the W3C plans to rid the need for Javascript in some circumstances by creating HTML5 elements that do the same job. Collapsing and expanding paragraphs In today’s web design, if someone wanted to create a paragraph that can expand or collapse when the user clicks on it, an external Javascript file would be called in to the page to handle the process. Internet.com (2010) shows that it would take around ten lines of code. The HTML5 equivalent that Bruce Lawson (2010) provides is only four lines of code. The method Lawson (2010) shows is greatly simpler than the Javascript version. Firstly, an external file isn’t required, meaning less file handling and no requirement to write up another document. Secondly, the latter method has no Boolean statements or equations, meaning time saved and less error messages. Menus Web 2.0, coined by Tim O’Reilly (2005), is the concept of the Internet now being largely about user-generated content. This would therefore require providing the user with the tools to contribute to a website. A way of doing this might be building a word processing toolbar for them to be more visually creative with the comments they leave. Similar to the previous example, this currently requires a large amount of Javascript. With HTML5, the need for Javascript is gone, and can be written in one sixth of the amount of code as its predecessor. 9

From these sources it is clear that HTML5 is being developed to simplify the web designer’s job when creating common interactive elements by reducing the amount of code needed and making it easier to read. It doesn’t, however, appear to provide any new benefits for the end-user, as the same results are achieved regardless of whether it was constructed in XHTML1.1 or HTML5. Aesthetic improvements for websites Professionals are hired to make websites that appropriately convey a client’s corporate identity, so the ability to create visually attractive sites is important. The topics studied so far in this report have been purely functional changes, but there are new features that offer improved aesthetics, too. Canvas Using XHTML1.1 to make an image appear on the page is a fairly straightforward affair. The code would be as follows: <div id=”image”> </div> The accompanying CSS might look like this: #image { background-image: url(“images/logo.jpg”); width: 150px; height: 150px; } HTML5 introduces the “canvas” element. Mozilla (2010) states that this is something new, and not an exact replacement for using “background-image” in CSS. Images can now be drawn by the browser during rendering time by following the co-ordinates the web designer provides. As an example, Mozilla

(2010) provide seventeen lines of code which produced an image like this:

The method involved in this seems quite long-winded and complicated, but the browser is able to render this at a faster pace than downloading and rendering an image file. Also, the file size of this code is much smaller than that of an image file, meaning less waiting times for the end-user and less bandwidth used on the server. Mozilla (2010) notes, however, that only simple geometrical shapes can be achieved through the basic code as shown above, and to make more detailed images would take code incredibly more complex and drawn-out. CSS3 Mark Knuttel (2004) describes Cascading Style Sheets (CSS) as a way of declaring the visual style of HTML elements. HTML and CSS go hand-inhand, so the announcement of an updated styling method was no surprise when HTML5 was confirmed to be under the standardisation process by the W3C. For this reason, CSS3 needs to be explored in order to reveal the benefits of the new languages. Rounded corners Adam Kalsey (2003) shows that, up until CSS3, rounded corners on elements could only be achieved by making a rounded graphic for each corner and putting them in separate divs surrounding it. This is a bit of an eyesore on the code, as Kalseyâ&#x20AC;&#x2122;s demonstration shows: <div class="roundtop">

<img src="tl.gif" alt="" width="15" height="15" class="corner" /> </div> The above code is for the div that would sit above the element to give it rounded top corners. The accompanying CSS would be as follows: .roundtop { background: url(tr.gif) no-repeat top right; } The problem with this method is that it needs an extra two divs per element, each with its own CSS, creating more work for the web designer. CSSPortal (2010) explains that HTML5 handles rounded corners differently: #section { border-radius: 10px; } By applying the above code to the element that needs rounded corners, the effect is immediately in place. There is no need for separate divs, only the one line of CSS for the element, saving the designer from making corner images and writing out HTML for the divs. The fact that no images are needed means less downloading needed from the user’s end, and less browser rendering, saving them a small amount of time. Drop shadows As with rounded corners, drop shadows are a popular web design aesthetic that require an extra div and image with XHTML1.1. Randy Reddig (2005) points out that it involves creating a semi-transparent “.PNG” image to act as a shadow and placing it in a div underneath the desired element, then offsetting it to give depth. This seems a bit long-winded, but CSS.info (2009) says that HTML5 simplifies it a great deal: #section { 12

box-shadow: 10px 10px 5px #000; } The new box-shadow property provides the same benefit as the rounded corners property, in that the browser generates the desired effect instead of another div and image being created. The first two numbers set the vertical and horizontal offset of the shadow, the third number sets the softening of the shadows edges, and the hexadecimal figure sets its colour. This amount of customisation allows for many possibilities, meaning that in future web designers may never need to make an image of a drop-shadow again. The way in which HTML5 will affect the web design industry With a change in markup language comes a change in the way people in the industry work. This report will now take a closer look at how this is likely to happen. When HTML5 is standardised, many of XHTML1.1â&#x20AC;&#x2122;s commands will be deprecated. Scotland SEO Blog (2010) mentions that bloggers may need to rethink how they manipulate the text and images on their pages. With tags like <center> and <font> disappearing, they may need to start using CSS instead of just HTML commands if they are using in-browser editors. Companies that offer these services (such as Blogger.com) could counteract this problem by altering their text editors to define a style sheet separate to the HTML page it generates. Search Engine Optimisation will be improved, according to Andrea Moro (2010). Internet Spiders could more easily navigate through websites because of the new, detailed structure that HTML5 offers. They would also be aided by the cross-browser compatibility between desktop, laptop, mobile and PDA platforms that HTML5 promises. One of the largest debates about HTML5 is whether or not itâ&#x20AC;&#x2122;s going to replace Flash. Andrew Brust (2010) quotes Michael Scafidi, technology

director of Razorfish.com, as saying that the iPad is a catalyst for HTML5 adoption because it doesnâ&#x20AC;&#x2122;t support Flash. He believes that Flash will still be used for more immersive media and advertising outside of Appleâ&#x20AC;&#x2122;s mobile products, largely because Internet Explorer 8 will not support HTML5. This is a problem because it will be years before all web users have upgraded to at least IE9, which will be the first Microsoft browser to support the new standard. Brust (2010) also spoke to Michael Pinto, CEO of Very Memorable Design, who predicts that microsites that were previously created in Flash will now be more likely to be made with HTML5 and jQuery. He thinks that slideshows and video will be done without Flash, but for more interactive activities such as games, Flash would be necessary. From this collection of evidence it appears that the advantage within the industry will be easier SEO, however the transition in to HTML5 may bring problems such as formatting issues and a division in the advertising market.

Conclusion One of the main advantages of HTML5 over XHTML1.1 appears to be the simplification of the code, with fewer characters required to create elements, and in many circumstances the eradication of the need for Javascript. Another is the improved cross-browser compatibility for multimedia by removing the need for plug-ins in some cases, which also increases battery life in mobile devices. The other major advantage of HTML5 is the greatly improved accessibility for disabled users that comes from the definition of areas of the page. This also acts as clearer markup for web designers, making their job a little easier, and helps the search engines navigate a site more easily, improving the quality of searches on the Internet.

The objectives have been met to varying degrees. The structure of HTML5 has been analysed thoroughly, what with all major tags being displayed and discovering how they are better than XHTML1.1. The same applies for the multimedia embedding. However, mostly due to word count restrictions, the other objectives were not investigated as thoroughly as they could have been. A lot more could have been said about the impact within the industry, as well as a more in-depth look at the Canvas feature, which is an important new element. Recommendations Due to HTML5 not being standardised yet, it would not be wise to implement it in any commercial use, because the browsers may be unable to render it correctly, meaning users see an unstructured page. Waiting until the W3C have standardised it would be more appropriate. For the time being it would be beneficial to make some practise websites in HTML5 to get accustomed to it when the switch finally happens.

Bibliography Adobe, 2010. Flash Player penetration. [online] Available at: <http://www.adobe.com/products/player_census/flashplayer> [Accessed 29 October 2010]. Aimonetti, Joe, 2010. Why HTML5 matters to Mac users. [online] Available at: <http://reviews.cnet.com/8301-13727_7-10439767-263.html> [Accessed 12 October 2010]. Brust, Andrew, 2010. Does HTML 5 Make â&#x20AC;&#x153;Rich vs. Reachâ&#x20AC;? a False Choice? [online] Available at: <http://visualstudiomagazine.com/blogs/redmond15

review/2010/05/html-5-make-rich-vs-reach-a-false-choice.aspx> [Accessed 16 November 2010]. Computer Active, 2001. UK Fails to Take up Broadband. [online] Available at: <http://www.computeractive.co.uk/computeractive/news/2012108/uk-failsbroadband> [Accessed 6 November 2010]. CSS.info, 2009. Box-shadow, one of CSS3â&#x20AC;&#x2122;s best new features. [online] Available at: <http://www.css3.info/preview/box-shadow/> [Accessed 5 November 2010]. CSSPortal, 2010. CSS3 Rounded Corner Generator. [online] Available at: <http://www.cssportal.com/css3-rounded-corner> [Accessed 5 November 2010]. Davis, Nancy, 2010. Emerging Web Standards: Keeping Up to Stay Ahead. [online] Available at: <http://www.ecmag.net> Vol. 33 Issue 7, p20-24, 5p [Accessed 11 October 2010]. Internet.com, 2010. Expand-Collapse Paragraph. [online] Available at: <http://javascript.internet.com/miscellaneous/expand-collapseparagraph.html> [Accessed 1 November 2010]. Knuttel, Mark, 2004. What is CSS? [online] Available at: <http://www.devshed.com/c/a/Style-Sheets/What-is-CSS> [Accessed 5 November 2010]. Kyrnin, Jennifer, 2010. A Preview of HTML5. [online] Available at: <http://www.alistapart.com/articles/previewofhtml5> [Accessed 12 October 2010]. Lawson, Bruce, 2010. HTML5 details element, built-in and bolt-on accessibility. [online] Available at: <http://www.brucelawson.co.uk/2010/html5-

details-element-built-in-and-bolt-on-accessibility> [Accessed 1 November 2010]. Marketing Charts, 2008. More People Using Internet in New Ways and Embracing Web 2.0. [online] Available at: <http://www.marketingcharts.com/interactive/more-people-using-internet-innew-ways-and-embracing-web-20-5257> [Accessed 7 November 2010]. Morrow, Andrea, 2010. How the new HTML5 will impact on SEO. [online] Available at: http://blog.teammatelabs.com/2010/02/12/how-the-newhtml-5-will-impact-on-seo[Accessed 16 November 2010]. Mozilla, 2010. The <canvas> element. [online] Available at: <https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage> [Accessed 3 November 2010]. Oâ&#x20AC;&#x2122;Reilly, Tim, 2005. Design Patterns and Business Models for the Next Generation of Software. [online] Available at: <http://oreilly.com/web2/archive/what-is-web-20.html> [Accessed 2 November 2010]. Ofcom, 2010. UK Broadband speeds 2010. [online] Available at: <http://stakeholders.ofcom.org.uk/market-data-research/telecomsresearch/broadband-speeds/broadband-speeds-2010> [Accessed 6 November 2010]. Osmani, Addy, 2010. Why HTML5 is a game-changer. [online] Available at: <http://www.Scribd.com/doc/19252560/Why-HTML5-is-a-gamechanger> [Accessed 12 October 2010]. Ozer, Jan, 2010. Flash Player: CPU Hog or Hot Tamale? It Depends. [online] Available at: <http://www.streaminglearningcenter.com/articles/flash-playercpu-hog-or-hot-tamale-it-depends-.html> [Accessed 7 November 2010].

Reddig, Randy, 2005. Robust CSS Drop Shadows. [online] Available at: <http://www.sixapart.com/pronet/articles/ydsf_-_robust_c.html> [Accessed 5 November 2010]. Scotland SEO Blog, 2010. What Effect Will HTML5 Have on Web Design and SEO. [online] Available at: <http://www.scotlandseoblog.co.uk/2010/02/11/what-effect-willhtml5-have-on-web-design-and-seo> [Accessed 16 November 2010]. W3C, 2001. XHTML1.1 â&#x20AC;&#x201C; Module-based XHTML. [online] Available at: <http://www.w3.org/TR/xhtml11> [Accessed 6 November 2010]. W3Schools, 2010. HTML doctype declaration. [online] Available at: <http://www.w3schools.com/tags/tag_doctype.asp> [Accessed 29 October 2010]. Webmonkey, 2010. Building web pages with HTML 5. [online] Available at: <http://www.webmonkey.com> [Accessed 29 October 2010].