SOFTWARE ARCHITECTURES

1

Chapter 1 – HTML5

Anh Au

Summary

In this chapter, we cover HTML5 and the specifications of HTML5. HTML takes a major part

in defining the Web platform. We will cover high level concepts, the history of HTML, and

famous HTML implementations. This chapter also covers how this system fits into a larger

application architecture. Lastly, we will go over the high level architecture of HTML5 and cover

HTML5 structures and technologies.

Introduction

High level concepts – what is the basic functionality of this system

HyperText Markup Language (HTML) is the markup language used by to create, interpret, and

annotate hypertext documents on any platform. HTML5 is the fifth and latest standard for

HTML. It is enhanced to provide multimedia and interactive content without needing additional

plug-ins.1 The current version more easily and effectively supports the creation of web

applications that are able to work with the user, the user’s local data, and server.

Glossary

CERN European Organization for Nuclear Research

CSS Cascading Style Sheets

A style sheet language used for describing the look and formatting of

a document written in a markup language

DOM Document Object Model

A cross-platform and language-independent convention for

representing and interacting with objects in HTML, XHTML, and

XML documents

DTD Document Type Definition

A set of markup declarations that define a document type for an

SGML-family markup language

GPU Graphics Processing Unit

HyperText Text displayed on a computer display with hyperlinks to other text

which the reader can immediately access

IETF Internet Engineering Task Force

Develops and promotes Internet standards

Internet A global system of interconnected computer networks that use the

standard Internet protocol suite to link several billion devices

worldwide

JS JavaScript

The scripting language of the Web

Markup

language

Modern system for annotating a document in a way that is

syntactically distinguishable from the text

PHP PHP: Hypertext Preprocessor

SOFTWARE ARCHITECTURES

2

A server-side scripting language designed for web development

RTC Real-Time Communication

SGML Standard Generalized Markup Language

Used for defining generalized markup languages for documents

W3C World Wide Web Consortium

The main international standards organization for the World Wide

Web

WHATWG Web Hypertext Application Technology Working Group

A community of people interested in evolving HTML

XHTM L Extensible HyperText Markup Language

A family of XML markup languages that extends versions of HTML

XML Extensible Markup Language

A markup language that defines a set of rules for encoding documents

in a format that is both human-readable and machine-readable

SOFTWARE ARCHITECTURES

3

History

Although the origin of the Internet began around the 1960s, the field of academia began to utilize

the Internet in the 1980s. Progressing into the 1990s, the increasing popularity of the Internet

had created an impact on cultures and businesses everywhere.

CERN researchers were

looking for a system that would

the central location where

documents could be created

and shared. The idea came to

be ENQUIRE in 1980. In

1989, physicist and CERN

contractor Tim Berners-Lee

incorporated the ever-growing

Internet into the ENQUIRE

system. He suggested a

hypertext system that would

use hyperlinks connecting to

the Internet. By late 1990,

Berners-Lee created HTML

and the browser and server

software. 2

Figure 1. ENQUIRE Proposal9

In late 1991, Berners-Lee first publicly defined HTML on the Internet. At the time, HTML

contained only 18 elements. He stated that HTML was an application of the Standard

Generalized Markup Language (SGML). Several concepts were borrowed from SGML such as

element types formatting with a start tag, content, and an end tag, element attributes, character

references, and comments.

Figure 2a. Sample SGML markup 10 Figure 2b. Sample HTML markup 12

SOFTWARE ARCHITECTURES

4

Because of the widespread

usage of HTML, an IETF

working group was formed to

develop IETF specifications

for HTML. In 1995, HTML

2.0 was released as the

suggested standard for future

HTML uses. The HTML 2.0

specification formalized

HTML capabilities and

introduced new features like

form-based file upload, tables,

client-side image maps, and

internationalization. 3

Figure 3. Sample of HTML 2.0 13

HTML 3.0 was drafted and proposed in April 1995. The HTML 3.0 proposal expired without

