HTML5 Introduction
HTML5 offers best feature tags for better documents. If you are looking for a quick updates on HTML5, then you are at the right place – this blog will help you get an introduction to the basics of HTML5 – its specific elements, the differences between HTML5 and its earlier version, browsers that support it, technologies that come under it, and useful online tools for development.
To understand how well your new html5 tags are supported in your web browsers? So you can use a tool called https://html5test.com/index.html
Html5test.com helps us to identify of how well your all the html5 tags are supported. Currently, we are using Chrome Dev 61.0.3163.100 on OS X El Capitan 10.11. Therefore you can find our screenshot.
This tool will help us to identify the new Html 5 tags which are supported in your web browser version or not.
HTML5 is the newest specification in the world of Web applications. It is currently supported by Safari 6, Firefox, Opera 12, IE 8,IE 9,IE 10 and chrome.The added bonus is that HTML5 is backward compatible.
Get Skilled in Full Stack Web Development
One of the exciting aspects of HTML 5 is that it is not only designed to work on desktops but also on mobile devices. The organizations that are responsible for providing specifications and APIs for HTML5 are:
- W3C – World Wide Consortium.
- WHATWG – Web Hypertext Application Technology Working Group.
- DAP – Device APIs Working Group.
In short W3C is the main group that works with other groups to develop web standards.
Differences between HTML4 TAGS AND HTML5 TAGS
In general, HTML5 is dissimilar from its earlier versions by :
- Not supporting a few elements of HTML4.X.
- Simplifying a few elements.
- Supporting some new elements.
- Supporting custom attributes.
New TAGS
HTML5 offers new semantic elements to define different parts of a web page which will help you to create your web pages easily.
What is New in HTML5?
As mentioned, HTML5 has in its bag: new elements, attributes, and APIs. Some of the commonly(most) used elements in HTML5 have to be the media related elements like <video> and <audio> for obvious reasons. Also in use are the semantic elements which give an elegant structure to the web pages like: <section>, <article>, <aside>, <nav>, <header>, <figure>, and <figcaption> and newly added <main>
For instance, the <section> tag can be used as a container for a document and the <article> tag is suitable to articulate content as a newspaper article or a blog post such as this one. Below are listed a few tags and their suitable applications:
Here is a simple example for video tag with controls:
Click on the link below —>
https://s3.amazonaws.com/acadgildsite/course/blog/frontendbasic/HTML5_BasicTags/video_design/video_player_page.html
The other interesting new form attributes and types are:
New form control attributes like a placeholder, autofocus, email, URL, required, pattern, number, range, color, tel, search, date, date-time, file, required as an attribute. autofocus , autocomplete=”off”, autocomplete=”on”,data list ,min and max ,enable, read-only , disable ,size.
We would recommend you if you want to understand and start learning how to prepare html5 form. You can view our small form example. https://github.com/somacadgild/form1.git
https://github.com/somacadgild/form2
https://github.com/somacadgild/form3
If you want to experience the above webpage with all its features as a web page and make entries and test it out, you can do so by clicking the link below:
https://s3.amazonaws.com/acadgildsite/blog/frontendbasic/HTML5_Tags.html
New HTML5 API’s (Application Programming Interfaces)
The most interesting new API’s are:
- HTML Geolocation: HTML Geolocation is used to locate a user’s position. The HTML Geolocation API is used to get the geographical position of a user.
- HTML Drag and Drop: Drag and drop is a very common feature. It is when you “grab” an object and drag it to a different location.
- HTML Local Storage: With local storage, web applications can store data locally within the user’s browser.
- HTML Application Cache: Application caching mechanism lets web-based applications run offline.With application cache, it is easy to make an offline version of a web application, by creating a cache manifest file. Developers can use the Application Cache (AppCache) interface to specify resources that the browser should cache and make available to offline users. Applications that are cached load and work correctly even if users click the refresh button when they are offline.
- HTML Web Workers: Web Workers provide a simple means for web content to run scripts in background threads.
- HTML SSE: Server-Sent Events allow a web page to get updates from a server.
What technologies are part of HTML5?
Here is a list of the technologies that are part of HTML5: (some of these are explained above)
Canvas2D
CSS3
Drag and Drop
File API
Geolocation
Microdata
Offline Applications
Server Sent Events (SSE)
SVG
Web Intents
Web Messaging
Web Storage
Web Sockets
Web Workers
The other technology that gets associated with HTML5 is WebGL. WebGL makes it possible to display amazing real-time 3D graphics in your browser. WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible Web browser without the use of plug-ins.
Useful online tools for development with HTML5
Usually, modern browser differs in terms of support for HTML5 features. Whenever you publish a web page it is a good practice to recommend the correct browsers that support all the features of your web page. In order to do this, you need not manually check each feature but you can use tools which enable you to detect HTML5 feature support in the browser using simple javascript code.
The two widely used tools are:
- Modernizer: provides a programmatic way to check for many HTML5 and CSS3 different features. In order to use modernizer, include the following code snippet in the <head>element of the webpage:
<script src=”modnernizr.min.js” type=”text/javascript”></script>
The below-given code will help you to check canvas feature in your browser by using a if else statement
<script> if (Modernizr.canvas) { alert(“This browser will support HTML5 canvas”); } else { alert(“no canvas”); } </script>
- Caniuse: It is extremely useful because it provides information about many HTML5 features in modern browsers. If you want to check it out go through this site http://caniuse.com/.
Caniuse provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. It gives detailed –Compatibility tables for support of HTML5, CSS3, SVG and other technologies in various browsers.
Conclusion
You can see that HTML5 definitely provides awesome features that make your web page lively. In addition, the Tags given by HTML5 make the process of developing web pages as easy as it can get! Hopefully, this article will start you thinking about how best to use HTML5 tags and provides enough examples to head you down the right path. You can proceed further to work on making your app capable enough to distinguish which orientation (portrait or landscape) is currently being used and this will require you to take slight adjustments to how your page looks. There are so much more things that you can do to style your web page and make it interesting and meaningful.
Keep visiting our site Acadgild for more updates on HTML and other technologies. Enroll now for courses on Web development
