: What is new in HTML5/CSS3? I've seen this site and this site, but that's a lot to digest. What are the main things about HTML5 that make it different/better than regular old (X)HTML/CSS?
I've seen this site and this site, but that's a lot to digest. What are the main things about HTML5 that make it different/better than regular old (X)HTML/CSS?
More posts by @Si4351233
10 Comments
Sorted by latest first Latest Oldest Best
Because no one has put this yet:
HTML5 is great for what everyone has listed, but it also includes standard geolocation, web workers, web socket, canvas, and localStorage. All these tools are parts of the HTML5 spec, which use a lot of JavaScript behind the scenes to make it happen.
With regards to CSS3 - have alook at css3please.com/ to see what you can do.
The later your browser, the more likely you will be able to see the effects.
This doesn’t offer an opinion on importance, but it’s a useful delta between HTMLs 4 and 5.
www.w3.org/TR/2010/WD-html5-diff-20100624/
My 2¢ on the main improvements:
<section> and the new header outlining algorithm (I did say it was just my 2¢)
new form elements, e.g. <input type=email>
data-* attributes
client-side storage
native <audio> and <video>
Jeremy Kieth just released a really good book on the topic, "HTML5 for Web Designers". you might want to check that out.
It is the first book from A Book Apart. Highly recommend it to intermediate to advanced designers. A++
books.alistapart.com/
NOTE: you may have to wait to get a hard copy
To keep track of features and specifications support you can check When can I use. It includes HTML5 and CSS3 features and things like SVG, PNG, CSS2.1 and CSS2. It also tracks their status of approval (Recommendation, Proposed Recommendation, Candidate Recommendation, Working Draft, IETF standard). FindMeByIP maintains matrices of supported CSS3 features only, by browser.
Some rejiggering and simplification of syntax took place in the nuts and bolts:
Simplified doctype string: <!DOCTYPE html>
Simplified language attribute for <html> tag: <html lang="en">(can still include xmlns and xml:lang if you want XML compliance)
Dedicated <meta> tag for charset: <meta charset="utf-8" />
script no longer accepts type attribute, requires charset for remote scripts:<script src="/media/js/jquery.js" charset="utf-8"></script>(inline scripts need no additional attributes at all)
HTML5 brings the ability for your markup to be much more semantic, and overall much easier to read/write and have smaller file sizes. Instead of having <div id="nav">, you just have <nav>. Doesn't seem like much but it adds up.
Many elements from XHTML1 and HTML4 have been deprecated. The following elements are not supported in HTML5: <acronym>, <applet>, <basefont>, <big>, <center>, <dir>, <font>, <frame>, <frameset>, <noframes>, <s>, <strike>, <tt>, <u> and <xmp>.
Several new elements in HTML5 are meant to only add more semantic markup, and will do nothing except provide a more meaningful alternative to <div>. These new elements include: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure>, and <figcaption>.
HTML5 forms are greatly improved.
New Input Types
color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel, and url
New Attributes:
required, autofocus, pattern, list, autocomplete and placeholder
New Elements
<keygen>, <datalist>, <output>, <meter> and <progress>
We could go into forms all day, but here are some resources to explain all this new stuff better.
A Form of Madness
The Future of The Web: How We’ll Create Form in HTML5
HTML5 Input Types
Have a Field Day with HTML5 Forms
Rethinking Forms in HTML5
HTML5 Forms Are Coming
CSS3 brings the wonderful of Media Queries. Media Queries are so, so, so great. Not available in IE8 and below, but will be supported by IE9.
CSS3 has incrementing counters. You can use these to auto-number elements without an ordered-list using the :before pseudo-selector and the content style when an ordered-list or numbering would be semantically incorrect. (For example, numbering the steps of filling out form fields.)
If you're a fan of CSS Resets, there's an HTML5 CSS Reset available from HTML5 Doctor. I have made three additions to this reset for my personal pages:
text-rendering: optimizeLegibility; added to the styles in the definition for <body>
label included in definition with input and select since it needs vertical-align: middle;
styles for ins and :focus from Eric Meyer's CSS Reset added back in
A competing reset called reset5 is available, but I have not yet evaluated it personally. It is based on both the Eric Meyer and HTML5 Doctor resets.
The HTML5 Security Cheatsheet tracks bugs in HTML5 features as implemented in various browsers, and also includes bugs in existing features that are good to keep track of as well.
Using HTML5 elements does not automatically make your code semantic, however. The WHATWG has written an article called <section> is not just a "semantic <div>" explaining that it is not simply a container element.
In HTML 5, there is an algorithm for constructing an outline view of documents. This can be used, for example by AT, to help a user navigate through a document. And <section> and friends are an important part of this algorithm. Each time you nest a <section>, you increase the outline depth by 1 (in case you are wondering what the advantages of this model are compared to the traditional <h1>-<h6> model, consider a web based feedreader that wants to integrate the document structure of the syndicated content with that of the surrounding site. In HTML 4 this means parsing all the content and renumbering all the headings. In HTML5 the headings end up at the right depth for free).
...
If you just blindly convert all the <div>s on your pages to <sections> it's pretty unlikely your page will have the outline you expected. And, apart from being a semantic faux-pas, this will confuse the hell out of people who rely on headings for navigation.
Like everything else in this world, there's a framework for HTML5 web applications called SproutCore, built by an ex-Apple engineer named Charles Jolley.
In addition to html5rocks.com you can keep up with html5doctor.com and html5gallery.com.
HTML5 is huge, but also awesome.
In my view, it is mostly about interoperability. The spec goes and specifies even edge cases to try and make sure that all browsers read the markup the same way.
In second place, HTML5 has video and audio, which do exactly what the name says it does. If you want to include video or audio, HTML5 should reduce your plugin needs.
In third place, HTML5 includes lots of accessibility and semantic help. For instance, elements like <section> and <article> help machines figure out what content is supposed to be. New input types like <input type=email> can also be useful for the same reasons, although the new input types include custom UIs which make them useful even for "common" human readers.
Note that the new Forms features are much more than new input types. It also includes support for placeholder text and several other attributes.
HTML5 includes <canvas>, which allows drawing 2D(and, with WebGL, 3D) shapes like charts or even render games.
Old behavior is now standardized, such as Internet Explorer's ancient contentEditable.
The DOCTYPE is finally decent! You can now actually memorize it! <!DOCTYPE html>
Specifying encoding is also easier, with <meta charset=utf-8>.
If you want to send data to the client and associate it with elements, you can now do it with custom attributes. For instance, <div data-status=open>Open</div> is now finally allowed. Note that custom attribute names must be prefixed with data-.
You can now include SVG and MathML in HTML documents. Previously, you could only do it with XHTML documents.
Among the multiple new functions and fields HTML5 defines, one of the most impressive is classList, which enables you to manipulate the class attribute more easily. Instead of having to getAttribute/setAttribute and use complex hacks to figure out which classes an element has and remove a specific class from that element, classList makes those hard situations very simple.
There are also multiple related specs, such as Web Workers, Web Sockets and IndexedDB, which are not really part of HTML5 but everybody talks about them as if they were. They are very useful for taking advantage of multi-core computers, communicating with servers and storing data locally.
As for CSS3, it includes support for animations, transitions, rounded borders and the flexible box model.
Also new in CSS3 are the new selectors, which make it simpler to match specific elements on a page(such as only the odd or even rows in a table).
Opacity, new units, marquee and ruby are also part of CSS3.
I think that pretty much covers all important parts.
Audio and video tags allow for presenting media without the need for a plugin like Flash or Silverlight, and most importantly works on the iPhone and iPad browsers. There are some issues that need to be worked out regarding codecs and digital rights management.
I find the new HTML elements rather interesting...some of them are promising semantic replacements for generic divs. The promising new elements include article, section, aside, figure, nav, header, and footer, among others. I really like the idea of semantic elements replacing meaningless containers.
Oh yeah, a related item: the much-simplified doctype - finally something I can type from memory!
(This is my answer to a similar question over on webapps.stackexchange.com)
The Canvas and Web Worker Threads are the most exciting aspects of HTML5 to me. I have written some web apps that make use of those features:
GioAUTHor [sic] makes extensive use of the canvas to let you plot paths on a map and then find the shortest route from the start to the finish (via Dijkstra's algorithm in JavaScript).
JavaScript Thread Demo makes limited use of the canvas but shows the use of Worker Threads, complete with demo code. It also makes use of the HTML5 input type="range" slider control.
HTML5 Browser support is as varied as the browsers themselves. There's a nice site (in HTML5, natch) about HTML5 readiness that shows who's ready for what.
There are the basic layout thing like border-radius, shadows (box/text), rgba support, and so on; This is what CSS3 is most known for. More interesting are the canvas tag, video tag, local storage, websockets and so on that will create much richer user experiences in plain HTML/JS/CSS. These features have the potential to be a great alternative for Flash on the web without the need of additional plugins.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.