A

Industrial Training

ON

“Introduction To HTML5”

Submitted in

Partial Fulfillment for the Award of the

Degree of

Bachelor of Technology

IN

Computer Science and Technology

(Session 2020-2021)

Submitted To: Submitted By:

Abhishek Soni Smriti Gautam

Assistant Professor, Department of IT 4th year

Department of CSE AND IT

GOVERNMENT ENGINEERING COLLEGE, JHALAWAR

Chandlai, Sunel Road, Tehsil - Jhalrapatan, Jhalawar, Rajasthan 326023

1
CERTIFICATE

2
 DECLARATION

I, hereby declare that this submission is my own work and that to the best of our
own knowledge and belief, it contains no material previously published or written
by another person nor material which to a substantial extent has been accepted for
the award of any other degree or diploma of the university or other institute of
higher learning, except where due acknowledgement has been made in the text.

I also declare that I own the full responsibility for the information, results etc.
provided in this INDUSTRIAL TRAINING REPORT titled “INTODUCTION TO
HTML5” submitted to GOVT. ENGINEERING COLLEGE JHALAWAR for the
award of B.Tech and Computer Science degree.

22nd December 2021 Smriti Gautam

18E1EJCSF40P025 B.Tech 4th Year 7th Sem
Signature 18EEJCS025

3
 PREFACE

Every student of Bachelor of Technology in Computer Science and Engineering,

has an essential requirement to do 30 days of internship in any of the well reputed
organization. The purpose of this program is to acquaint the students with practical
applications of theoretical concepts taught to them during conduct of their course.

Really, it was a nice opportunity to have a close comparison of theoretical concepts

in practical field. This report may depict deficiencies on my part but still it is an
output of student’s effort, for which I beg pardon.

The output of my analysis is summarized in a shape of Internship the contents of

the report Shows the detail of sequence of these.

4
 ACKNOWLEDGEMENT

It gives us a great sense of pleasure to present the report during B.tech Fourth Year.
I owe special gratitude to Mr. Abhishek Soni Department of Computer Science &
Engineering, Govt. Engineering College Jhalawar, for his constant support and
guidance throughout the course of our work. His sincerity, thoroughness and
perseverance have been a constant source of inspiration for us. It is only his
cognizant efforts that our endeavors have seen the light of the day.

I also do not like to miss the opportunity to acknowledge the contribution of all the
faculty members of the department for their kind assistance and cooperation during
the development of our project.

Last but not the least; I would like to thank all the staff of coursera, family for being
so helpful during this summer training.

Smriti Gautam

B.Tech 4th year 7th sem

CSE

18EEJCS025

18E1EJCSF40P025

5
 ABSTRACT

Hypertext Markup Language (HTML) is the standard markup language for

documents designed to be displayed in a web browser. It can be assisted by
technologies such as Cascading Style Sheets (CSS) and scripting languages such as
JavaScript. HTML5 is the newest revision of the HTML standard developed by the
World Wide Web Consortium (W3C). This new standard adds several exciting news
features and capabilities to HTML.

HTML5 is currently under development as the next major revision of the HTML
standard. Like it’s the immediate predecessors, HTML 4.01 and XHTML 1.1,
HTML5 is a standard for the structuring and presenting content on the World Wide
Web. The new standards incorporate features like video playback and drag-and-drop
that have been previously dependent on third-party browser plug-ins such as Adobe
Flash, Microsoft Silverlight, and Google Gears.

In addition to specifying markup, HTML5 specifies scripting application

programming interfaces (APIs). Existing document object model (DOM) interfaces
are extended and facto features documented. There are also new APIs, such as
canvas element for immediate mode 2D drawing, timed media playback, offline
storage databases, document editing, drag-and-drop, cross-document messaging,
browser history management, MIME type and protocol handler registration,
Microdata Geolocation etc.

6
 TABLE OF CONTENTS

DECLARATION…………………………………………………………….3

PREFACE…………………………………………………………...……….4

ACKNOWLEDGEMENT……………………………………………………5

ABSTRACT…………………………………………………………………..6

LIST OF FIGURES……………………………………………………...……8

Chapter 1. INTRODUCTION……………………………………..…………10

