HTML has evolved from version 1.0 in 1990 to the current version HTML5 released in 2014. It is a markup language used for web page structure and layout. HTML5 introduced many new semantic elements, form input types, and multimedia elements to improve accessibility and functionality on modern browsers. When constructing an HTML5 page, the doctype is no longer required, the charset should be declared, and new structural elements like <header>, <nav>, <section>, and <footer> can be used to represent different page sections semantically.
2. HTML History
HTML first version came in the market in 1990 because of Tem-Berner’s lee
efforts.
HTML stands for Hypertext Markup Language.
It was started with version 1.0 in the year 1990 and now we are using HTML5
which was released in the year 2014.
Html is not the programming language but it is a markup language which
understands all the browser and used for front end design .
Every browser understands html.
Hope we will see new upgrade in the html version but still most of the features of
HTML5 are in draft .
3. DOCTYPE
A Doctype is a SGML document type declaration. We keep this to parse the
document correctly.
There were three different types of doctype in the html .
1. Strict Doctype
2. Transitional Doctype
3. Frameset Doctype
So when we start the html markup we have to declare the document type
whether it is of which type in above three types.
But in HTML5 we need not to mention the type of the document in the head
4. DOCTYPE HTML
<!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">
<!DOCTYPE HTML>
6. Global Structure HTML 4.0 Document
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1> welcome to the web page</h1>
</body>
</html>
7. Global Structure HTML 5 Document
<!DOCTYPE HTML">
<html>
<head>
<meta charset=UTF-8">
<title>Welcome to the session HTML</title>
</head>
<body>
<h1> welcome to the webpage</h1>
</body>
</html>
8. What is HTML5 ?
● Html 5 is the latest and most enhanced version of html .
● Html5 is the combination of xhtml and html4.
● Html5 has new API
● Html5 has new Semantic Elements or we can call structural
elements.
● Html5 has new form elements.
● Html5 has new form attributes.
● Html5 has new graphic elements.
9. HTML5 New Structural or Semantic Elements
Semantic we call because it clearly represent the particular section in the webpage.
Non semantic which never express any meaning like span tag.
<header>, <nav>, <section>, <article>, <figure>, <figcaption> <aside>, <footer> .
It supports all the modern browsers.
Unrecognized elements in older browsers treat as inline element so we should
teach to the older browsers to treat as block level element.
To work perfectly the Html5 elements you can include the javscript file reference of
HTMLSHIV in head section.
10. HTML5 New Form Input Types and Attributes
Now we have good input elements in the Html5 version and those really reduce the
burden on designers and developers.
All Modern browsers are supporting the input types .
Color, range, number, search, date, month, tel, progress, url etc.
Attributes:
Autocomplet, autofocus, required, formmethod, formenctype, min, max,
multiple,placeholder, readonly etc.
There are lot many attributes and input types are there but i list down some
popular in Html.
11. HTML5 New Graphic & Multimedia Elements
Now we have audio and video elements in the Html5.
There are graphic elements as well like canvas, SVG.
Html5 is supporting the google maps as well for displaying the map into the
webpage with the help of refernce script which is located into the google. We just
need to creat the object and we have to pass the keys and values of map options.
Before the video tag people were using the reference of youtube and anyother social
video websites to display the video into the webpage.
But now we can directly implement using simple properties in the elements like src
of the file, type, autoplay etc.