Introduction To HTML5

A Seminar I report submitted in

partial fulfillment of the requirements

for the Degree of

Bachelor of Technology
in

Computer Engineering
Submitted by

Gite Aditya Mahendra

Guided by

Prof.B.D.Patil

DEPARTMENT OF COMPUTER ENGINEERING

S.S.V.P.S.’s B.S. DEORE COLLEGE OF ENGINEERING, DHULE
2022-23

1
 S.S.V.P.S.’s B.S. DEORE COLLEGE OF ENGINEERING,
DHULE
DEPARTMENT OF COMPUTER ENGINEERING

CERTIFICATE

This is to certify that the Seminar I entitled has been carried out by

Gite Aditya Mahendra

under my guidance in partial fulfillment of the degree of Bachelor of

Technology in Computer Engineering of Dr. Babasaheb Ambedkar
Technological University, Lonere during the academic year 2022-23. To the
best of my knowledge and belief this work has not been submitted
elsewhere for the award of any other degree.

Date:

Place: Dhule

Guide
Prof.B.D.Patil

Head Principal
Prof. B. R. Mandre Dr. Hitendra D. Patil

2
 ACKNOWLEDGEMENT

This Seminar I report has taken its current shape after a lot of hard work and
perseverance- not only just by me. I would like to express our sincere gratitude for the
assistance and support of a number of people who are helping to make this success.

Immeasurable appreciation and deepest gratitude are extended for the help and
support to Prof. B. R. Mandre, my guide for his guidance and enlightening comments
throughout the project work. It has been an altogether different experience to work with
him and I would like to thank for his helpful suggestion and numerous discussions. I
gladly take this opportunity to thank Prof. B.R. Mandre (Head Of Department, Computer
Engineering) and Dr. Hitendra D. Patil (Principal, SSVPS, BSD, College of Engineering,
Dhule) for providing facilities during progress of the thesis.

I wish to express my sincere thanks to Prof. B.D.Patil for his expert, sincere and
valuable guidance and encouragement extended to me.

I am also thankful to all those who helped us directly or indirectly to develop this
thesis and complete it successfully. Then I would like to thank all the Staff for their
encouragement. They had always been very prompt at extending in their helping hand
and sharing valuable technical knows. Special thanks to my Family and Friends.

Gite Aditya Mahendra

3
 Table of Contents

ABSTRACT.............................................................................................................................. 5
1. INTRODUCTION.............................................................................................................. 6
2. LITERATURE REVIEW ................................................................................................... 8
3. HISTORY……….……………………………………………………………………..10
3.1 Enhancing Semantic markup………………………………………………………10
3.2 Native Support for Multimedia…………………………………………………….10
3.3 Mobile Friendly Web Devlopment…………………………………………………11
3.4 Offline Web Application……………………………………………………………11
3.5 Standardization and Simplification………………………………………………...11
4. AIM OF HTML5………………………………………………………………………12
4.1 HTML5 Document Structure……………………………………………………...12
4.2 New Semantic Element……………………………………………………………12
4.3 Multimedia Integration…………………………………………………………….12
4.4 Canvas and Graphics………………………………………………………………13
4.5 Standardization and Simplification………………………………………...……...13
5. HTML5 STRUCTURE………………………………………………………………..14
6. CURRENT STATUS OF HTML5……………………………………………………..16
7. IMPLEMENTATION…………………………………………..……………………...18
7.1 Form Enhancement………………………………………………………………..18
7.2 Local Storage and Offline Functionality…………………………………….…….18
7.3 Mobile Responsivness………………………………………………….………….18
8. CONCLUTION…………………………………………………..……………………20
9. REFERENCES……………………………………………………..………………….21

4
 ABSTRACT

HTMLS is currently under development as the next major revision of the HTML standard.
Like its immediate predecessors, HTML 4.01 and XHTML 1.1, HTMLS is a standard for
snucturing and presenting content on the World Wide Web. The new standard
incorporates features like video playback and drag-and-drop that have been previously
dependent on third-party browser plug-ins such as Adobe Flash, Microsofi Silverlight,
and Google Gears.The HTMLS specification was adopted as the starting point of the
work of the new HTML working group of the World Wide Web Consortium (W3C) in 2007.
According to the W3C timetable, it is estimated that HTMLS will reach W3C
Recommendation.