Chapter 2. HTML5 STRUCTURE……………………………………..…….12

2.1 Structure……………………………………………………….….12

2.2 Basic Components…………………………………………..…….13

Chapter 3. NEW TAGS IN HTML5…………………………………………..17

Chapter 4. HTML5 vs HTML4………………………………………………..23

4.1 HTML5 difference with HTML4………………………………….24

Chapter 5. Limitations of HTML………………………………………………25

Chapter 6. Implementations……………………………………………………26

6.1 Supported Browsers/Platforms…………………………………….26

6.2 Features of HTML…………………………………………………27

Chapter 7. Conclusions…………………………………………………………28

References…………………………………………………………………..…..29

7
LIST OF FIGURES:

Figure 1.1 HTML5………………………………………………10

Figure 2.1 HTML4 Document Structure………………………...12

Figure 2.2 HTML5 Document Structure……...…………………13

Figure 4.1 HTML4 vs HTML5…………………………………..22

Figure 6.1 Supported Browsers…………………………………..26

8
LIST OF TABLES

Table 3.1 New Tags in HTML5………………………………………..15

Table 5.1 Browser Support……………………………………………..24

9
 CHAPTER 1
INTRODUCTION

Fig1.1 HTML5

HTML5 is a markup language used for structuring and presenting content on the World Wide
Web. It is the fifth and last major HTML version that is a World Wide Web Consortium (W3C)
recommendation. The current specification is known as the HTML Living Standard. It is
maintained by the Web Hypertext Application Technology Working Group (WHATWG), a
consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft).
HTML5 was first released in a public-facing form on 22 January 2008, with a major update and
"W3C Recommendation" status in October 2014. Its goals were to improve the language with
support for the latest multimedia and other new features; to keep the language both easily
readable by humans and consistently understood by computers and devices such as web
browsers, parsers, etc., without XHTML's rigidity; and to remain backward-compatible with
older software. HTML5 is intended to subsume not only HTML 4 but also XHTML 1
and DOM Level 2 HTML.
HTML5 includes detailed processing models to encourage more interoperable implementations;
it extends, improves, and rationalizes the markup available for documents and introduces markup
and application programming interfaces (APIs) for complex web applications. For the same
reasons, HTML5 is also a candidate for cross-platform mobile applications because it includes
features designed with low-powered devices in mind.
Many new syntactic features are included. To natively include and
handlemultimediaand graphical content,thenew , <video><audio> and <canvas> elements were
added, expandable sections are natively implemented through <summary>…<summary> and
<details>…<details> rather than depending on CSS or JavaScript, and support for scalable

10
vector graphics (SVG) content and MathML for mathematical formulas was also added. To
enrich the semantic content of documents, new page structure elements such as <main>,
<section>,<article>,<header>,<footer>,<aside> ,<nav>and<figure>areadded.
New attributes were introduced, some elements and attributes were removed, and others such as
<a>,<cite> and<menu> were changed, redefined, or standardized. The APIs and Document
Object Model (DOM) are now fundamental parts of the HTML5 specification, and HTML5 also
better defines the processing for any invalid documents.

History of HTML till now:

The Web Hypertext Application Technology Working Group (WHATWG) began work on the
new standard in 2004. At that time, HTML 4.01 had not been updated since 2000, and the World
Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In 2009,
the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew it.
The Mozilla Foundation and Opera Software presented a position paper at a World Wide Web
Consortium (W3C) workshop in June 2004, focusing on developing technologies that are
backward-compatible with existing browsers,] including an initial draft specification of Web
Forms 2.0. The workshop concluded with a vote—8 for, 14 against—for continuing work on
HTML. Immediately after the workshop, WHATWG was formed to start work based upon that
position paper, and a second draft, Web Applications 1.0, was also announced. The two
specifications were later merged to form HTML5. The HTML5 specification was adopted as the
starting point of the work of the new HTML working group of the W3C in 2007.
WHATWG's Ian Hickson (Google) and David Hyatt (Apple) produced W3C's first public
working draft of the specification on 22 January 2008.
In July 2012, WHATWG and W3C decided on a degree of separation. W3C will continue the
HTML5 specification work, focusing on a single definitive standard, which is considered as a
"snapshot" by WHATWG. The WHATWG organization continues its work with HTML5 as a
"living standard". The concept of a living standard is that it is never complete and is always being
updated and improved. New features can be added but functionality will not be removed.
In December 2012, W3C designated HTML5 as a Candidate Recommendation. The criterion for
advancement to W3C Recommendation is "two 100% complete and fully interoperable
implementations".
On 16 September 2014, W3C moved HTML5 to Proposed Recommendation. On 28 October 2014,
HTML5 was released as a W3C Recommendation, bringing the specification process to
completion. On 1 November 2016, HTML 5.1 was released as a W3C Recommendation. On 14
December 2017, HTML 5.2 was released as a W3C Recommendation.

