There are some really good resources on HTML5 on the web such as Dive Into HTML5 and http://slides.html5rocks.com and I have used many of the features mentioned in my own applications, so I'm not new to using HTML5.
But as I get further along in my study of HTML5 features, I keep uncovering more and more things that are classified under the heading of "HTML5". The most recent one I've heard about is the keygen tag which allows you to generate public private keypairs on the client side with ease. I'm pleased that this tag exists and also slightly disturbed that I had no idea about its existence till a few hours ago.
So is there a complete list of HTML5 features anywhere on the web? I am aware of the working draft at http://www.w3.org/TR/html5/ but I'm looking for something to the point and easy to understand without having to sift through reams of technical jargon.
I highly recommend the specification for developers.
Basically its what it says on the tin. But to clarify, this is from the press release at the time:
It features find-as-you-type search,
offline access, beautiful typography,
technical references pulled inline,
and alternate styles for handheld
devices or low resolution displays.
The aim? To produce a companion
specification for web developers to
use on a regular basis. All details
that are considered “for browser
vendors” are omitted.
W3C: HTML5 Differences from HTML4
Related
I've got plenty of experience in HTML, CSS, JavaScript, Jquery, etc. but I've yet to make the plunge into HTML5.
In trying to get my head around HTML5, I've become a bit confused. So it's a relatively new standard and my uninformed brain tells me it's not well supported. Is this true?
I've got a vague idea that there are some 3rd party scripts that improve HTML5 compatibility, again am I right?
Any good tutorials on getting to grips with the basics of HTML5 for an experienced developer?
Ok a lot of questions there but:
HTML5 is quite well supported on most modern browsers nowadays and it's generally safe enought to use as is.
Scripts to improve compatibility? you mean Javascript that detects how old your browser is and depending on the answer show you HTML 4.01 or 5? well maybe but again, it's at the point when it is not required anymore.
Yes: w3schools has a cool one.
All of that said bare in mind that HTML 5 is still in development and not a done deal. Some areas are still being implemented but at the speed things are take this is not an issue for starting to develop your pages in HTML 5.
This website - html5 doctor is a very usefull resource that you can browse looking for what's implemented where and how things are generally going.
I also found this link to be particularly useful when figuring out what's available for each browser and what's not.
Another subject that goes well with HTML5 is CSS3. Check them both out and maybe come back with specific questions ;)
the HTML5 buzzword is being used a lot, but people mostly use it to describe different things.
HTML5 is the newest (and as of yet, unfinished) iteration of the HTML standard, as presented by W3.org.
Purely, HTML5 is the markup language, but it is usually referred to as to include CSS3, and JS (in the form of the canvas element).
In the HTML area, HTML5 boasts some new element tags that should help developers add semantic meaning to their markups(e.g. header, footer, aside) , and also some useful functional elements (progress-bar, video, audio)
In the CSS area, there are some new properties that allow you to animate your elements, and orient them more easily.
In the JS area, you can read up on the Canvas element, which is a good competitor to Flash. It allows you to draw both using vectors, and bitmap data.
As for good references to HTML5, you can use http://html5doctor.com/ or http://www.html5rocks.com/en/
Hope this helps.
Please note that w3schools isn't such a good reference anymore. Although for just looking at the possibilities it's fine I guess.
I recommend the tutorial from Lynda, but there are other sites. Just search at google. It's also possible to buy a book, since there have been written a few already.
Fallback/polyfill Scripts & libraries like Modernizr,Javascript Libraries can help you take care of older browsers. (backwards compatible)
As for the browsers. Use chrome, it supports most of the functions. Look at sites like findmebyip for more information about what is supported.
HTML 5 support is not yet fully integrated in all browsers. They are still in development stage. For studying the HTML 5 the best medium would be w3schools
They have introduced new elements in HTML5 which has reduced our overhead for html. New Elements
CodePlayer
Videos for HTML 5
I defied all conventional knowledge, and wrote my HTML5 site first. Now I am writing the HTML4 site and adding a script which detects old browsers. The question I have is mainly regarding web safe fonts. I am aware that it is best practice to use HTML instead of images of pretty text, for the benefit of SEO. However, since the HTML5 website exists with the HTML in the headers, I wonder if it is safe to use images to represent those headers in the HTML4 version of the site. Simply put, will my web client's indexing suffer? I feel that the HTML5 version will ensure good ranking, but I wanted to put it to the community and get an opinion.
Second question, should I create the more accessible version in HTML4 or XHTML?
Finally, is there a simpler way to make a new site backwards compatible, and still be able to make use of newer technology?
After a fair amount of research, I found that it is not so unusual to create a site in HTML5, and implement items for the purpose of graceful degradation.
At this site: spacebug.com/gracefully-detect-old-browsers-and-fallback-from-html5/, the authors recommend not using PHP user agent variables to detect browser capability. It says that there are too many user agents and that headers change, etc. Check out the link for their in-depth explanation. It offers that the right way to do it is to use javascript to check for certain capabilities. Since my purpose is to either render it in HTML5 or render it in XHTML, this makes my life pretty simple.
Once I found that javascript was the way to go, a simple Google search led me to this site: diveintohtml5.info/detect.html. This offers a number of methods for detecting browser functionality as it relates to HTML5.
For those who are not as savvy with the code, or for those who are looking for a quick solution, the second website also offers a link to modernizr.com, which is an "open-source MIT licensed javascript library that detects support for many HTML5 and CSS3 features."
So, thank you all for your input. I have learned a great deal from this experience, and I am hoping it will make everything much more user friendly and efficient.
Happy developing!
Kat
I am a designer and my only knowledge with programming is ActionScript 3.0. ActionScript is quite different in different versions — ActionScript 3.0 is a lot diffrent than ActionScript 2.0 or ActionScript 1.0, so it’s no good learning 1.0 or 2.0, the best thing is to learn 3.0 and you're good.
I'm wondering if it is the same with HTML?
I want to start learning about XHTML, HTML & HTML5, and CSS3. Should I start learning about the basics of HTML first, would that be usefull to me? Or should I go straight into HTML5?
Please recommend whatever you think would get me started. (Books, great video tutorials, maybe some guy that is good at teaching in video tutorials, advice, tips, anything you consider relevant is welcome.)
Thank you.
HTML 5 is (essentially) HTML 4 with bits added, so learn "HTML".
5 isn't a rewrite from scratch, and it is still in draft form so large chunks of it are subject to change and have limited browser support.
When you think about html, 4 or 5, you need to primarily see it is a language for describing documents and the data they contain. At its core, html is just that. It is gaining new capabilities, but it's still a markup language for documents. People are trying to look at it as a robust programming language, but even the new dynamic features require javascript to assist its functionality. Don't be tricked into thinking html5 is all that different from html4 - They still do the same things, for the most part.
The key to writing good, useful html (Regardless of the version) is proper use of semantics and clean/efficient code authoring practices. If you're using the proper tags and writing very clean code, you're already doing better than some 'professionals' I work with. This is a big deal.
When you look at a document, you can break it down into parts. There are doctypes, meta data, linked resources, media objects (images, embedded objects), text based data (tabular, paragraphs, headings, quotes, lists, etc), forms, frames, and the elements that hold all of this together, with or without styles.
That is essentially the foundation of an html document. You can output it with php or ruby or whatever you like, but a proper document will always contain some (Or occasionally all) of these things. An ideal document will contain these things in the correct places (clean, consistent coding) to serve the purpose they are intended for (semantics).
What html5 introduces are additional elements to satisfy semantic requirements as well as useful, dynamic elements that align well with growing requirements based on how people use and develop websites. For example, there's canvas, a scriptable rectangular element for presenting visual information. Then there is local storage - the ability to save key pair style data into a user's web client database for later access, which would be extremely useful for saving changes made to contenteditable elements (Another html5 feature) on a site, perhaps, if you knew the same client would always be used. There's quite a bit more, but I guess you get the picture.
The new html5 features are extraneous to writing 'good html'. They're useful, but you can learn to write great html without them. In fact, that's exactly what I've been doing for the last ten years before html5 appeared. I recommend starting with the basics - Learn about semantics, what they mean, why we'd use them, and even include new html5 tags (Outside of canvas - Canvas is a useful element, but using it is not necessarily using html). Learn about browser support for elements, then learn to link resources in the head, such as stylesheets and javascript. Eventually, you'll have a good feel for basic html, and you'll start wanting to use more advanced techniques.
For now, if you aren't a master of new html5 features, you aren't missing out. There's some cool stuff, sure, but the spec may still change and you can spend this valuable time learning the things that won't change - The fundamental things that make html coders genuinely useful.
edit: As for resources, check out these sites:
Generally useful resources
Quirksmode - Good blog, browser compatibility tables
html dog - Very basic, would start you off well
HTML5 Semantics and other information
HTML5 Doctor - Easy reading; To learn a bit about new html5 tags, but mostly, their semantic intention (This is important)
A List Apart - A good look at semantics, again.
Dive into html5 - For when you just feel like doing some reading
HTML5 is just the same old HTML but updated to match today's internet. There is no reason (that I can see) to learn the same language but with outdated information. It will only serve to confuse you - I suggest you instead focus on HTML5 and CSS (XHTML is pretty much HTML4 with some stricter rules) and move on from there to whatever interest you most.
Yes, you should start with the foundation, HTML, before learning about the things that depend on HTML
Due to the low level of support for HTML5 in older browsers should one (or could one) use any part of HTML5 at this point in time for a new website that will have varying users with the full spectrum of browsers (and versions) to access the site?
EDIT: To fill in some more info here. The website in question, for simplistic comparison, would resemble fb. I am not talking a social website just one that will reach that type of vast audience (anyone can join) and will be an interactive portal (not just a site full static content being displayed).
First, HTML5 is a standard that includes the previous standards. Therefore, you are already doing HTML5 without knowing it.
Second, HTML5 could be compared to CSS in terms of feature grouping (CSS = CSS1 + CSS2 + CSS3 and so on). In other words, it is a collection of individual features and not one big thing.
Third, you will have to implement new HTML5 features one day or another. Why wait? Ooh right some people do not care about "modern browsers". You have a responsibility as a Web developer/designer to inform people about the consequences of obsolete browsers.
Last but not least, there is tons of information already... Like this website: http://diveintohtml5.ep.io/.
Some complementary info can be found from this answer and this other answer I wrote for other questions about HTML5.
Have fun! :)
Thank god MS is finally campaigning to get gid of IE6 but it surely will be in China for years to come due to pirated windows software which I had altogether too much experience with; despite this push for higher standards tons still use IE7, 8, and some even 9 is not perfect. Chrome IMOP is exceptional followed by Safari and FF for HTML5 support but even these browsers are not perfect.
I think it is ok to use features css3 and HTML5 such as canvas but in an unobtrusive manner like javascript enhances UI HTML5/CSS3/jQuery should enhance not be the content.
With javascript we can check for browsers and use appropriate methods this concept should also be applied to HTML5. So if you do implement anything I think it's important to understand how to detect and this is probably the best resource to start with.
http://diveintohtml5.ep.io/detect.html
You can use all of the new HTML Field types in forms safely, any HTML 5 inputs in browsers which don't support html 5 will simply fall-back to a standard type="text" inputs.
Mobiles currently seem to benefit from HTML 5 forms most at the moment as they recognise the input type, lets say "email" and then provide an email specific keyboard layout to the user.
Its also simple to provide JavaScript fall backs for some html 5 elements with http://www.modernizr.com/
I'm confused by the discussion and advancement both of a new version of HTML and a new version of XHTML. Are they competitors? If so, what is likeliest to be the adopted future of the web? If not, what is the differing non-competing purpose for each?
Are we due to have a BluRay/HDVD battle here? Is there ultimately any clear decision? I fear a future where browsers pick and choose among the easiest and/or flashiest features of each to implement, leaving web developers trying to sort out the lowest common denominator for any new web app.
HTML 5 is meant for web applications whereas XHTML2 is meant for documents. From the HTML 5 working draft:
XHTML2 defines a new HTML vocabulary with better features for hyperlinks, multimedia content, annotating document edits, rich metadata, declarative interactive forms, and describing the semantics of human literary works such as poems and scientific papers.
However, it lacks elements to express the semantics of many of the non-document types of content often seen on the Web. For instance, forum sites, auction sites, search engines, online shops, and the like, do not fit the document metaphor well, and are not covered by XHTML2.
[HTML5] aims to extend HTML so that it is also suitable in these contexts.
XHTML2 and [HTML5] use different namespaces and therefore can both be implemented in the same XML processor.
XHTML2 and HTML5 are competing standards, they both purport to be the next iteration of HTML.
It is pretty clear that HTML5 is going to win, since it has support by the browser vendors.
XHTML2 is effectively dead. Since w3c(HTMLWG) accepted WHATWG's proposal the work has stopped on XHTML2 (even before that, since the last working draft for xhtml2 is from 2006).
In my opinion HTML5 will be the next dominant format. XHTML is just too unforgiving to be used in a web environment (you can't have the page fail on every small error...).
HTML5 is shaping up to be quite the treat for web developers - a formal spec for the CANVAS element, native drag-and-drop API, an offline storage API, server notifications API (push model), a formal content editing API and much more. If they can deliver even half of what they are proposing to, it will be a major advancement for web applications.
From what I was able to find in a quick google search, I would suggest that these are indeed competing standards. Both are attempting to advance web technology but are following different paths to do so.
For a pretty thorough treatment of the matter you might look at these two links:
http://xhtml.com/en/future/x-html-5-versus-xhtml-2/
http://www.cmswire.com/cms/industry-news/setting-the-standards-html-5-vs-xhtml-2-002032.php
Ultimately it's whatever is supported by browser makers. HTML 5 is feature rich, but the final draft may be years off. There are inherent difficulties in implementing things like audio and video support in 4(+) major rendering engines, and having them all behave the same way. Even validation would be a chore. Most browsers besides IE support the canvas element and SVG, but they still only represent about 25% of the market. With IE still commanding 75-80% of the market share, users who don't use or are oblivious to alternatives will be unable to use more advanced features, giving designers a tough decision.
IE8 is only finally implementing support which other browsers have had for users, meaning that the IE user base will always lag in compatibility. While HTML 5 is a nice idea, I think proprietary solutions such as Flash/AIR and Google Gears will continue to provide standardized support for the rich features HTML 5 provides. The biggest problem really is standardization - you have to design a website with the greatest percentage of users in mind as possible. There is hope, however. A Mozilla developer made a canvas plugin for IE - we could potentially see an open-source IE add-on that brings it up to a certain standard, that users could install much like Flash.
To Microsoft's credit they are being very open with IE8 and Windows 7 development (see their project blogs), so there is the possibility that more proactive IE development will accelerate adoption of HTML 5.
The W3C allowed the xhtml2 working group's charter to expire in 2009. Their resources were rolled into the html5 working group. The html5 spec contains a section entitled The XHTML Syntax.