HTML 5 Features You Should Know

by Didin J., updated on Jul 28, 2017 HTML 5 Features You Should Know

Most important thing you should know about today's web technology that is HTML 5.

There's are a lot of new features since HTML 5 announce to replace old HTML standard. This new feature will discuss a little in this article. This is a little theory, but I think will be useful if we know a little bit about the features of HTML 5 to get focused on what we need from it.

More Descriptive Markup than old HTML

Each version of HTML introduces some new markup, but never before have there been so many new additions that directly relate to describing content. You’ll learn about elements for defining headings, footers, navigation sections, sidebars, and articles in Chapter 2, New Structural Tags and Attributes, on page 24. You’ll also learn about meters, progress bars, and how custom data attributes can help you mark up data.

Built-in Multimedia Support

There are no needs another plugin like flash, Silverlight or another media player on HTML. You can use built in HTML 5 media tags to play most supported and standardized media format. And it's good because of this feature supported by Apple and another platform that almost remove those plugin before.

Cross-Document Messaging

Web browsers prevent us from using scripts on one domain to affect or interact with scripts on another domain. This restriction keeps end users safe from cross-site scripting, which has been used to do all sorts of nasty things to unsuspecting site visitors.

However, this prevents all scripts from working, even when we write them ourselves and know we can trust the content. HTML5 includes a workaround that is both safe and simple to implement.

Web Sockets

This is today most interesting feature, especially for messaging feature that will use on your website. HTML5 offers support for Web Sockets, which give you a persistent connection to a server. Instead of constantly pulling a back end for progress updates, your web page can subscribe to a socket, and the back end can push notifications to your users.

Client-Side Storage

With this feature, we can store data on the local browser and populate like we're using standard relational database queries. Web Storage and Web SQL Database APIs, we can build applications in the browser that can persist data entirely on the client’s machine.

Better Interfaces

The user interface is such an important part of web applications, and we jump through hoops every day to make browsers do what we want. To style a table or round corners, we either use JavaScript libraries or add tons of additional markup so we can apply styles. HTML5 and CSS3 make that practice a thing of the past.

Better Forms

HTML5 promises better user interface controls. For ages, we’ve been forced to use JavaScript and CSS to construct sliders, calendar date pickers, and color pickers. These are all defined as real elements in HTML5, just like drop-downs, checkboxes, and radio buttons. Although this isn’t quite ready yet for every browser, it’s something you need to keep your eye on, especially if you develop web-based applications. In addition to improved usability without reliance on JavaScript libraries, there’s another benefit—improved accessibility. Screen readers and other browsers can implement these controls in specific ways so that they work easily for the disabled.

Improved Accessibility

Using the new HTML5 elements in HTML5 to clearly describe our con- tent makes it easier for programs like screen readers to easily consume the content. A site’s navigation, for example, is much easier to find if you can look for the nav tag instead of a specific div or unordered list. Footers, sidebars, and other content can be easily reordered or skipped altogether. Parsing pages, in general, becomes much less painful, which can lead to better experiences for people relying on assistive technologies. In addition, new attributes on elements can specify the roles of elements so that screen readers can work with them easier.

Advanced Selectors

CSS3 has selectors that let you identify oddly and even rows of tables, all selected checkboxes, or even the last paragraph in a group. You can accomplish more with less code and less markup. This also makes it much easier to style HTML you can’t edit.

Visual Effects

Drop shadows on text and images help bring depth to a web page, and gradients can also add dimension. CSS3 lets you add shadows and gradients to elements without resorting to background images or extra markup. In addition, you can use transformations to round corners or skew and rotate elements.

That's it for now, I hope this article useful for you.