11
 CHAPTER 2
HTML5 STRUCTURE

2.1 STRUCTURE
HTML5 introduces a whole set of new elements that make it much easier to structure pages. Most
HTML4 pages include a variety of common structures, such as headers, footers and columns and
today, it is fairly common to mark them up using di elements, giving each a descriptive id or class.

Fig2.1: HTML4 Document Structure

Diagram illustrates a typical two-column layout marked up using divs with id and class attributes.
It contains a header, footer, and horizontal navigation bar below the header. The main content
contains an article and side bar on the right.

12
The use of div elements is largely because current versions of HTML4 lack the necessary
semantics for describing these parts more specifically. HTML5 addresses this issue by introducing
new elements for representing each of these different sections.

Fig 2.2 HTML5 document structure

As you can notice above the HTML5 page is very simple yet also very clean, HTML5 has plenty
of new elements which effectively make it easier to structure pages and also helps browsers
have more control as to how the web pages are displayed. Once all the big named browsers are
compatible with HTML5 you should notice faster loading times, easier navigation and much
richer content. HTML5 introduces a set of new elements that makes it easy to structure your
page through the use of tags like: <header>, <nav>, <article>, <aside>, <footer>, etc.

2.2 Basic Components of HTML5 Documents:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="utf-8">
<meta name="description" content="document description">
<meta name="keywords" content="keyword1,keyword2,keyword3">
<title>Title of the page</title>
<link rel="stylesheet" href="docstylesheet.css">
</head>
<body>
<header>
<h1>Main title of the site</h1>
</header>

13
<nav>
<ul>
<li>home</li>
<li>profile</li>
<li>images</li>
<li>about</li>
</ul>
</nav>

<section>

<article>
<header>
<hgroup>
<h2>Post 1 title</h2>
<h3>Subtitle of the post 1</h3>
</hgroup>
<p>posted 16-05-2012</p>
</header>
text of my post 1
<figure>
<img src="mypic.jpg">
<figcaption>
This is the photo of the first post
</figcaption>
</figure>
<footer>
<p>comments (0)</p>
</footer>
</article>

<article>
<header>
<hgroup>
<h2>Post 2 title</h2>
<h3>Subtitle of the post 2</h3>
</hgroup>
<p>posted 16-05-2012</p>
</header>
This is the text of the second post
<footer>
<p>comments (0)</p>
</footer>
</article>

</section>

14
<aside>
<blockquote>Post One</blockquote>
<blockquote>Post Two</blockquote>
</aside>

<footer>
Copyright &copy; 2011-2012
</footer>

</body>
</html>

Here is the list of what we consider the most relevant:

