20 interesting facts about HTML5

HTML 5

The HTML5 is the fifth revision in the HTML and it follows up with the latest advancements and the trends in the technology. The people who came out with this have been claiming that the HTML5 technology has been made keeping in mind a foresight that the language will now last for over a decade. The HTML5 encompasses many current changes and takes into account the technologies of the future. And based on the devices and screen sizes of the coming generations, the language has been modified several new features and capabilities in such a manner that the websites would appeal to all devices.

Through this article, we will help you to know the best features in HTML5. So, let’s look at them -

Server-Sent Events (SSEs)

Server sent event is an intimation from the server to the client when there is a need, that means, the server will send data to the client without requiring the client to demand it. In the traditional approach, the client keeps polling the server for data and this result in greater HTTP overhead. With these events, the server intimates the client with data whenever available without even initiating the request from the client.

XHTML is obsoleted; now HTML5 with XML syntax

XHTML was the choice of people who favored precision, particularly for parsing. HTML has always looked a lot like XML, but it never was quite exactly like XML, and as a result, trying to parse it like XML would fail. So a while ago, the XHTML spec was made, to take the HTML language and put it into the XML lingo. When HTML5 first got started, there was work on XHTML 2 as well. Instead, the HTML5 spec is written so that you can write HTML5 with strict XML syntax and it will work. And if you send it with an XML MIME type, user agents will parse it as an XML document too. This gives developers the best of both worlds.

Editable content

Using this feature in the supported browser, one can make the text content in HTML element editable. This can be applied to any elements expected to hold text using a new attribute - ‘contenteditable’ by setting it to ‘true’. Once applied, all the text content in the element will become editable. This internally makes use of the web storage explained in the earlier section.

Minimal valid web page

With the HTML5 arrival, you’d only need to define the doctype and title in order to create a new valid web page. So, theoretically, no HTML, head or body tags are needed for that. This is happening because browsers assume them anyway.

Doctype

It's used for current and older browsers that require a specified doctype. Browsers that do not understand this doctype will simply render the contained markup in standards mode. So, without worry, feel free to throw caution to the wind, and embrace the new HTML5 doctype.

Email Inputs

If you apply a type of "email" to form inputs, you can instruct the browser to only allow strings that conform to a valid email address structure.

Audio support

No longer do you have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, you won't have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it's still a good practice to offer some form of backward compatibility.

Video support

Much like the <audio> element, we also, of course, have HTML5 video as well in the new browsers! In fact, just recently, YouTube announced a new HTML5 video embed for their videos, for browsers which support it. Unfortunately, again, because the HTML5 spec doesn't specify a specific codec for video, it's left to the browsers to decide. While Safari and Internet Explorer 9 can be expected to support video in the H.264 format (which Flash players can play), Firefox and Opera are sticking with the open source Theora and Vorbis formats. As such, when displaying HTML5 video, you must offer both formats.

Display controls

If you're working along with each of these tips and techniques, you might have noticed that, with the code above, the video above appears to be only an image, without any controls. To render these play controls, we must specify the controls attribute within the video element.

HTML5 kills Flash

The fact is that Flash is still used by several million websites and developers worldwide. The misconception was born, once again, from the high profile fallout between Adobe and Apple and the rapid adoption of HTML5 audio and video application and mobile development as a result. However, though HTML5 is great for low volume video playback, full HTML5 support requires two or three times the encoding chores of Flash support and still lacks many critical features currently available in plug-in based technologies. Currently, sites like Vimeo and YouTube use HTML5 technology largely for technology’s sake, and will not be moving away from Flash too rapidly.

Improved SEO visibility

Compared to Flash, HTML5 can be read right off the bat by bots and spiders visiting your site. This has always been a handicap Flash designer have had to contend with when making use of Flash’s complicated code. HTML5, on the other hand, makes it much easier to be seen on search engines and optimize your pages for them through the use of various semantic tags such as <article> and <header>.

Allows offline caching

HTML5 provides users with a way to browse any previously visited website, even with the lack of an active Internet connection. This can be convenient for those with unstable connections to still view core elements of a page. In addition, webmasters can specify which files the browser should cache when building the site and save users from the inconvenience of losing any pre-cached data.

WebVenture

WebVenture is an HTML5 and Javascript implementation of the MacVenture gaming platform. You can now play Deja Vu 1 & 2, Shadowgate and Uninvited right in your browser! Other game implementations such as Wolfenstein 3D are being worked on, bringing gaming into your browser.

Web Workers

Web workers are like a daemon service running in the background in the browser instance without affecting the performance of the web page. This could be leveraged for high CPU intensive operations. The page gets blocked until the execution of the script is completed. Using web worker which is a JavaScript in external js files, it fixes this issue as this script will run in the background without affecting the execution of other scripts and events like button click, etc.

The Output Element

The output element is used to display some sort of calculation. For example, if you'd like to display the coordinates of a mouse position or the sum of a series of numbers, this data should be inserted into the output element. As a simple example, let's insert the sum of two numbers into an empty output with JavaScript, when a submit button is pressed.

Geolocation support

With the growth of mobile devices around the world, one type of application that has gained popularity is geolocation support. Whether you’re pinpointing your location via GPS or sharing information with others across the world, HTML5 supports geolocation APIs that can serve multiple functions. Browser-based applications running HTML5 will have no problem using geolocation apps that support various mobile devices.

HTML5 Is bad for accessibility

HTML5 is built around accessibility. While drafting the spec, utmost care was taken to ensure each element works with WAI-ARIA landmark roles.  These roles are specialized attributes added to your tags that allow accessibility devices such as screen readers to better interpret the site’s flow and content better. Converting a site to HTML5 may ruin the accessibility if these roles aren’t understood and implemented properly, but that won’t be the fault of the markup! See font accessibility.

Create sliders with the range input

HTML5 introduces the new range type of input. Most notably, it can receive min, max, step, and value attributes, among others. Though only Opera seems to support this type of input right now fully, it'll be fantastic when you can actually use this.

Semantic elements

Understanding the old style of HTML code can be difficult for those without a head for programming. Fortunately, the new semantic elements that HTML5 introduced will make it much easier to read for budding developers. Instead of seeing line after line of <div> and <span> elements, more defined tags such as <header>, <footer> and <aside> will become the new standard.

Universal compatibility

Because HTML5 built on the backbone of its predecessor, it is very easy to develop new applications and to enhance current pages using its improved capabilities. It is this structure that makes it compatible with multiple browsers from Internet Explorer to Google Chrome. It also makes it accessible to various mobile devices such as the iPhone, Android devices, and other smartphones.


 Hope, we've covered with best, but have still only scratched the surface of what's possible with HTML5. But it is worth mentioning that not all browsers are adapting to these standards or enhancements at the same pace. Please feel free to share your experience in the comment section. Thank you!

Comments (0)

  • To add your comment please or

We use cookies to improve your experience on our site and to show you personalised advertising. Please read our cookie policy and privacy policy.

Got It!