approval from the IETF. The increase in web browser development contributed to the failure of

the HTML 3.0 proposal. 22 Since the IETF working group for HTML 2.0 closed in September

1996, HTML 3.2 was released by W3C in January 1997. Features that were added in HTML 3.2

specification were tables, applets, and text flow around images. Mathematical formulas were

purposely not included in this version. 23

Figure 4. Sample of HTML 3.2 11

SOFTWARE ARCHITECTURES

5

In December 1997, HTML 4.0 was released as a W3C recommendation. HTML 4.0 featured

more multimedia options, scripting languages, style sheets, and documents were made to be

more accessible to users with disabilities. This version began specifying <!DOCTYPE>

declarations that were to be included at the beginning of each HTML document. This

declaration is an instruction for the web browser indicating which version of HTML the page is

written in. The three document type definitions were strict, transitional, and frameset. Users

were recommended to use the Strict DTD whenever possible since the Strict DTD excluded

presentation attributes and elements, but users could use the Transitional DTD when support for

the presentation attributes and elements were required. The Frameset DTD was similar to the

Transitional DTD except that the “FRAMESET” element was used in place of the “BODY”

element. 24

The subversion HTML 4.01 was released in 1999. Some errata were changes to the DTDs, new

style sheets, document scripts, and global structure of a HTML document. 25

Figure 5. Sample of HTML 4.01

In 2004, the Web Hypertext Application Technology Working Group (WHATWG) began

developing HTML5. With the collaboration with the W3C, HTML5 was completed in 2008. 1

HTML5 was designed to replace HTML4, XHTML, and the HTML Dom Level 2. New features

included new elements, new attributes, full CSS4 support, video and audio, 2D/3D graphics,

local storage, local SQL database, and web applications. HTML5 is also cross-platform.

Figure 6. HTML5 is designed to be supported on PCs, tablets, and smartphones 16

SOFTWARE ARCHITECTURES

6

Famous system implementations

Since every browser vendor provides HTML5 support and HTML5 has become the only truly

cross-platform application environment, there are billions of examples of HTML.

Open source blogging tools, such as WordPress, are an example of HTML implementations. In

conjunction with CSS and PHP, WordPress themes and posts use these languages to change the

aesthetics and functionality of a WordPress website.

In 2011, Facebook had two focuses - HTML5 and mobile. Facebook’s Chief Technology

Officer, Bret Taylor, saw the two focuses as very interrelated concepts. Taylor claimed

HTML5 as the future of mobile. Since it was ideal to keep Facebook consistent on desktop site

and on mobile, Facebook took after the HTML5 trend. There were even internal teams devoted

to creating HTML5 Facebook games! 5

RuneScape, one of the most famous massively multiplayer online role-playing games, developed

an HTML5 version in 2012. Originally written in an interpreted domain-specific scripting

language, the makers of Runescape transitioned the game to have the ability to be played on

“your favourite tablets, platforms and even smart TVs.” The decade-old browser game

experimented with the HTML5 graphics engine that provided impressive visuals. 6

Figure 7. RuneScape HTML5 comparison 20

How does this system fit into a larger application architecture?

Since the beginning of software development, the application’s function and experience versus

the application’s distribution and access have been on opposite ends of the software development

spectrum. The perfect software application model would maximize both of these two features.

As shown in the figure below, multiple generations of different software architecture have passed

as the ideal software architecture generation is in the near future.

Mainframe marked the beginning of the software architecture evolution with the server,

keyboard, and monochrome screen. Mainframe had a low user experience but a high application

access. In the second generation, the Client/Server model increased the user experience

significantly by moving all of the application logic to the client side but decreased application

distribution. By the third generation, instant access and an update of a server-driven application

with better user interfaces was granted by the Web.

SOFTWARE ARCHITECTURES

7

In the current generation, the Mobile Apps model acted as the successor to the Client/Server