<header> – This element represents a set of introductory aids and can be applied to different
sections of the document. It is intended to contain the section’s headings, but also could be
used to wrap indexes, search forms, logos, etc.
<nav> – This element indicates a section of links that have navigational purposes, such as
menus or indexes. Not all the links in a web page have to be inside a <nav> element; only
those parts of major navigation blocks must be.
<section> – This element represents a generic section in the document. It is usually used to
build several blocks of content (for example, columns) in order to group content that shares a
specific theme, such as chapters or pages of a book, groups of news articles, a set of articles ,
etc.
<aside> – This element represents content that is related to the main content but not part of it.
Examples might be quotations, information on side bar,advertising, etc.
<footer> – This element represents additional information related to its parent element. For
example, a footer inserted at the end of the body will provide additional information about the
document, like a regular footer of a page. The element can be used not only for the <body>
but also inside different sections in the body, providing additional information about those
specific sections.
<article> – This element represents a self-contained portion of relevant information; for
example, every article of a newspaper or every entry of a blog. The <article> element can be
nested and used to show a list within a list of related items; for example, users’ comments in a
blog entry.
<hgroup> – This element is used to group a set of H elements when the heading has multiple
levels; for example, a heading with a title and a subtitle.
<figure> – This element represents an independent portion of content (for example, images,
diagrams or videos) that is referred to in the main content. This is information that could be
removed from the main content without affecting its normal flow.
<figcaption> – This element is to show a caption or legend to be used along with the
<figure> element. An example is the description of an image.
<mark> – This element highlights a text that has relevance in a particular situation or that is
shown in response to user’s input.

15
<small> – This element represents side comments, such a small print (for example,
disclaimers, legal restrictions, copyrights).
<cite> – This element is used to show the title of a work (book, movie, poem, etc).
<address> – This element encloses contact information for an <article> or the entire
document. It should be inserted within a <footer>.

16
 CHAPTER 3
NEW TAGS IN HTML5

The previous/current version of HTML in HTML 4.01. Here is the list of HTML 4.01 tags.

Tag Description New in HTML5?

<!--...--> Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor

<abbr> Specifies an abbreviation

<address> Specifies an address element

<area> Specifies an area inside an image map

<article> Specifies an independent piece of content of a document, NEW

such as a blog entry or newspaper article

<aside> Specifies a piece of content that is only slightly related to NEW

the rest of the page.

<audio> Specifies an audio file. NEW

<b> Specifies bold text.

<base> Specifies a base URL for all the links in a page

<bb> Specifies a user agent command NEW

<bdo> Specifies the direction of text display

<blockquote> Specifies a long quotation

17
<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> This is used for rendering dynamic bitmap graphics on the NEW
fly, such as graphs or games.

<caption> Specifies a table caption

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<command> Specifies a command the user can invoke. NEW

<datalist> Together with the a new list attribute for input can be used NEW
to make comboboxes

<dd> Specifies a definition description

<del> Specifies deleted text

<details> Specifies additional information or controls which the user NEW

can obtain on demand.

<div> Specifies a section in a document

<dl> Specifies a definition list

<dt> Specifies a definition term

<embed> Defines external interactive content or plugin. NEW

<fieldset> Specifies a fieldset

<figure> Specifies a piece of self-contained flow content, typically NEW

referenced as a single unit from the main flow of the
document.

<b> Specifies bold text

18
<i> Specifies italic text

<small> Specifies small text

<footer> Specifies a footer for a section and can contain information NEW
about the author, copyright information, et cetera.

<form> Specifies a form

<head> Specifies information about the document

<header> Specifies a group of introductory or navigational aids. NEW

<hgroup> Specifies the header of a section. NEW

<h1> to <h6> Specifies header 1 to header 6

<hr> Specifies a horizontal rule

<html> Specifies an html document

<iframe> Specifies an inline sub window (frame)

<ilayer> Specifies an inline layer

<img> Specifies an image

<input> Specifies an input field

<ins> Specifies inserted text

<keygen> Specifies control for key pair generation. NEW

<keygen> Generate key information in a form

<label> Specifies a label for a form control

<layer> Specifies a layer

<legend> Specifies a title in a fieldset

<li> Specifies a list item

19
<link> Specifies a resource reference

<map> Specifies an image map

<mark> Specifies a run of text in one document marked or NEW

highlighted for reference purposes, due to its relevance in
another context.

<marquee> Create a scrolling-text marquee

<meta> Specifies meta information

<meter> Specifies a measurement, such as disk usage. NEW

<multicol> Specifies a multicolumn text flow

<nav> Specifies a section of the document intended for NEW

navigation.

<nobr> No breaks allowed in the enclosed text

<noembed> Specifies content to be presented by browsers that do not

support the <embed>tag

<noscript> Specifies a noscript section

<object> Specifies an embedded object

<ol> Specifies an ordered list

<optgroup> Specifies an option group

<option> Specifies an option in a drop-down list

