Articles > HTML5

What Are Semantic HTML Tags and How to Use Them

Semantic HTML tags allow you to add meaning to your markup so that search engines, screen readers, and web browsers can make sense of it. By default, when a user agent reads your content it doesn't understand the context and meaning. Semantic HTML tags let you serve structured content to your users, which is especially important for on-page SEO and accessibility. Although semantic tags existed in earlier HTML versions, the HTML5 specifications added several new semantic elements to the syntax—both...

How to Make the Most of HTML APIs

HTML5 has been around for quite some time and it brought along a whole slew of new semantic elements. If you do a quick search, you’ll be able to find plenty of tutorials that give an in-depth explanation of what’s new in HTML5, what makes it so great, and how to transition from (X)HTML to HTML5. But, HTML5 also introduced various application programming interfaces that are far less discussed, yet they form a large part of HTML5 specification and are predicted to dominate the future of web development....

How to implement drag ‘n’ drop

Of all the technologies web developers need to master, it seems the one that causes the most confusion and potential problems is drag ‘n’ drop. This is not a new technology, it’s been around for years, but many developers are still clinging to old jQuery based methods to implicate complicated (sometimes slow and inaccurate) drag-and-drop emulation. Now that HTML5 includes a drag-and-drop API, you already have a very simple way to implement drag-and-drop without headaches. Understanding...

How to enhance HTML5 gaming with the Gamepad API

One of the big obstacles in designing a game in HTML5 is that the popular gamepad hardware isn't available. Nobody wants to play a game with keyboard buttons, so the arrival of the Gamepad API brings us a lot closer to console-style gaming in the browser. Browser support ... At the time of writing, the only browsers that support the Gamepad API are Chrome and Firefox — the latest version of each working unprefixed. However, the more we use this API, the more browser manufacturers will support it, and as...

How to use HTML Imports

Web Components have really come a long way since they were first introduced, but one aspect of components that could really change how we code websites is HTML Imports. This way of working allows us to import HTML documents into other HTML documents. It was possible with Ajax, but HTML Imports is a cleaner method. Browser support ... HTML Imports are a very new technology and as of the time of writing, are only supported in Chrome 31 and later. Even then, you’re required to activate the feature. To do so...

Introducing Shadow DOM

The DOM has been a part of our webpages from the beginning, and since the earliest browsers there have always been certain things we wanted, but couldn’t get from the DOM; and other things we wanted to hide. The shadow DOM is designed exactly for that, it hides DOM subtrees under shadow roots, giving you a method of creating a better and more functional encapsulation in the DOM. Browser support ... This functionality is very much new and experimental so it’s only available at the moment in Chrome 25+...

How to use the progress element

When creating a web site we sometimes need to provide the user with feedback on the progress of a particular task , whether that be uploading a file, saving a document or even showing them how much is left until they complete filling in a form. Until now, there has never been a specific HTML element that served this purpose, but now we have the progress element that, as the name suggests, was made to represent the progress of these tasks. Using the progress element ... When it comes to using this element we have...

How to use the Dialog element

In the last couple of years pop-ups and modal boxes have become a lot more popular, and with the HTML5 dialog element we can create easy HTML dialogs and modals without the need for any JavaScript plugins, just simple HTML and some vanilla JavaScript. Since this feature is so new it’s only available in Chrome Canary and even then you need to go to chrome://flags and turn on the Enable Experimental Web Platform Features flag in order for it to work properly. Helpfully there is also a polyfill developed...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress