Download HTML 5 - University of Wisconsin

New Features In HTML5
Mason P O’Mara
Department of Computer Science
University of Wisconsin-Platteville
[email protected]
Abstract
HTML5 is the latest version of HTML (Hypertext Markup Language), and as of December 2012
is a W3C Candidate Recommendation. Traditionally HTML was developed and maintained by
the World Wide Web Consortium (W3C) as a means to share information via the internet.
However the internet has grown and changed significantly since the birth of the World Wide
Web and the previous version of HTML, HTML4.01. Issues of organization, structure,
standardizations, semantics, and the growing use of third-part plug-ins can cause confusion for
developers and users. In addition both of these groups seek more and more features such as
viewing multimedia, the bolstered ability to render graphics and animations, expanding
information gathering via forms, and better ways to locally store data. HTML5 works to address
these issues as well as implement the demands of an ever growing web developer and user base.
Introduction
HTML5 attempts to work on two very important aspects of an always changing internet. Those
two aspects are innovating new and powerful features, while attempting to set a standard in the
way these features are implemented. Developed and maintained by a standards organization,
W3C, and an unofficial group of various developers, WHATWG (Web Hypertext Application
Technology Work Group) both features and a standard way to introduce them are continuously
in development. Features such as displaying video and audio are not only appealing for web page
users, but also help reduce the need for third-party plug-ins. Rendering improved graphics using
new elements and improved styling, via CSS3, not only make websites more visually appealing,
but help reduce resources and load times. It is this careful balance of appeal and organization that
makes HTML5 such a strong push in the development of the language, which leads to a more
effective, cleaner, standardized web.
History
While there were many actors involved in the birth of HTML, no one comes to mind as instantly
as Tim Berners-Lee. While Berners was working with physicists at CERN he and many other
scientists were often required to meet in various locations across Europe for meetings and
2
discussions. It was with this inconvenience that Tim Berners-Lee proposed the idea of the World
Wide Web, a connected system of documents that are connected via hyperlinks through the
internet. These documents are known as hypertexts, and with this concept the physicists of
CERN would have a tool to quickly view their own documents directly alongside their peers’
from across the globe. To bring this technology to life, Berners-Lee would need to choose a
language to create these hypertexts. Berners-Lee started to design a markup language for his
hypertext system that would do its best to act as a global language. [1]
Tim Berners-Lee had a simple proposal for a markup language based off of SGML, Standard
Generalized Mark-up Language, which is the basic and international way of organizing text into
sentences, paragraphs, headings, and lists. In 1991 Berners-Lee decided to show his markup
language, named HTML to the scientific community, and many took note, including HewlettPackard employee Dave Raggett. Raggett wished to expand upon the simplistic HTML by
adding features he believed the general public would find desirable. He decided to name his
version of HTML+ and began to write a browser for it in 1993. This trend started to grow as
many other individuals and companies started to implements their own versions of HTML with
different features. It was soon after that in 1994 at the first World Wide Web conference in
Geneva that future W3C member Dan Connolly proposed HTML2 as a way to set a standard for
the markup language that was quickly spinning out of control. [1]
This contrast of HTML as a tool for strict simplicity versus growing interactivity would continue
throughout the decade. In 1994, both Netscape and W3C would start up, with Netscape
developing the first widespread successful internet browser and W3C maintaining web standards,
HTML included. New features of HTML continuously popped up, with stylistic elements
coming about in 1995. 1995 was also the year when Microsoft developed its popular web
browser, Internet Explorer, and much like other technology companies started to develop its own
elements for HTML. CSS, Cascading Style Sheets, began development as a way to add styles to
web pages without further clouding the organizational intention of HTML. Netscape also begins
to look into scripting for web pages in 1995 with JavaScript. All of these extended features
eventually gave birth to HTML4.01 in December 1999, which has defined the look and feel of
the internet for the past twelve to fourteen years. [1]
With the drastic change in the display, usage, and importance of the internet since the early days
of HTML2, W3C looked to different technologies to restore their idea of an organized hypertext
system, namely XHTML 2.0. This decision to temporarily abandon HTML development called
for the creation of Web Hypertext Application Technology Work Group (WHATWG).
Selectively composed of individual from Apple, The Mozilla Foundation, and Opera Software,
WHATWG began draft work on HTML5 in 2004. [2][3] Soon after in 2006 W3C decided to
work with WHATWG for the advancement of HTML while suspending, and later in 2009
stopping completely, work on XHTML 2.0.[4] In 2008 the two organizations release the first
working draft of HTML5, and in the years following internet browsers starting with Mozilla
Firefox start to incorporate HTML5 in their framework. However it isn’t until April 2010 that
HTML5 became noted on a mainstream level when Steve Jobs of Apple published “Thoughts on
Flash”. In the document Jobs described the eventual downfall of Adobe Flash as a means to
display video and audio in a world rapidly adapting mobile and touch devices. Jobs goes on to
praise HTML5, CSS, and JavaScript for their functionality, future perspectives, and the fact that
3
they are open standards.[5] Since April 2010 HTML5 has seen much growth with various highly
rated and highly visited websites choosing HTML5 as their DOCTYPE. Currently HTML5 is a
W3C Candidate Recommendation, with W3C working for a definitive standard and WHATWG
working for a “living standard”, a constantly evolving HTML5.
HTML5 DOCTYPE
Before any new features of HTML5 can be implemented, the browser must be told that the
HTML document is indeed HTML5 and not HTML4.01 or an older version. A DOCTYPE is
declared as the very first line of an HTML document and defines the version of HTML to be
used for that document. Previous to the widespread use of HTML5 it was very common to see
most webpage use one of the following HTML4.01 DOCTYPEs:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
These three HTML4.01 DOCTYPE declarations determine which elements can and cannot be
used for the document. Each declaration in this situation becomes more lenient on which
elements can be used as the list progresses. The confusion about which DOCTYPE to select
while using HTML5 has been removed, as there is only one DOCTYPE for HTML5 and it is
very simple:
<!DOCTYPE html>
This one simple DOCTYPE makes editing another’s code much easier, as there is no need to
change the code due to a requirement not available for the current DOCTYPE. [6]
Semantics and Structural Elements in HTML5
As previously stated, W3C has always had a strong push for HTML to be a markup language to
primarily be used for the sharing of organized, easily readable documentation across the globe.
With the ever growing user base and usages for the internet and the World Wide Web, these
standards are not always followed. This lack of adherence makes the work of a standards
organization weak, and thus in HTML5 W3C, as well as WHATWG, have introduced many
4
elements that can be used to better organize HTML5 documents. For a comprehensive code
example on the following semantics elements refer to the appendix. [A]
<article>
The article element is used to organize as section of content that could stand independent from
the rest of the content in a web page. This element should be used as a top-most organizational
element for a standalone portion of an HTML5 document. Examples where this code would be
used it to outline a blog post, newspaper article, or comment. [6]
<section>
The section element is used to organize parts of the content into smaller sections. Some examples
include sectioning off an HTML5 document into chapters or disclaimers. It should be noted that
this element should be used only to organized information in an HTML5 document. If organizing
a document’s style into sections, it is recommended to use the <div> element. [6]
<header> and < footer>
The header and footer elements are used for representing a header and footer in an HTML5
document. A header is typically used as an introduction, while a footer is typically used for
author or article information and/or copyright. [6]
various others
In addition to the semantics elements described above, a number of additional structural elements
are introduced in HTML5. A full description of all of the semantic elements can be found via the
W3C documentation. [6]
Multimedia Elements in HTML5
HTML5 not only works to improve on the semantic accuracy of web documents, but also to
make them more appealing and interactive. This concept is of increasing importance as the
internet grows in age and attracts a younger (or perhaps even older) aged crowd. While W3C
first maintained HTML for academics, users of all demographics now enjoy social media, video
and audio, video gaming, and many other non-academic services provided via the internet.
HTML5 better fulfills this growing demand by introducing elements to incorporate video, audio,
and generating graphics.
<video>
5
The new video element is perhaps the best known new feature for HTML5. The element
provides an in-browser video viewer. There are three different video compressions that the
video element allows for. These compressions are MPEG4, WebM, and Ogg. The <track>
element, defined below, can be added to a <video> element to load text tracks to the video. In a
similar fashion the <source> element, defined below, allows for the loading of multiple video
sources into a video element. This can be useful as certain video compressions are not
compatible with certain browsers.
Various attributes are also related to the <video> element. Basic attributes include width and
height which will determine the size of the video. Src is also an attribute that appears in other
elements and can be used in the <video> element if the source element is not used to define the
source. The attribute autoplay will force the video to play as soon as it can be loaded, usually as
soon as the page it is on loads. The controls attribute will display video controls, a bar with
play/pause buttons, volume and fullscreen control, to appear at the bottom of the video. Another
attribute is loop, which will set the video to endlessly repeat as it finishes. Muted is an attribute
that will set the default audio for the video to mute and poster will set an image to be displayed
while the video loads. [6][8][9] To see an in-code example of the video element with attributes
as well as using the source and track elements described below, see the appendix [B].
Table 1: HTML5 <video> Element Browser Compatibility [7][9]
Broswer
Chrome 6+
Firefox 3.6+
Opera 10.6+
Safari 5+
IE 9+
MPEG4
YES
NO
NO
NO
YES
Ogg
YES
YES
YES
YES
NO
WebM
YES
YES
YES
YES
NO
<source>
The source element in HTML5 enables a user to define multiple video sources for a <video>
element. Attributes for the source element include src which is used to define the video source
file, type which is used to define the MIME-type of the resource, and media which is used for
media queries on a server. [6][8] Examples can be seen below in the appendix [B].
<track>
The track element in HTML5 allows the user to define text tracks for video and audio. Typically
this element is used for subtitles/transcriptions. Attributes for the track element include src which
points to the track data, and srclang which contains a BCP47 language tag indicating the track
language. Another useful attribute is kind, which will have a value of subtitles, captions,
descriptions, chapters, or metadata and tells the track what type or data is being presented. Lastly
6
the label attribute present a user-friendly and readable to the track code. [6][8][10] An example
is shown below in the appendix [B].
<audio>
Similar to the video element the audio element allows audio to be played in an HTML5
document without the need for a third-party plug-in. Three audio compressions are compatible
with the audio element, MP3, Wav, and Ogg. Like the video element, the audio element makes
use of the source and track elements. Audio also makes use of the attributes src, autoplay,
controls, muted, and loop which are all described in the video element section above. [6][7] For a
code written example of the audio tag, refer to the appendix below [C].
Table 2: HTML5 <audio> Element Browser Compatibility [7]
Broswer
Chrome 6+
Firefox 3.6+
Opera 10.6+
Safari 5+
IE 9+
MP3
YES
NO
NO
YES
YES
Wav
YES
YES
YES
YES
NO
Ogg
YES
YES
YES
NO
NO
HTML5 Multimedia compared to Adobe Flash
Adobe Flash has for years been a widely used third-party plug-in used for displaying video,
audio, and animations on the web. However with the growing importance for mobile computing
and the want/need to reduce third party plug-ins on the web, many developers and web designers
are looking to remove creating content with Adobe Flash. These developers and designers are
looking to HTML5’s growing multimedia features for use on the web.
HTML5 offers many pros in its fight for web multimedia supremacy. These reasons include
HTML5 being a web standard and therefore much more cross-platform. No longer will
developers need to learn multiple methodologies for uploading video, audio, and animations to
the web; rather they will only need to look to HTML5, which is supported by W3C (a standards
organization) as well as many web browsers. HTML5 also has access to the HTML DOM and
APIs, giving it more access and customization. In addition, as stated in the history section of this
paper, Adobe Flash is not supported on mobile Apple products. Apple owns a large portion of
the tablet and mobile phone market globally and especially in the United States, making this lack
of support an issue for web developers and many users. In addition reducing the need for Flash,
as well as other third-party plugins, can preserve battery life on low-powered devices such as
smartphones. [7]
However HTML5 is not perfect when it comes to multimedia. Most notably HTML5 is a newer
web technology that it is not fully developed yet. There are numerous firms that may not have
web designers trained in HTML5, however with Adobe Flash being around since the 90s and
7
2000’s, it may be more familiar with developers and also consumers. Currently approximately
97% of all desktops and laptops browsers have Adobe Flash installed, which makes the decision
to stop support of Flash an unwise decision. HTML5 also cannot display live streams with its
video element, and the video element cannot enter full-screen on its own. However this is
becoming a negligent disadvantage as many major web browsers have a full-screen function
built in. HTML5’s video element also does not currently support use with webcams and
microphones on its own. [7]
Extended Forms in HTML5
Web Forms 2.0 was originally a separate specification from HTML5, but is now fully worked
into the HTML5 specification. The features brought through Web Forms 2.0 expanded the
functionality of HTML4.01 forms. In HTML a form is used to gather information from a client
and usually sent through a post or get action to a server using PHP or ASP. Many of these new
attributes make gathering this information from a client easier and more organized.
Autocomplete and <datalist>
Not only in the <form> element, but now in the <input> element the attribute autocomplete can
now be added. This attribute will use previously entered user information to allow the user to
automatically enter this information in the future. The autocomplete attribute can have the values
on or off. The new <datalist> element is another way to implement autocompleting fields and
can be used by linking an input’s list attribute with a <datalist> element of the same id. [6][8]
For a code example of a <datalist>, refer to the appendix. [D]
Novalidate and validation
In-browser validation can also be disabled using the new form attribute novalidate. This will
allow a developer to either bypass validation of information, such as web URLs, or implement
their own validation. This attribute also can present itself in an input with the attribute
formnovalidate. This can be useful if only some of the input fields of a form need to bypass
validation. In the opposite direction, if an input field is needed from a use before the rest of the
form is submitted to the server, the attribute required can be added. [6][8] For a code example on
using these non-validation and validation attributes see the appendix. [E]
Keygen and form security
The <keygen> element is a new element to HTML forms and is currently not compatible with
Internet Explorer or Safari. With the use of a <keygen> element, a developer can use publicprivate key encryptions with the private key being stored on the client side and the public key
being sent to the server. This will let the server authenticate the input field in the future using the
private key to match to its public key. The attribute keytype can be included in the element to
8
indicate which private-public key algorithm to use. HTML5 uses three algorithms, rsa, dsa and
ec. [6][8] For a <keygen> example in code, refer to the appendix. [F]
<output>
The <output> element is new to HTML5 and allows for the calculation and resulting output in a
form. Previous to the output element this type of output would have been produced and displayed
using scripting. Currently Internet Explorer does not support the <output> element. [6][8] For an
output form example in code, refer to the appendix. [G]
<input> types
Along with overall form functionality, many new additions have been made to the <input>
element in specific. A large portion of these changes include values for the type attribute. These
new values for type specify the function of the input. In HTML4.01 common types for the input
element included text, button, and file. In HTML5 forms have now become more powerful and
much of the workaround scripting to self-implement these functions are now standard parts of
HTML5.
Among the list of new input type values are a date, time, and datetime pickers. These inputs
allow a user to use a spinner or calendar view to select a date and time. There are also input types
for choosing a month or week out of a year. These inputs are present via spinner/calendar view
and appear with the format “Week 01, 2013” which in this case would select January 1 – 7 for
the year 2013. Also using a spinner the input type number allows a user to select a number in an
input. [6][11]
Certain input types are used primarily for validation, such as email, url, and telephone. These
input types present themselves as text inputs and are primarily used to confirm that the user is
entering the right format for the information requested. These inputs are also used as an
organizational tool server-side for validation of the entered values. Other unique input types
include range and color. Range provides a slider with a min and max value and can be used to
pull numeric values. Color will display a button, and on click will launch a color picker and will
return the hex value of the chosen color when submitted to the server. [6][11]
HTML5 Graphics and Animation
HTML5 shares many of the same services and features that HTML4.01 used to display graphics
and, in some cases, animations. However HTML5 expands upon these services as well as
introduces new features for its rendering of graphics and animations. One of the most visible and
appealing new graphical features in HTML5 is the <canvas> element. This element allows the
web developer to create a 2D plane in which to render graphics in real-time via scripting. These
scripts come about in the form of JavaScript, and with them lines, shapes, solid colors and
gradients, images, animations, and even browser based games can be scripted into a <canvas>.
9
While 2D graphics and animations are all that the <canvas> element allows, the illusion of 3D
can be implemented by creating 3D graphical objects and loading them into a 2D <canvas>. This
is very effectively done using JavaScript along with WebGL, a JavaScript API based on OpenGL.
[12]
HTML5 also provides full support with CSS3, the current standard of CSS (Cascading Style
Sheets). CSS is used to provide stylistic changes to HTML, though separate from HTML,
through the use of selectors, properties, and values. These selectors will link the id or class
attribute of an HTML element to its CSS, then these elements will be changed via setting values
for various properties such as font size. To implement many of CSS3’s new features in older
versions on CSS required a third-party plug-in or much more scripting (usually JavaScript). With
less third-party plug-in dependence and less lines of scripting, CSS3 styling allows a webpage to
load quicker and more reliably. New style features in CSS3 include transitions, animations,
rounded corners and drop-shadows, 2D and 3D transformations, and the ability to include any
font on a web page as long as it is loaded into the web directory. [12]
HTML5 Local Storage
A new feature of HTML5 that may not appear as appealing to the user at first glance is local
storage, defined in W3C’s specification as web storage. While not as outward flashing as
multimedia or graphics, HTML5’s way of locally storing data from a website or page has some
significant advantages over previously used methods of local storage. The most popular of these
previous, and current, methods is the use of cookies. Cookies store a small amount of data onto
the users’ web browser when visiting a site. The data in these cookies is then sent to the
website’s server on every HTTP request for that website, and then used to remember activities
the user has taken on that website. With this constant sending of data back and forth, there is
potential room for a user’s activity on a website to experience slowing down. In addition
unencrypted data sent back and forth numerous times can potentially result in security issues.
[13]
With HTML5’s web storage, the amount of data that can be stored on a user’s browser. While in
the past using multimedia plug-ins such as Adobe Flash required more information to be stored
locally via the plug-in, HTML5’s multimedia local storage demands can be satisfied using web
storage. This way of locally storing information also does not need to be sent to the server every
time an HTTP request is issued, but rather only when it is asked for by the server. [13]
Conclusion
As the web continues to grow in importance, user activity, and size new and improved features
for its core markup language will always be in demand. It is thus not only responsible to make
sure these demands are analyzed and met, but done so with careful attention to the longevity and
standardization of the HTML surrounding these features. Features such as large websites filled
with multimedia and real-time rendered graphics are only improved when organization and
semantics are applied to them, and vice versa. HTML5 takes a strong step forward for the
10
language and helps to both push the web forward while keeping it grounded. It is with this
careful balance that HTML5 strives to be a comprehensive, innovative, and holistic solution to
creating a better world wide web.
References
[1] Dave Raggett, Jenny Lam, Ian Alexander and Michael Kmiec. 1998. Ragget On HTML 4,
Chapter 2. < http://www.w3.org/People/Raggett/book4/ch02.html>.
[2] Hickson, Ian. July 4th, 2004. WHAT open mailing list announcement. <
http://www.whatwg.org/news/start>.
[3] FAQ. April 27th, 2007. In WHATWG Wiki. Web Hypertext Application Technology Working
Group. < http://wiki.whatwg.org/wiki/FAQ#What_is_the_WHATWG.3F>.
[4] Le Hegaret, Philippe and Ian Jacob. June 2nd, 2009. Frequently Asked Questions (FAQ) about
the future of XHTML. < http://www.w3.org/2009/06/xhtml-faq.html>.
[5] Jobs, Steve. April 2010. Thoughts on Flash. < http://www.apple.com/hotnews/thoughts-onflash/>.
[6] Berjon, Robin et al. March 19th, 2013. HTML 5.1 Nightly.
<http://www.w3.org/html/wg/drafts/html/master/>.
[7] Yan, Xing; Yang, Lei; Lan Shanzhen and Xiaolong Tong. August 24th-26th 2012.
Applications of HTML5 multimedia.
<http://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=6308992&isnumber=630877
5>.
[8] Smith, Micahel and W3C. October 25th, 2012. HTML: The Markup Language (an HTML
language reference). <http://www.w3.org/TR/html-markup/Overview.html#toc>.
[9] Refsnes Data. HTML5 Video. <http://www.w3schools.com/html/html5_video.asp>.
Retrieved March 11th, 2013.
[10] HTML/Elements/track. March 14th, 2011. In W3C Wiki. World Wide Web Consortium.
<http://www.w3.org/wiki/HTML/Elements/track>. Retrieved March 11th, 2013.
[11] HTML5 form additions. August 11th, 2012. In W3C Wiki. World Wide Web Consortium. <
http://www.w3.org/wiki/HTML5_form_additions>.
[12] Etemand, Elika J. May 12th, 2011. Cascading Style Sheets (CSS) Snapshot 2010.
<http://www.w3.org/TR/css-2010/>.
[13] Hickson, Ian. December 8th, 2011. Web Storage. <http://www.w3.org/TR/webstorage/>.
11
Appendix
[A] – The following is an example of HTML5 using some of its new semantics elements.
[B] – This is an example of a video element complete with attributes, tracks, and multiple
sources.
[C] – This is an example of an audio element. The element contains multiple sources and is set to
autoplay as well as loop.
[D] – This is an example of using an input attached to a datalist.
12
[E] – The following is an example of using a form with one input set to not validate via the
formnovalidate attribute. In addition the lastname field is required for the given form.
[F] – This is an example of using keygen in a form to use rsa encryption on an input field.
[G] - The following is an example of finding a product of two operands using the output element
of a form.