<output> Specifies some type of output, such as from a calculation NEW

done through scripting.

<p> Specifies a paragraph

<param> Specifies a parameter for an object

<cite> Specifies a citation

20
<code> Specifies computer code text

<dfn> Specifies a definition term

<em> Specifies emphasized text

<kbd> Specifies keyboard text

<samp> Specifies sample computer code

<strong> Specifies strong text

<var> Specifies a variable

<pre> Specifies preformatted text

<progress> Specifies a completion of a task, such as downloading or NEW

when performing a series of expensive operations.

<q> Specifies a short quotation

<ruby> Together with <rt> and <rp> allow for marking up ruby NEW
annotations.

<script> Specifies a script

<section> Represents a generic document or application section. NEW

<select> Specifies a selectable list

<spacer> Specifies a white space

<span> Specifies a section in a document

<style> Specifies a style definition

<sub> Specifies subscripted text

<sup> Specifies superscripted text

<table> Specifies a table

<tbody> Specifies a table body

21
<td> Specifies a table cell

<textarea> Specifies a text area

<tfoot> Specifies a table footer

<th> Specifies a table header

<thead> Specifies a table header

<time> Specifies a date and/or time. NEW

<title> Specifies the document title

<tr> Specifies a table row

<ul> Specifies an unordered list

<video> Specifies a video file. NEW

<wbr> Specifies a line break opportunity. NEW

<wbr> Indicate a potential word break point within a <nobr>

section

Table 3.1 New Tags in HTML5

22
 CHAPTER 4
HTML5 v/s HTML4

Fig 4.1 HTML4 v/s HTML5

4.1 HTML5 difference with HTML4

What is HTML4
HTML 4 is a markup language that was published in 1997 as a W3C Recommendation. HTML 4
is an extended version of HTML 3.2. It is a revision of the previous HTML and supports various
features like a scripting language, style sheets, embedding objects, richer tables, object support,
and other advanced accessibility features with special users who have a disability.

HTML 4 has powerful capabilities than the previous versions of HTML. It is established and is
standard and hence is compatible with numerous web-browsers. HTML 4 has high internalization
which helps to write documents in different languages and can be transported all over the world.

HTML 4 had the addition of access keys and has the potential to form groups of controls
semantically and other active labels. The structure and presentation in HTML 4 are better and with
the ability to even markup text descriptions. The elements in HTML4 document have three parts
– a start tag, content, and an end tag.

The elements in HTML 4 are case insensitive and can be written in any way. The attributes of the
elements can define the properties of that particular element. An ideal HTML 4 document will
begin with a DOCTYPE declaration and the element will contain a HEAD and a BODY. The
information is contained in the former while the latter contains the content of the document.

What is HTML5?
23
HTML is the fifth and the latest major version of HTML that is a WWW Consortium (W3C)
recommendation. It was released on 22nd January 2008. The objective of the new version was to
support the latest multimedia and bring forth other new features. The language become easy and
could be easily read by humans and integrated into computers and devices.

HTML 5 is the extended version of HTML 4. The new version not only subsumes HTML 4 but
also others like DOM Level 2 HTML and XHTML 1. It has detailed processing models and can
be easily implemented. It improves, extends, and rationalizes the HTML documents, API, and
other web applications.

There are several new syntactic features included in HTML 5. They are <video, audio, canvas. It
even has introduced new elements and attributes to reflect the typical usage on modern websites.
It is not based on SGML. HTML 5 supports backward-compatible and triggers the standard-
compliant rendering mode.

Main Difference Between HTML4 and HTML5

• HTML 4 uses <acronym> tag to display abbreviations of the web browser while HTML5
uses <abbr> tag to display the abbreviations in the web browser.

• HTML 4 is established and standard and is compatible with numerous different web-
browsers HTML 5 is evolving and is not compatible with different browsers.

• In HTML 4, the <meta> tag contains the schema attribute of the HTML document while
in HTML 5, the <mera> tag defines the header section of the HTML document.

• HTML 4 has no <canvas> tags while HTML 5 has introduced <canvas> tags which is
used to draw graphics using JavaScript.

• In HTML 4 the table tag has several attributes while in HTML 5, the table tag has only
one attribute that is the border.