5
 Chapter – 1
1. INTRODUCTION

HTML or Hypertext Markup Language is a formatting or scripting language that

programmers and developers use to create documents on the Web. You view a Web page
written in HTML in a Web browser such as Internet Explorer, Mozilla Firefox or Google
Chrome. The HTML language has specific rules that allow placement and format of text,
graphics, video and audio on a Web page. The web is constantly evolving. New and
innovative websites are being created every day, pushing the boundaries of HTML in every
direction. HTML 4 has been around for nearly a decade now, and publishers seeking new
techniques to provide enhanced functionality are being held back by the constraints of the
language and browsers. To give authors more flexibility and interoperability, and enable
more interactive and exciting websites and applications, HTML 5 introduces and enhances a
wide range of features including form controls, APls, multimedia, structure, and semantics.
HTMLS is the fifth revision of the HTML standard and as of April 2012 is still under
development. The latest edition HTMLS has enhanced features for programmers such as

<video>, <audio> and <canvas> elements. HTMLY, the latest version of Hypertext Markup
Language, has revolutionized the way we create and present web content. It is a markup
language used to structure the content on the World Wide Web and is supported by all
modern web browsers. HTMLS brings a plethora of new features and enhancements,
making it an essential tool for web developers. HTML5 introduces several key
improvements over its predecessor, HTML4. One of the most significant changes is the
inclusion of new semantic elements. These elements, such as “<header>", “<nav>",
“<section>", and “<article>", provide a more meaningful structure to web pages, making it
easier for search engines to understand and index the content. This enhanced structure also
benefits users with disabilities by allowing screen readers to navigate the page more
effectively.

6
In today's mobile-dominated world, having a responsive website is crucial for success.
HTMLS provides powerful tools and features that facilitate the creation of responsive
web designs, ensuring that your content looks great on any device, regardless of its
screen size. One of the key elements in building responsive web designs is the
introduction of media queries in HTMLS. Media queries allow you to apply different
styles and layouts based on the characteristics of the device or browser viewing the
page. By using media queries, you can adapt the design and optimize the user
experience for smartphones, tablets, and desktop computers, all from a single HTML
document. HTML5 also introduces the "“<picture>" element, which simplifies the
process of delivering optimized images for different devices. With the “<picture>"
element, you can provide multiple image sources with different resolutions and
formats, ensuring that the appropriate image is loaded based on the device's
capabilities. This helps reduce page load times and improves the overall performance

of your website. HTML5 also brings a set of powerful APIs (Application Programming
Interfaces) that enable developers to create interactive and dynamic web applications.
These APIs include the Geolocation API, which allows you to retrieve a user's location
information, the Canvas API for drawing graphics and animations, and the Web
Storage API for client-side data storage, among many others. These APIs open up a
whole new world of possibilities for creating feature-rich web experiences
Another notable feature of HTMLS is the addition of new multimedia elements.
With the “<audio>" and “<video>" elements, you can easily embed audio and video
content directly into your web pages, eliminating the need for third-party plugins like
Adobe Flash. This native support for multimedia not only simplifies development but
also improves compatibility across different devices and platforms.
.

7
 Chapter – 2

LITERATURE REVIEW
Work on HTML 5, which commenced in 2004, is currently being carried out in a joint
effort between the W3C HTML WG and the WHATWG. Many key players are
participating in the W3C effort including representatives from the four major browser
vendors: Apple, Mozilla, Opera, and Microsoft; and a range of other organizations and
individuals with many diverse interests and expertise. HTMLS is a specification for
how the web’s core language, HTML, should be formatted and utilized to deliver text,
images, multimedia, web apps, search forms, and anything else you see in your browser.
In some ways, it's mostly a core set of standards that only web developers really need to
know. In other ways, it's a major revision to how the web is put together. Not every web
site will use it, but those that do will have better support across modern desktop and

