INTRODUCTION

TO
HTML
 What is HTML?

HTML - Hyper Text Markup Language

Most basic language and easy to learn
Combination of Hypertext and Markup language
Hypertext - text that includes links to other text
Markup Language - interpreted by the browser to
manipulate text, images, and other content
 Markup Language

Displays content in the required format

Defines the elements within a document using
tags
Human-readable language, which means that
markup files use common words rather than the
complicated syntax of programming languages
 HTML

contains a series of elements that can change or

develop a look of a web page and the contents
displayed on a webpage.
In other words, HTML creates or defines the
structure of web pages.
We can create websites using HTML which can
be viewed on internet-connected devices like
laptops, android mobile phones, etc.
 History of HTML

HTML was created by Tim Berners-Lee in 1991

The first-ever version of HTML was HTML 1.0,
but the first standard version was HTML 2.0,
published in 1995.
The latest version is HTML 5, published in 2014.
History of HTML
 Why HTML?
It is the first language to learn for web development.
It is a markup language that loads fast.
Whenever we use browser to contact a server, we
receive a response in the form of HTML and CSS.
Many tags are supported by HTML, making the web
page more recognizable.
HTML5 has recently incorporated new tags and
elements to aid in the development of
professional-looking web pages.
 W3C

• W3C (World Wide Web Consortium) is an

international community that develops open
standards to ensure the long-term growth of
the Web.
• Most W3C work revolves around the
standardization of Web technologies.
• W3C follows processes that promote the
development of high-quality standards based
on consensus of the community.
 W3C Standards

• W3C standards define an Open Web Platform for

application development.
• W3C web standards are web languages, protocols
and inter-operative and international technologies
created with the purpose of guiding the Web
towards its maximum potential through the
development of standardized protocols and
guidelines.
 W3C Standards

• In order for the Web to reach its maximum

potential, the most prominent Web technologies
must -
be compatible with each other
allow any hardware and software to access
the web to work together.
 W3C Standards

• W3C develops web-related standards also known

as recommendations, which serve as a reference
to build an accessible, interoperable and efficient
Web, in which more robust applications can be
developed.
• W3C develops technical specifications and
guidelines to ensure high technical and editorial
quality
 W3C Standards

• Web design and applications involve the

standards for building and rendering web pages,
including HTML, CSS and other technologies for
web applications.
• The best known and widely used web standards
are: HTML (HyperText Markup Language), XML
(eXtensible Markup Language) and CSS
(Cascading Style Sheets).
 Semantic Web and HTML5

• In addition to Web of documents, W3C helps to

build a technology stack to support a Web of
data.
• The ultimate goal of Web of data is to enable
computers to do more useful work and to
develop systems that can support trusted
interactions over the network.
• The term “ Semantic Web” refers to W3C’ s
vision of the Web of linked data.
 Semantic Web and HTML5
• Semantic Web technologies enable people to
create data stores on the Web, build
vocabularies, and write rules for handling data.
• HTML tags tell the browser how to display the
content on the page, but do not give any
indication as to what type of content they
contain or what role that content plays in the
web page.
• Semantic HTML5 addresses this shortcoming by
defining specific tags to indicate clearly what
role is played by the content those tags contain.
 Semantic Web and HTML5

• This explicit information helps robots/crawlers

like Google and Bing to better understand which
content is important, which is less important or
supplementary, which is for navigation, and so
on.
• By adding semantic HTML tags to web pages,
additional information is provided that helps
Google and Bing understand the roles and
relative importance of the different parts of the
web page.
 Semantic Web and HTML5

• For sighted users, when a page is well designed

visually, it is easy to identify the various parts of
a web page at a glance.
• Headers, menus, and the main content are all
immediately visually apparent.
• For seriously sight-impaired, the visual clues are
phenomenally difficult to see and understand.
 Semantic Web and HTML5
• Using semantic HTML tags, the parts of a page,
which is the header, which is the footer, and
which is for navigation, can be communicated.
• Thus, by telling them which is the most
important content, it is easy for them to prioritize
that content.
• For visually impaired users, who rely on screen
readers to verbally describe what is on a page,
proper use of HTML5 semantic elements will
allow screen readers to better communicate the
content by making the visual audible.
 Semantic Web and HTML5

• Accurately implemented semantic HTML5 gives

a big helping hand to the indexing algorithms
used by Googlebot and Bingbot.
• It gives them a better understanding of the
content, which helps them to index the content
better, which in turn helps SEO efforts.
 Structural Elements
• HTML structural elements allow to structure and
group the contents of a web page.
1. HTML Element –
main structural element in a HTML document
HTML element must be included in a
document
All other elements must be placed inside
HTML element
 Structural Elements
2. Head Element –
contains information about the document
information includes document's title, meta
data with keywords, copyright information
and many other valuable information about
the document.
3. Body Element –
contains document's content
can be any type of information like text,
images and even audio-based material.
 Structural Elements

n layout of the content

ement, meaning it
d usually groups larger
er.
el element, it starts on the text level and general
block level elements.
 Structural Elements

ection and its information

e titles and sub-titles of the

h <h1> element as the highest-level heading (most

owest level
s usually appear in larger fonts
 Structural Elements

6. Address Element –
supplies information about an author or
authors of a document or perhaps a
contact information
A good practice is to add it at the beginning
or the end of a HTML document.
 New Elements in HTML5
nts introduced in HTML5

n the header content of a

n the footer content of a

in the navigation menu, or other navigatio

 New Elements in HTML5

to contain a standalone piece of

that would make sense if
RSS item; for example,

to either group articles into different

s or subjects, or to define the different section
 New Elements in HTML5

6. <aside>
Defines a block of content that is related
to the main content around it, but not central
to the page flow