model. This model is successful for games and other consumer applications. Although this

model is a more efficient platform for users to use their applications, limitations such as platform

dependency were still inherited by its predecessor. Therefore, some aspects of the Mobile Apps

model still lose to the Web model.

While the current mobile apps market trend is taking up society’s attention, the biggest Internet

providers are competing to master HTML5. In the present, the latest version of every browser

has complete HTML5 support. Even though the number of devices being introduced is always

increasing, HTML5 has been proven to be the cross-platform application environment. If

executed correctly, a HTML5 application code can be distributed on the Web or by mobile apps.

As the impending fifth generation of the software architecture evolution, HTML5 will provide a

rich user experience and high instant deployment. 14

Figure 8. Software Architecture Evolution 14

Also as shown in the figure below, HTML fits in the SGML architecture. SGML and XML are

considered to be meta-languages - languages that are used to mark up languages. XML is a more

restricted subset of SGML. As discussed before, HTML was derived from SGML and is an

SGML vocabulary of SGML. XHTML is an application of XML and, hence, is a part of the

XML family.

SOFTWARE ARCHITECTURES

8

Figure 9. Relationship between SGML, HTML, XML, and XHTML 15

High Level Architecture

HTML5 is a large set of technologies that give users the ability to create more rich and powerful

web sites and applications. The high level structures of HTML5 include semantics,

connectivity, storage, multimedia, graphics, performance and integration, device access, and

styling.4 These structures contain different software elements and the relationship of the entities

make up the HTML5 software architecture.

Figure 10. HTML5 Enterprise Application Architecture 21

SOFTWARE ARCHITECTURES

9

Semantics 4

Semantics allows the user to describe more precisely what the content of the application is.

A semantic element describes its meaning to both the browser and the developer.

Figure 11. HTML5 Semantic Elements 8

Section and outlines 26

New elements were introduced to allow web developers to describe the web document structure

with standard semantics. By using the more precise HTML5 semantics, a web document outline

is more predictable and easier for the browser to comprehend.

Defining sections in HTML5 can be done in the main <body> element. Sections can be nested.

Headings ( <h1>, <h2>, <h3>, <h4>, <h5>, <h6>) have increasing rank and are used to define

the heading of the current section.

Four new outlining and sectioning element in HTML5: <aside>, <nav>, <header>, and <footer>.

The Aside section element defines a section that doesn’t belong to the main <body> flow and has

its own outline. The Navigational section element is also not part of the main <body> flow and

defines a section that contains navigation links (such as table of contents or site navigation). The

header and footer section elements define the page’s header and footer where logos or copyright

notices may be placed.

Forms 27

Web forms improvements were made in HTML5. Form elements and attributes provide a more

uniform experience for users that wish to make forms.

New value types for the <input> element were added - search (for search entry), tel (for editing a

telephone number), url (for editing a URL), and email (for entering an email address). Users can

further specify what type of control to display. The default type remained to be text if no

specific attribute was specified.

SOFTWARE ARCHITECTURES

10

Figure 12. Example form showing new value type: tel, email, url, and search 17

The <output> element was a new element added in HTML5. This element displayed the result

of a calculation based on the inputs or parameters of other elements in the document.

Connectivity 4

Connectivity allows the user to communicate with the server in more advanced ways.

Web Sockets 28

WebSockets API has the ability to create a permanent connection between the page and the

server. Non-HTML data can be exchanged without requesting the server for a response.

Server-Sent Events 29

The Server-Sent Event API allows a server to push events to a client instead of sending data only

when the server received a client request. Through Server-Sent Events, a web page can

automatically get updates from a server. Examples of this are social media updates, stock price

updates, sports results, etc.

Multimedia 4

HTML5 provides multimedia support with the <video> and <audio> elements. With the media

elements attributes, media can be easily embedded into web documents. The attributes check to

see if the media type is compatible with the browsers capabilities.

WebRTC 30

