HTML5 Tutorial - HTML
What is HTML5 ?
HTML5 is the fifth and current major version of HTML, and subsumes XHTML. HTML5 is the latest specification of the HTML. HTML5 is used to build modern web sites.
HTML5 is a software solution stack that defines the properties and behaviors of web page content by implementing a markup based pattern to it. HTML5 is the latest standard version of HTML. HTML5 is the version 5 of HTML. HTML5 is a standard markup for presenting content on the World Wide Web. The latest versions of browsers support HTML5. All the latest mobile web browsers that come pre installed in mobile phones also supports HTML5. In this HTML5 tutorial you can learn how to write HTML code that is compliant with the new HTML5 standards. HTML5 is also a candidate for cross platform mobile applications i.e. Progressive Web App (PWA), because it includes features designed for mobile devices.
What is HTML ?
HTML stands for Hyper Text Markup Language. HTML is the standard markup language for creating Web pages. HTML is not a programming language, it is a markup language. HTML 4.01 was a major version of HTML and it was published in 1999. The HTML 4.01 version is widely used, but currently HTML5 version is standard. HTML5 version is published in 2012.
What are the Older Versions of HTML5 ?
Following are the older versions of HTML5.
- HTML 4.01
- XHTML 1.0
What are the Features of HTML5 Language ?
HTML5 introduces new elements and attributes that can help you building modern web sites. Following are the prominent great features introduced in HTML5 Language.
These are like <main>, <section>, <article>, <header>, <footer>, <aside>, <nav>, and <figure>.
You can embed <audio> or <video> on your web pages without depend on third party plugins.
Drag and Drop
Drag and drop the items from one location to another location on the same web page.
New Elements in form are number, date, time, calendar, and range.
Elements are <svg> and <canvas>.
Now visitors can choose to share their physical location with your web application.
Persistent Local Storage
To achieve without depend on third party plugins.
Microdata is a standardized way to provide additional semantics in your web pages. Microdata lets you define your own customized elements and start embedding custom properties in your web pages.
Server Sent Events
HTML5 introduces events which flow from web server to the web browsers and they are called Server Sent Events (SSE).
A next generation bidirectional communication technology for web applications.
Quotes are optional for attributes in HTML5.
Closing Empty Elements
Closing empty elements are optional in HTML5.
What are the New HTML5 API's (Application Programming Interface) ?
Following are the new API's in HTML5 :
- HTML5 Application Cache
- HTML5 Local Storage
- HTML5 Web Workers
- HTML5 Drag and Drop
- HTML5 Server Sent Events (SSE)
- HTML5 Geolocation
Why Should I Use HTML5 ?
The most straight forward answer to that question is simply that it is the Current, "Right" version of the HTML language. There are a number of reasons to prefer HTML5, and to avoid using any of the deprecated features. Some features are practical.
- Deprecated features will likely stop being supported.
- HTML5 better supports for Mobile Devices as Progressive Web App (PWA).
- HTML5 is easy to write.
- Search Engine Optimization (SEO) is easy with HTML5. Because most of the search engines index mobile friendly contents.
- HTML5 supports Server Sent Events (SSE).
- HTML5 gives the Geolocation of the accessing user's device geo location. We can provide contents related to that geo location.
What is the difference between HTML and HTML5 ?
HTML or Hyper Text Markup Language can be referred to as the World Wide Web's primary language. HTML has seen many updates over time. And currently the newest HTML version is HTML5. Some of the major differences between HTML and HTML5 versions are :
Difference between HTML and HTML5
|HTML5 Features||HTML Features|
|HTML5 supports both audio and video||HTML does not support both audio and video|
|HTML5's MathML and SVG can be used in text||In HTML MathML and SVG usage wasn't possible|
|HTML5 supports new kinds of form controls, for example date and datetime, time, email, number, range, tel, url, search etc.||The date and datetime, time, email, number, range, tel, url, search etc. does not support in HTML|
|In HTML5 Document Type Declaration is simple and easy to memorable. The HTML5 Doctype declaration is
|HTML Document Type Declaration is very complex and it is not easily memorable. The HTML Doctype is like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|Vector graphics like SVG is integral part of HTML5||Vector Graphics is possible with the help of technologies such as VML, Silverlight, Flash in HTML|
|It is almost impossible to get true GeoLocation of user browsing any website especially if it comes to mobile devices through HTML5.||It is not possible to get the user GeoLocation using HTML|
What is a HTML Document ?
HTML Document is a combination of HTML Tags . In other words HTML Document which contains Hyper Text Markup. The HTML Document file has an extension .html, .htm and .xhtml
What is a HTML5 Document ?
HTML5 Document is a combination of HTML5 supported Tags. The HTML5 Document file has an extension .html
What are the Other Names of HTML Document ?
HTML Document other names as Follows :
- Web Page
- Web Document
- Hyper Text Document
- HTML Document
What is a Tag in HTML ?
The Tag is an element of a HTML Document. Tag name surrounded by angle brackets. That is a text that which it was enclosed between < and >. Example for Tag is <html>, <body>, <title>.
What is an Element in HTML ?
The Element is nothing but a Tag in HTML. An Element also has start tag and end tag in between text. Sometimes you may hear start and end tags are called opening and closing tags. Example for start and end tags or opening and closing tags :
HTML Element Example
In the above example notice that the end tag has the same name as start tag except the end tag begins with forward slash before the tag name. In the above example's title tag is called as title element. However there are some elements only has a start tag. Example <br> element. The <br> element does not have end tag and does not have text.
What is an Attribute in HTML ?
An Attribute is allow to add additional information for an Element. An attribute if present, it is located in start tag after the tag name. An Attribute example as follows :
HTML Attribute Example
If you like to learn HTML tutorial the following Youtube video helpful to you.
Explanation for HTML5 Attribute
In the above example id="page-heading" is an attribute. The first part of the attribute is attribute name that is id. The attribute name is followed by equal = sign and followed by the value that is page-heading.
Softwares required to Create HTML5 Document ?
- HTML Editor : Any text editor Notepad or Notepad++
- Browser : Any browser Chrome or Firefox or Edge or Internet Explorer.
How to create HTML5 Document ?
If you know how to create HTML documents, as the same way you can create HTML5 documents. Don't be afraid to create HTML5 documents. Because the basics of HTML language and HTML5 language are same. Avoid using deprecated HTML features in HTML5 document ( page ) creation and learn how to use new features that compliance with HTML5.
When using multiple tags, the tags must be closed in the order in which they were opened.
Before going to how to write HTML5 document ( page ) I am discussing HTML document ( page ) rough structure. Following is the HTML document ( page ) structure.
Don't confuse with head and header. The <head> is the HTML's tag and <header> is the HTML5's tag.
In the body section your contents in the form of html tags like heading tags which are from <h1> to <h6> and paragraph tag <p>. What you defined in the body section it will display in browser.
Basic HTML Document Example
Now we are going to write HTML5 document ( page ). The HTML5 document ( page ) structure look like HTML document ( page ). But in the HTML5 document ( page ) the body section is divided into three parts.
- header : The header section contains website navbar and navigation links.
- main : The main section contains website contents or the main contents of a html5 document ( page ).
- footer : The footer section contains website footer.
Following is the HTML5 document ( page ) structure. Follow easy steps and start building your own website.
Basic HTML5 Document ( Page ) Structure Example
What is New in HTML5 ?
The DOCTYPE declaration for HTML5 is very simple:
How to Declare DOCTYPE in HTML5 ?
New HTML5 Elements
New semantic elements like
New attributes of form elements like number, date, time, calendar, and range.
New graphic elements:
New multimedia elements:
What are Semantic Elements ?
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
HTML5 Semantic Tags Structure
Examples of semantic HTML tags include <nav>, <footer> and <section>. There are many more semantic HTML5 tags that can be used (for example <blockquote> and <em>). HTML5 tags that divide the page content into its basic parts are <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>.