mobile browsers (that is, everything except Internet Explorer). HTMLS introduced several
notable advancements that have transformed web development. One significant
improvement is the inclusion of native support for multimedia elements such as video and
audio, eliminating the need for third-party plugins like Adobe Flash. This development
has facilitated the seamless integration of multimedia content into web pages, improving
user engagement and accessibility. Another important advancement is the introduction of
the Canvas element, which enables the rendering of graphics and animations directly
within the browser without relying on external technologies. This has opened up new
possibilities for creating rich visual experiences and interactive applications, including
games, data visualizations, and augmented reality.Furthermore, HTMLS introduced the
concept of Web Components, which allows developers to create reusable custom elements
and encapsulated components.Web Components enhance code modularity,

maintainability, and reusability, promoting more efficient and scalable web development
practices. Applications of HTML5: HTMLS5 has found applications across various
domains, greatly impacting the way

8
In the realm of mobile app development, HTMLS has enabled the creation of hybrid
apps. Using frameworks like Apache Cordova (previously known as PhoneGap),
developers can leverage HTMLS, CSS, and JavaScript to build cross-platform mobile
applications, reducing development time and cost. HTMLS5's offline storage
capabilities have also improved the user experience by enabling web applications to
function even without an active internet connection. Local storage, web storage, and
the Indexed Database API allow websites to storeand retrieve data locally, providing a
seamless experience in offline scenarios.Challenges and Limitations: Despite its
numerous benefits, HTML5 also poses certain challenges and limitations. One of the
primary concerns is browser compatibility. While major browsers have adopted
HTMLS5, variations in their implementation and support for specific features can lead
to inconsistencies in rendering and functionality. This necessitates careful
consideration and testing during development to ensure a consistent experience across
different platforms. Additionally, security concerns arise with the increased use of
client-side scripting and the storage of sensitive data in local storage or databases.
Developers must employ appropriate security measures, such as input validation and
encryption, to mitigate potential risks. Moreover, the evolving nature of HTML5 and
the introduction of new features can make it challenging for developers to stay up-to-
date with the latest best practices and standards. Continuous learning and staying
informed about updates and changes in HTMLS5 are crucial for developers to harness
its full potential. By establishing clear and standardized specifications, HTMLS5
aimed to ensureconsistent behavior and feature support across different platforms. This
objective aimed to simplify web development and improve the user experience by
minimizing discrepancies in rendering and functionality across browsers and devices.

9
 Chapter – 3
History

3.1 Enhancing Semantic Markup:

One of the primary aims of HTMLS5 is to provide a more robust and meaningful
markuplanguage. HTMLS introduces new semantic elements, such as “<header>",
“<footer>",“<article>’, and “<section>", which enable developers to structure web
content in amore semantically meaningful way. These elements enhance the
accessibility and search engine optimization (SEO) of web pages, making it easier for
search engines, screen readers, and other tools to understand and interpret web content
accurately.

3.2 Native Support for Multimedia:

HTMLS aimed to reduce dependence on third-party plugins, most notably Adobe Flash,
by providing native support for multimedia elements. The “<video>" and “<audio>"
tags introduced in HTMLS allow developers to embed multimedia content directly into
web pages, eliminating the need for additional plugins or software installations. This
objective sought to enhance the user experience, improve performance, and ensure
cross- platform compatibility for multimedia content on the web. Improving Cross-
Platform Compatibility: HTMLS aimed to address the challenges posed by the
fragmented web ecosystem, where different browsers and devices had varying levels of
support for web technologies. By establishing clear and standardized specifications,
HTMLS5 aimed to ensureconsistent behavior and feature support across different
platforms. This objective aimed to simplify web development and improve the user
experience by minimizing discrepancies in rendering and functionality across browsers
and devices.

10
3.3 Mobile-Friendly Web Development:
HTMLS aimed to address the growing importance of mobile devices in web usage.
The standardization process considered the needs of mobile web development,
focusing on responsive design principles. HTMLS provided the necessary tools and
techniques to create web pages that adapt fluidly to different screen sizes and
orientations, ensuring optimal user experiences across a wide range of devices. This
objective aimed to promote a mobile-first approach and improve accessibility in the
mobile era.