WebRTC allows audio and video streaming and data sharing between browser clients. This

SOFTWARE ARCHITECTURES

11

application is plugin-free and is used for teleconferencing. WebRTC components can be used

via JavaScript APIs and HTML5.

Figure 13. How WebRTC transfers voice, video, and data during teleconferencing 18

Graphics 4

2D and 3D graphics and effects allow a diverse range of presentation options. The new

<canvas> element can draw graphics through scripting.

WebGL 31

The Web Graphics Library (WebGL) brings 3D graphics to the Web by introducing an

JavaScript API that can be used in HTML5 <canvas> elements. Interactive 2D and 3D graphics

can be drawn with supported web browsers without the need of plug-ins. WebGL programs run

from control and special effects code that is executed on the computer’s GPU.

SVG 32

Scalable Vector Graphics (SVG) is an XML-based format of vectorial images that can directly

be embedded in the HTML. To provide enhanced HTML pages or web applications, SVG works

together with HTML, CSS, and JavaScript.

Data Format & Web Storage 4

In earlier versions of HTML, cookies were used to store data locally. With HTML5, web pages

can store data on the client-side locally within the user’s browser and operate offline more

efficiently. Web Storage is more secure and faster since data is used only when requested by the

server. Large amounts of data can be stored without affecting the web page’s performance.

Application Caching 33

Application caching allows applications to become an offline resource. The AppCache interface

specifies what the browser should cache in order to make the data available to offline users. The

benefits of application caching are offline browsing, speed, and reduced server load.

SOFTWARE ARCHITECTURES

12

Figure 14. Offline experience with AppCache 19

DOM Storage 34

Client-side session and persistent storage allows web applications to store structured data on the

client side. DOM Storage is designed to provide a larger storage limit, a more secure storage,

and an alternate information storage rather than cookies. Data is stored in name/value pairs and

can only be accessed by the web page that stored the data.

IndexedDB 35

IndexedDB is a web standard for the storage and high performance searches of large amounts of

structured data in the browser. IndexedDB is a transactional database system which lets the user

store and retrieves objects that are indexed with a key. The user then needs to specify the

database schema, open a connection to the user’s database, and then retrieve and update data

within a series of transactions. While a user can access stored data within a domain, the user

cannot access data across different domains. There is not a limit on an item’s size within the

database, but each IndexedDB database may be limited in total size.

Using files from web apps 36

The new HTML5 File API support makes it possible for web applications to access local files

selected by the user and read the files contents. This includes support for selecting multiple files

using the <input> element's new multiple attributes.

Performance and integration 4

The goal of performance and integration is providing greater speed optimization and better usage

of computer hardware.

Web Workers 37

Usually when scripts are executed in an HTML page, the page is unresponsive until the

SOFTWARE ARCHITECTURES

13

script is done. With web workers, the performance of the page is not affected. Web

workers are JavaScript evaluations to background threads and runs independently of

other scripts. Web workers actually prevent the threads from slowing down interactive

events.

Device Access 4

Device access allows for the usage of various input and output hardware devices through device

APIs. A common example of this is the Camera API. After the user activates the <input>

element with type = “file” and chooses the device camera, this allows the device’s camera to take

and upload pictures to the current web page.

Geolocation 38

The Geolocation API lets browsers locate the position of the user using their provided location.

To ensure privacy, users are asked for permission before reporting their location information.

Touch Events 39

Touch events are handlers to react to events created by a user pressing touch screens or

trackpads. A surface is considered a touch-sensitive surface. A touch point is a point of contact

with the surface. Touch events have several interfaces from Touch (a single point of contact),

TouchEvent (an event when the state of touches on the surface changes), TouchList (a group of

touches), and DocumentTouch (contains methods for creating Touch and TouchList objects).

Styling (Templating) 4

Styling allows authors to create more sophisticated themes. CSS has been improved to be able to

style more complex elements. With HTML5, CSS has new background styling features, more