24
 CHAPTER 5

LIMITATIONS OF HTML
All of us are aware of the latest version of HTML i.e. HTML5. Yes obviously HTML5 is a
considerable replacement of HTML4. The better coding system in HTML5 has enabled easy
input of media files in the website now. But we know that every coin has two sides. There are
few disadvantages of HTML5 which are given below and everyone should consider this points
before creating new website design using HTML5-

• Security – HTML5 is not must popular as such but its chances of replacing flash have
increased its chances of popularity. But security is a big problem with HTML5. As far as
now, HTML5 websites have to face a bit of security problems.
• Features – the features of HTML5 have not fulfilled the expectations of the web
developers. It was expected that it will be very much near to Flash but it doesn’t even
have 50% features of Flash. HTML5 is a higher version of HTML4 but doesn’t offer
features that are worth taking a note.
• Browser compatibility – HTML5 still lacks its compatibility with all the browsers. It is
still not supported by a few browsers. Thus, majority of the websites avoid the use of
HTML5 for coding. Very few have used HTML5 and others have it as their alternative
option. Also, the webpage developed on HTML5 sometimes appear different on different
browser.

5.1 BROWSER SUPPORT FOR SOME FEATURES

Chrome Firefox Internet Opera Safari

Explorer
Content Editable YES YES YES YES YES
Stylable Elements (new) YES YES NO YES YES
Get Elements By Class YES YES NO YES YES
Name
Cross-Document YES YES YES YES YES
Messaging
Web Forms 2.0 PARTIAL NO NO YES PARTIAL
Drag and Drop YES YES YES NO YES
<audio> NO 3.5 NO NO YES
<video> 3.0 3.5 NO Labs release, partial YES
<canvas> YES YES NO YES YES
Server-sent DOM Events NO NO NO PARTIAL NO
Table 5.1 Browser Supports

25
 CHAPTER 6

IMPLEMENTATION

YOUTUBE HTML5 VIDEO PLAYER

This is an opt-in experiment for HTML5 support on YouTube. If you are using a supported
browser, you can choose to use the HTML5 player instead of the Flash player for most videos.

6.1 Supported browsers / platforms:

Fig 6.1 Supported Browsers

• Google Chrome (latest version) — Windows, Mac OS X, iOS, Android

• Apple Safari (latest version) — Mac OS X, iOS
• Microsoft Internet Explorer 11+ — Windows
• Microsoft Edge (latest version) — Windows
• Mozilla Firefox (latest version) — Windows

26
6.2Features of HTML5:
Web languages need regular upgrades in order to stay current and solve new problems faced by
web developers. HTML5 is the latest version of HTML.

• Video.
• Figure.
• Section.
• Nav.
• Header.
• Footer.

27
 CHAPTER 7
CONCLUSION

HTML5 is the next version of Hyper Text Markup Language. It is developing by world wide
web consortium. Web is the commonly used medium to share and network nowadays. But for
more advanced features companies are building their own software. So it reduces the openness
and platform independence of the web technology. Aim of the HTML5 to make a common
platform for web with more advanced features like audio, video, etc.

It is really an ongoing process with browsers implementing different parts of it progressively so

it is not going to be all implemented at once and ready to go in one, the next few browsers other
features which are being worked on the moment and other are planned for, but still a few years
of yet. But it is gradually getting there. HTML5 isn’t a software release, or a web development
law. It’s a voted-upon and group-edited standard, written in broad fashion to accommodate
different styles of development and the different thinking among web browser makers.

Firefox, Safari, and Chrome on the desktop support a few of the styles and features outlined in
HTML5’s draft specifications like offline storage, canvas drawing, and most intriguingly tags for
audio and video that allow sites to stream multimedia files directly into a browser. Apple’s Safari
for iPhone and the Android browser also support elements of HTML5 as, does Opera Mobile.

28
 REFERENCES

HTML5 differences from HTML4 (http://w3.org/TR/html5-diff)

HTML: The Markup Language (http://w3.org/TR/html-markup)
The HTML5 Now Wiki (http://html5now.pbwiki.com)
The HTML5 Now Twitter (http://twitter.com/html5now)

29