3.4 Offline Web Applications:

Another aim of HTMLS was to enable web applications to function offline. HTMLS
introduced various mechanisms for local storage, such as the localStorage and
IndexedDB APIs, allowing web applications to store and retrieve data locally on the
user’s device. This feature enabled web applications to continue operating even in the
absence of an active internet connection, improving user convenience and productivity.

3.4 Standardization and Simplification:

HTMLS aimed to streamline web development by standardizing the language and
reducing the need for proprietary technologies and plugins. By providing
comprehensive specifications and clear guidelines, HTMLS sought to simplify the
development process, promote interoperability, and foster a more consistent and
accessible web ecosystem. The aim was to create a single, widely adopted standard that
developers could rely on, reducing fragmentation and improving the stability and
longevity of web projects.

11
 Chapter – 4
Aim of HTML5

4.1 HTMLS Document Structure:

HTMLS introduced a simplified document structure, with a doctype declaration (*<!
DOCTYPE html>") that triggers standards mode in modern browsers. The basic
structure of an HTMLS document consists of the “<html>, "<head>", and “<body>
elements. Developers need to ensure that the document is properly structured, with
appropriate opening and closing tags, to adhere to the HTMLS standards.

4.2 New Semantic Elements:

HTMLS introduced a set of semantic elements that provide meaningful structure and
improve accessibility. Developers can utilize elements such as “<header>", "<nav>",
“<main>", “<article>", “<section>, “<footer>", and “<aside>" to give clearer
definitions to different sections of the web page. These semantic elements help search
engines and assistive technologies better understand the content and enhance the
overall user experience.

4.3 Multimedia Integration:

HTMLS5 offers native support for multimedia elements, eliminating the need for third-
party plugins like Adobe Flash. Developers can embed audio and video content using
the “<audio>" and “<video>" tags, respectively. To implement multimedia elements,
developers specify the source file, set attributes like autoplay, loop, and controls,
andprovide fallback content for browsers that do not support HTMLS multimedia.

12
4.4 Canvas and Graphics:
The “<canvas>" element in HTMLS enables developers to render graphics, animations,
and interactive visualizations directly within the browser using JavaScript. To
implement canvas-based graphics, developers use the HTMLS Canvas API, which
provides methods for drawing paths, shapes, text, images, and applying
transformations. By utilizing the canvas element and associated JavaScript, developers
can create rich visual experiences and interactive applications.

4.5 Standardization and Simplification:

HTMLS aimed to streamline web development by standardizing the language and
reducing the need for proprietary technologies and plugins. By providing
comprehensive specifications and clear guidelines, HTMLS sought to simplify the
development process, promote interoperability, and foster a more consistent and
accessible web ecosystem. The aim was to create a single, widely adopted standard that
developers could rely on, reducing fragmentation and improving the stability and
longevity of web projects.

13
 Chapter – 5
HTML5 Structure
STRUCTURE
HTML 5 introduces a whole set of new elements that make it much easier to structure
pages. Most HTML 4 pages include a variety of common snuctures, such as headers,
footers and columns and today, it is fairly common to mark them up using div
elements, giving each a descriptive id or class.

Fig.5.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 sidebar on the right. The use of div elements
is largely because current versions of HTML 4 lack the necessary semantics for
describing these parts more specifically. HTML 5 addresses this issue by introducing
new elements for representing each of these different sections. canvas-based graphics,
developers use the HTMLS Canvas API, which provides methods
for drawing paths, shapes, text, images, and applying transformations. By utilizing the
canvas element and associated JavaScript, developers can create rich visual
experiences and interactive applications.

14
There are several advantages to using these elements. When used in conjunction with
the heading elements (h1 to h6), all of these provide a way to mark up nested sections
with heading levels, beyond the six levels possible with previous versions of HTML.
The specification includes a detailed algorithm for generating an outline that takes the
structure of these elements into account and remains backwards compatible with
previous versions. This can be used by both authoring tools and browsers to generate
tables of contents to assist users with navigating the document.
For example, the following markup structure marked up with nested section arid hl
elements:
<section>
<h l >Level I </h 1 >
<section>
<h l >Level 2</h 1 >
<section>
<h 1 >Level 3</h l> Nsection> Nsection> Nsection>

For better compatibility with current browsers, it is also possible to make use of the
other heading elements (h2 to h6) appropriately in place of the h1 elements.
By identifying the purpose of sections in the page using specific sectioning elements,
assistive technology can help the user to more easily navigate the page. For example,
they can easily skip over the navigation section or quickly jump from one article to the
next without the need for authors to provide skip links. Authors also benefit because
replacing many of the divs in the document with one of several distinct elements can
help make the source code clearer and easier to author. The following are the new
structural elements introduced in HTMLS:Another notable feature of HTMLS is the
addition of new multimedia elements. With the “<audio>" and “<video>" elements,
you can easily embed audio and video content directly into your web pages,
eliminating the need for third-party plugins like Adobe Flash. This native support for
multimedia not only.

15
 Chapter – 6
Current status of HTML5

Given the looseness HTMLS supports and its de-emphasis of the XML approach to
markup, you might assume that HTMLS is a retreat from doing things in the right way
and an acceptance of “tag soup” as legitimate markup. The harsh reality is that, indeed,
valid markup is more the exception than the rule online. Numerous surveys have
shown that in the grand scheme of things, few Web sites validate. For example, in a
study of the Alexa Global Top 500 in January 2008, only 6.57 percent of the sites
surveyed validated. When sample sizes are increased and we begin to look at sites that
are not as professional, things actually get worse. Interestingly, Google has even larger
studies, and while t hey don’t focus specifically on validation, what they indicate on
tag usage indicates clearly that no matter the sample size, clean markup is more the
exception than the rule. Yet despite the markup madness, the Web continues to work. In
fact, some might say the permissive nature of browsers that parse junk HTML actually
helps the Web grow because it lowers the barrier to entry for new Web page authors.
Certainly a shaky foundation to build upon, but the stark reality is that we must deal
with malformed markup. To this end, HTMLS makes one very major contribution: it
defines what to do in the presence of markup syntax problems. Another notable feature
of HTMLS is the addition of new multimedia elements. With the “<audio>" and
“<video>" elements, you can easily embed audio and video content directly into your
web pages, eliminating the need for third-party plugins like Adobe Flash. This native
support for multimedia not only simplifies development but also improves

compatibility across different devices and platforms. canvas-based graphics,

developers use the HTMLS Canvas API, which provides methods for drawing paths,
shapes, text, images, and applying transformations. By utilizing the canvas element
and associated JavaScript, developers can create rich visual experiences and interactive
applications.

16
HTMLS introduced several notable advancements that have transformed web
development. One significant improvement is the inclusion of native support for
multimedia elements such as video and audio, eliminating the need for third-party
plugins like Adobe Flash. This development has facilitated the seamless integration of
multimedia content into web pages, improving user engagement and accessibility.
Another important advancement is the introduction of the Canvas element, which
enables the rendering of graphics and animations directly within the browser without
relying on external technologies. This has opened up new possibilities for creating rich
visual experiences and interactive applications, including games, data visualizations,
and augmented reality.Furthermore, HTMLS introduced the concept of Web
Components, which allows developers to create reusable custom elements and
encapsulated components.Web Components enhance code modularity, maintainability,
and reusability, promoting more efficient and scalable web development practices.
Applications of HTML5: HTMLS5 has found applications across various domains,
greatly impacting the way we interact with web content. Responsive web design, made
possible by HTMLS5, allows websites to adapt and provide an optimal viewing
experience across different devices and screen sizes. This flexibility has become
essential in the mobile era, ensuring consistent usability and accessibility. and
standards. Continuous learning and staying informed about updates and changes in
HTMLS5 are crucial for developers to harness its full potential. By establishing clear
and standardized specifications, HTMLS5 aimed to ensureconsistent behavior and
feature support across different platforms. This objective aimed to simplify web
development and improve the user experience by minimizing discrepancies in
rendering and functionality across browsers and devices

17
 Chapter – 7
IMPLEMENTATION

7.1 Form Enhancements:

HTMLS introduced several enhancements to form elements and input types,
simplifying form validation and improving the user experience. New input types, such
as “email”, ‘url’, “tel”, "number, and “date, provide better user input validation and
trigger appropriate on-screen keyboards on mobile devices. The “required” and
“pattern” attributes allow developers to specify mandatory fields and validate input
based on regular expressions, reducing the need for custom validation scripts.

7.2 Local Storage and Offline Functionality:

HTMLS provides mechanisms for local storage, enabling web applications to store
data locally on the user's device. Developers can use the localStorage and
sessionStorage APIs to save and retrieve data in the form of key-value pairs. This
feature allows web applications to operate offline by caching resources and
synchronizing data when an internet connection becomes available. Implementing
offline functionality involves utilizing appropriate storage APIs and handling network
connectivity events.

7.3 Mobile Responsiveness:

HTMLS includes features that facilitate mobile-friendly web development.
Responsive design techniques, such as using CSS media queries, allow developers to
adapt the layout and presentation of web content based on different screen sizes and
resolutions. By employing responsive design principles, developers can create fluid
and adaptable web pages that provide optimal viewing experiences across various
devices, including desktops, tablets, and smartphones.

18
In the realm of mobile app development, HTMLS has enabled the creation of hybrid
apps. Using frameworks like Apache Cordova (previously known as PhoneGap),
developers can leverage HTMLS, CSS, and JavaScript to build cross-platform mobile
applications, reducing development time and cost. HTMLS5's offline storage
capabilities have also improved the user experience by enabling web applications to
function even without an active internet connection. Local storage, web storage, and the
Indexed Database API allow websites to store and retrieve data locally, providing a
seamless experience in offline scenarios. Challenges and Limitations: Despite its
numerous benefits, HTML5 also poses certain challenges and limitations. One of the
primary concerns is browser compatibility. While major browsers have adopted
HTMLS5, variations in their implementation and support for specific features can lead
to inconsistencies in rendering and functionality. This necessitates careful consideration
and testing during development to ensure a consistent experience across different
platforms. Additionally, security concerns arise with the increased use of client-side
scripting and the storage of sensitive data in local storage or databases. Developers
must employ appropriate security measures, such as input validation and encryption, to
mitigate potential risks. Moreover, the evolving nature of HTML5 and the introduction
of new features can make it challenging for developers to stay up-to-date with the latest
best practices and standards. Continuous learning and staying informed about updates
and changes in HTMLS5 are crucial for developers to harness its full potential. By
employing responsive design principles, developers can create fluid and adaptable web
pages that provide optimal viewing experiences across various devices, including
desktops, tablets, and smartphones. data when an internet connection becomes
available. Implementing offline functionality involves utilizing appropriate storage
APIs and handling network connectivity events.

19
 CONCLUSION

HTMLS is the future. Working with the messed-up markup that dominates the Web and
providing a definition of how user agents should parse the mess is a tremendous
improvement in Web development. Yet HTMLS doesn’t simply embrace the past; it
extends the language with many more elements and continues the move to more
semantic markup. While some markup purists may bemoan the resurgence of HTML
traditions, the XML future is not destroyed by HTMLS. If you want to use lowercase,
quote all attributes, and self-close empty elements, go right ahead—that conforms to
HTMLS as well. However, HTMLS isn’t just about markup; it is also about metadata,
media, Web applications, APIs, and more. It’s a sprawling specification that will
continue to evolve, but much of it is here today, so get busy and embrace the future of
markup now.

20
 BIBLOGRAPHY

[1] at:https://developer.mozilla.org/en-
[2] here:https://www.w3schools.com/tags/default.asp
[3] here:https://www.html5rocks.com/
[4] here:http://html5doctor.com/
[5] here:https://html.spec.whatwg.org/multipage/

21