fancy borders, animations, and new presentational layouts.

HTML5 For Applications 7

According to “Understanding HTML5 for Applications” by Jeremy Chone, any Web user

interface has the following HTML flow.

First, data exists in databases, file systems, or even Web services.

Upon a specific request, data logic extracts and organizes the data needed to serve the

request into a data model to be rendered to the user.

Then, the model is combined with a template to generate the HTML that the browser will

ultimately display to the user.

Before and/or after the content is displayed, behavior logic is "attached" to the HTML

document.

Upon user interaction, the behavior logic handles the interaction by eventually updating

all or part of the application by restarting the flow entirely or partially.

SOFTWARE ARCHITECTURES

14

Figure 15. HTML Application Flow Chart 7

HTML5 capability to interact with the client versus the server has evolutionized since the Web

model. Although using client and server produces the best results, it is now possible to create

full applications with the DOM without a server if needed.

Because of the iterative and dynamic nature of Web specifications, Web specifications have

become implementation-driven.

Figure 16. What makes up HTML5 and what features it has 7

SOFTWARE ARCHITECTURES

15

References

[1] http://www.w3schools.com/html/html5_intro.asp

[2] http://www.w3.org/History/1989/proposal.html

[3] https://tools.ietf.org/html/rfc1866

[4] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5

[5] http://techcrunch.com/2011/01/27/facebook-bret-taylor/

[6] http://www.eurogamer.net/articles/2012-08-30-mmo-runescape-being-developed-for-tablets-

smart-tvs-and-other-platforms

[7] http://britesnow.com/blog/understanding-html5-for-applications

[8] http://www.w3schools.com/html/img_sem_elements.gif

[9] http://www.w3.org/History/1989/proposal-msw.html

[10] http://en.wikipedia.org/wiki/File:OED-LEXX-Bungler.jpg

[11] http://www.irt.org/articles/js148/723x387xmodule.gif.pagespeed.ic.YO23tRb60b.png

[12] http://www.radford.edu/~rstepno/coms326/picoclip400w.png

[13] http://www.w3.org/MarkUp/html-spec/html-spec.txt

[14] http://britesnow.com/blog/software-architecture-evolution-mobile-apps-to-html5

[15] http://www.uni-potsdam.de/u/zeik/kurse/HTML-Tutorial/beziehungen.htm

[16] http://canvaskite.com/wp-content/uploads/2014/02/crossp-platform-mobile-app-

development-company1.png

[17] http://developersmix.files.wordpress.com/2011/08/html5-form.jpg

[18] http://twimgs.com/nojitter/ehk/13may/Kelly_webrtc_F1.png

[19] http://vincenthomedev.files.wordpress.com/2011/12/image1.png

[20] http://www.dpsvip.com/images/news/picture%20comparison.jpg

[21] http://britesnow.com/html5/html5-application-architecture

[22] http://www.w3.org/MarkUp/html3/CoverPage

[23] http://www.w3.org/TR/REC-html32

[24] http://www.w3.org/TR/REC-html40-971218/

[25] http://www.w3.org/TR/html401/

[26] https://developer.mozilla.org/en-

US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document

[27] https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms_in_HTML

[28] https://developer.mozilla.org/en-US/docs/WebSockets

[29] https://developer.mozilla.org/en-US/docs/Server-sent_events/Using_server-sent_events

[30] https://developer.mozilla.org/en-US/docs/WebRTC

[31] https://developer.mozilla.org/en-US/docs/Web/WebGL

[32] https://developer.mozilla.org/en-US/docs/Web/SVG

[33] https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache

[34] https://developer.mozilla.org/en-US/docs/DOM/Storage

[35] https://developer.mozilla.org/en-US/docs/IndexedDB

[36] https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

[37] https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers

[38] https://developer.mozilla.org/en-US/docs/Using_geolocation

[39] https://developer.mozilla.org/en-US/docs/DOM/Touch_events