In order to make HTML5 no longer mysterious, in order to help hesitant designers and development engineers running to keep up with the rapid development of the wave, I listed why to use the HTML5 immediately ten reasons.
You haven't used HTML5 yet? I think you have your reason: it has not been fully adopted; IE doesn't support it; you think it's good now, or you're still passionate about writing strict XHTML code. HTML5 is a revolution needed by the Internet industry. In fact, whether you prefer it or not, it is the future. HTML5 is not esoteric, it is not difficult to use. Although its standards have not yet been fully adopted, there are plenty of reasons to start using it right away.
There are now many articles calling for the use of HTML5 and vigorously promoting its benefits. Yes, this is another new article. With so many articles, a push from Apple, and a new development tool around it, and a growing number of sites, I'm trying to persuade designers and engineers who have been slow or don't want to change for all sorts of reasons. I think the main problem is that, for many people, it seems like a mysterious thing.
To uncover the HTML5 mystery and help slow-moving front-end people catch up, I've listed ten reasons why you should use HTML5 right away. For those who already use HTML5, these may not be new, but hopefully they will inspire you to communicate with your peers. Here I used the countdown method, starting with the tenth item.
10– Ease of Use
There are two main reasons why HTML5 makes Web sites easier to use: semantics and ARIA. New HTML tags, like
、、、、, making it easier for screen readers to read content. Before, screen readers cannot determine a
is what, even if you add an ID or class to it. With new semantic tags, screen readers will be better able to examine HTML documents and make it easier for those who use them to experience it.
ARIA is a web-based standard for assigning special "characters" to elements in an HTML document-creating important markup from the bottom for a page, such as a header, footer, navigation, or article, from a character's properties. This was ignored before and no one was used because it was not legally valid before. However, HTML5 now validates these attributes to make them legitimate. In addition, HTML5 has a prioritized built-in role, which makes assigning roles a breeze. More in-depth discussions about HTML5 and ARIA can be accessed by WAI.
9– Video and audio support
Forget about Flash players and other third-party media players, and use new HTML5 and tags to make your video and audio easier to play. You used to want your media to play correctly as a nightmare. You need to use and
is so surprisingly simple. However, because old master browsers don't like our HTML5 friends, you'll need to add some code to get them working--and that's more than
12345 |
<</code> Video poster = "myvideo.jpg" controls> <</code> source src = "myvideo.m4v" type = "video/mp4" /> <</code> source src = "myvideo.ogg" type = "video/ogg" /> <</code> embed src = "/to/my/video/player" > Embed> video >
|
Resources:
HTML5 Audio and video:what you must Know
Audio and Video processing in HTML5
How to make Your Own video Player on HTML5 video
Using HTML5 Video and Audio in modern Browsers
8–doctype Document Type
Yes, DOCTYPE, that's all. Simple enough, huh? You don't need to copy and paste a bunch of long code that you don't understand, and you don't need to add a variety of tag attributes to the head. As long as the simple input is good. What's more, besides being simple, it can work in a variety of browsers, even if everyone has no way of IE6 it.
7– More Concise Code
If you are fond of writing simple, elegant, easy-to-read code, the HTML5 is the best fit. HTML5 allows you to write concise, descriptive code, with semantic code that allows you to easily separate the content from the style. Take a look at this simple, navigational header code:
12345678910 |
<</code> Divid
=
"header"
>
<</code> H1>Header Text H1>
<</code> div
id
=
"nav"
>
<</code> Ul>
<</code> Li><</code> Ahref
=
"#"
>Link A> Li>
<</code> li
><</code> Ahref
=
"#"
>Link A> Li>
<</code> li
><</code> Ahref
=
"#"
>Link A> Li>
ul >
div >
div >
|
Is it simple enough? With HTML5, it can be more simplified and have a clearer meaning:
12345678910 |
<</code> header ; <</code> H1 >header Text H1 ; <</code> nav ; <</code ul ; <</code> li ><</code> a href = "#" >link a ; Li ; <</code> Li ><</code> a href = "#" >link a ; Li ; <</code> Li ><</code> a href = "#" >link a Li , ul ; Nav header ; |
Using HTML5, you can describe your content in terms of meaning to heal your div and class obsessive-compulsive disorder. Previously you had to define the div for all the content, and then add the ID or class that describes the content. Now with
、、、、 and HTML5 tags, you can make your code cleaner and make CSS more organized.
6 – Smarter storage
The coolest thing about HTML5 is the new local storage feature. It's a bit like a cross-border combination of traditional cookie technology and client databases. It has the advantage over cookies that it allows storage across multiple windows, it has better security and performance, and the data remains after the browser is closed. Because it is essentially the client's database, you don't have to worry about the cookie being deleted by the user. It has been adopted by the mainstream browser.
Local storage is great in many ways, but it's just one of the many tools that HTML5 offers. These tools may allow you to develop web app apps without a third-party plugin. The ability to save data in the user's browser allows you to easily implement these app features: Saving user information, caching data, loading the user's application status, and more.
5– Better interactivity
We all want to have a better interaction, we all like interactive sites with more dynamic effects that can respond to user actions, allow users to enjoy and interact with the content of the site, rather than just look at it. With HTML5 's Drawing tab, you can achieve most of the interaction and dynamic effects.
In addition to this, HTML5 has a number of powerful APIs that enable you to achieve a better user experience and develop more dynamic and dynamic applications. The following is a list of some native APIs:
Drag and Drop (DnD)
Offline Storage Database
Browse History Management
Document editing
Timed media playback
More information about these APIs and the native interaction features of HTML5 can be accessed by Html5doctor.
4– Game Development
Yes. You can use HTML5 tags to develop the game. HTML5 provides a powerful, mobile-friendly way to develop interesting interactive games. If you have developed Flash games before, you will be happy to do HTML5 games.
3– old Browser/cross browser support
Popular modern browsers (Chrome, Firefox, Safari, IE9, and Opera) all support HTML5, and HTML5 doctype can be used for all browsers, even the old dregs of IE6. However, the old browser can identify HTML5 doctype and does not mean that they are able to handle all new HTML5 tags and features. Fortunately, HTML5 makes the problem simple and has a friendly cross-browser performance. For older IE browsers that do not support new tags, we simply add Javascript Shiv code so that they can use the new elements:
Move, move, or Move!
Mobile technology has become more and more popular! I know, this is a crazy hypothesis, and you may be thinking that moving will lead to fashion. Mobile devices are capturing the world. The number of mobile devices is way up, which means more and more users will use their mobile browsers to access your website or app. HTML5 is a complete development tool for mobile websites and applications. With Adobe announcing the death of mobile Flash, you can now rely on HTML5 for mobile app development.
Mobile browsers have fully embraced HTML5, so developing mobile projects is as simple as giving these small screen designs and building the display content-which also facilitates the popularity of responsive design. There are also some good meta tags that you can use to make mobile optimizations:
1, Viewport: Allows you to define the width and scale of the viewport
2. Full Screen Browsing: IOS-specific values allow Apple settings to be displayed in full-screen mode
3, Home icon: Similar to desktop app Favicon, these icons are used to add favorites on the homepage of IOS and Android mobile devices.
For information on how to make your site "mobile" through HTML5, you can refer to: "mobifying" Your HTML5 site.
The trend of the future!
The first reason why you should start using HTML5 today is that it is the future and never be left behind. The HTML5 will not develop at random. As more and more elements are adopted, more and more companies are starting to develop on the basis of HTML5. HTML5 is essentially HTML, it's not scary, you don't have to learn from scratch-if you're developing with XHTML strict, you're actually using HTML5, why not enjoy its full functionality?
You have absolutely no excuse not to HTML5. In fact, the real reason I'm inclined to use HTML5 is simply to use it to write more concise code, all the other benefits and interesting features I haven't tried yet. However, it's important that you don't have to change the way you design, and you can start right away. So, get started, whether you just want to make the code simple and more semantic, or if you're going to develop a mobile game that will conquer the world, who knows?
Important HTML5 Resources
Http://html5doctor.com
Http://html5rocks.com
http://html5weekly.com/
Http://www.remysharp.com
Http://www.script-tutorials.com
Ten reasons to use HTML5 immediately