I have seen HTML 5 coming up in near future. How does it differ from HTML 4, which has been 'in' for so many years in web development?
thanks
Difference between HTML 5 and HTML 4
And as per W3C
Consider these images (from www.alistapart.com), the structure of a page is hugely different:
HTML4
HTML5
This is just an example, take a look on other comments for articles about this subject
Broadly speaking, there are four main areas of change:
Semantic markup, including the following tags:
<section>
<article>
<header>
<footer>
<nav>
<aside>
<hgroup>
This also covers changes to the <doctype>, <html> and <meta> tags, as well as link relations (the rel attribute on an <a> tag).
Improved form support - mainly semantic additions to input types, and a few neat things like field autofocus and placeholder text.
Multimedia tags - <video>, <audio> and <canvas>. <video> and <audio> are intended to improved better support for embedded media in the page; <canvas> is for programmatic two-dimensional bitmap drawing on the page through JavaScript.
Changes to the DOM that are just accessible through JS - navigator.geolocation, window.localStorage (storing user data offline), window.applicationCache (storing app data offline), web workers (multithreaded JavaScript, with some caveats)
Different parts of HTML are in different stages of specification and implementation - the form changes are poorly supported outside of Safari, the <video> tag is basically unusable in a cross-platform environment (without multiple video formats), and IE has built-in support for next to none of these changes.
The best place to read up on HTML5 that I've seen is Mark Pilgrim's excellent book in progress, Dive into HTML5
HTML 5 differences from HTML 4 by W3C
If you are hesitant to read through a thousand pages of HTML5 specification, take a look at this article. It will give you a good overview of what HTML5 is all about, and it goes to explain how you can use HTML5 right now, since most A-grade browsers actually supports most of the new goodies; like the new HTML-elements and embedded video/audio.
Related
I have a generic question about HTML5. I'm interviewing at the moment some front-end developers and all of them claim that they use HTML5. However I don't see any of them using any HTML5 specific semantic elements. There's no header, sections, footer, article etc.
Does this qualify as HTML5 then?
Can anyone help / explain? Thanks!
Just like it's not required to use a table tag in HTML4, you don't have to use the new semantic tags in order to create a valid HTML5 document. If it has a HTML5 doctype at the top, and validates, it's HTML5.
That said, if an interview candidate had HTML5 on their CV and then didn't use semantic tags when given a good opportunity to demonstrate their knowledge, I'd start asking questions. Semantic tags are one of the many important benefits that HTML5 brings, and to just ignore them perhaps shows the candidate was more keen to put buzzwords on their resume than actually learn useful technologies.
Although we are not using any html elements like headers, sections, articles, footers etc.
The document will be referred as HTML5 unless and until you specify the doctype for it as
<!DOCTYPE html>
The browser will expect it as HTML5 document only. It doesn't throw any error for expecting html5 tags.
You can refer to w3org link for more details.
Any one of the tags? For elements you have named it is possible to make a valid HTML5 web page without using any of them. In fact using them makes things harder because there are lots of rules regarding using header and footer for example in a web page in order to be valid. But not using them when there's a good reason to include them in a page usually means the candidate has some problem with HTML5.
Take a look at http://www.w3.org/TR/html5/sections.html#the-header-element W3 page for more information
From a developer's point of view:
HTML5 does not consist of semantic tags, but semantic tags are the new way to go in developing HTML5. Still HTML5 is an upgraded form of HTML4. It differs in many ways or in less ways then expected. There are some differences that you look for like (again) semantic header, section, footer tags or self closing tags like which in html5 can be (although it validates both ways).
Main point is if it has <!doctype html> or the xhtml version <?xml version="1.0" encoding="UTF-8"?> at the top of the file and if it validates I'dd consider it html5.
You can also read all the differences on w3.org which might give you a better understanding of what to expect.
I'm working for the public sector and I had to take over a web project from my superior. The page is already made accessible to people with disabilities.
While making some changes I thought about changing from HTML4 to HTML5 because I heard it has some new, better aspects for the accessibility.
Does the change really pay off? Or is it just wasted time to convert the code?
HTML5 brings with it a large array of semantic elements that give the user agent further insight into how the page is laid out. It is definitely worth it and shouldn't be too time consuming especially if your styles are decent and don't rely on tag types. You will basically be replacing a bunch of <div>s with their semantic counterparts.
For example, here are some of the new tags in HTML5:
<section>
<nav>
<article>
<aside>
<hgroup>
<header>
<footer>
<time>
<mark>
The other parts of HTML5 like CSS3, local storage, etc. don't really have accessibility benefits.
I suggest reading up more about what all these tags actually mean to make sure you're using them correctly. There were also other changes like clear meanings for the <b>, <em> and <strong> tags.
Support
Some browsers like IE6 (not sure about IE7) don't like these new tags and will mangle the page when used. You can include a polyfill library like Modernizr to fix this up, simply include the script and everything works!
Further reading
Dive into HTML - Semantics
HTML5 Doctor
While html5 is a great standard to aim for, many browsers still don't support the newer tags/markup....enter ARIA or WAI-ARIA (Accessible Rich Internet Applications Suite).
Clarissa Peterson's website gives a nice real-world example of html5 v ARIA. See the section titled HTML5 & ARIA.
Everyone is now talking about HTML5, i dont really understand what is the difference between it and the normal .xhtml
could you please solve some of my doubts:
What are the differences?
What are the advantages and disadvantages?
Is HTML5 considered a markup language or an scripting language?
What are the differences?
HTML 5 is just the next version of HTML. It takes HTML 4 and adds more stuff to it (while throwing out a few bits that shouldn't be used and changes the rules on how to parse it (to what browsers have been doing for the last decade anyway)).
What are the advantages and disadvantages?
It lets you do more stuff.
It doesn't have any disadvantages (other than that the new stuff isn't well supported yet).
Is HTML5 considered a markup language or an scripting language?
It is a markup language with a bunch of DOM APIs.
I guess the confusion is that HTML4 and HTML5 don't do much (on their own). You need javascript and css and that is when the party really starts.
When people are talking about HTML5 I guess they are talking about HTML5+ CSS3 + Javascript (compared to HTML4 + CSS2 + Javascript).
For a good example of the adventures you can have in the new world check this out:
http://slides.html5rocks.com/
Remember this isn't using .NET or PHP or any thing, its "just" HTML5 + javascript + css
pro
fancy new options
more elements to better define your content
video without flash
con
not supported by all browsers
Not a lot of good quality docs available (yet)
And it is still a markup language as it has no dynamic elements in it that are scriptable.
basically html5 is just like html, with some extra tags added,
like the canvas element for drawing, the video and audio elements for media playback, some new content specific elements, like article, footer, header, nav, section. it has also better support for local offline storage. and also some new form controls, like calendar, date, time, email, url and search
So actually not much you couldn't do earlier with some JavaScript (or jquery, as some people like to call it now :p), but it's designed to make those (nowadays) common tasks a lot easier
What are the differences?
See HTML5 differences from HTML4
What are the advantages and disadvantages?
That's going to depend to a certain extent on what you're trying to achieve, but it might help to understand the rationale behind the spec. Basically, backwards compatibility is one of the main goals so, if you avoid using any of the new features like video or canvas, there should be no disadvantages over the previous standards.
Is HTML5 considered a markup language or an scripting language?
From the WHATWG FAQ:
HTML5 is a new version of HTML4,
XHTML1, and DOM Level 2 HTML
addressing many of the issues of those
specifications while at the same time
enhancing (X)HTML to more adequately
address Web applications. Besides
defining a markup language that can be
written in both HTML and XML (XHTML)
it also defines many APIs that form
the basis of the Web architecture.
Some of these APIs were known as "DOM
Level 0" and were never documented
before. Yet they are extremely
important for browser vendors to
support existing Web content and for
authors to be able to build Web
applications.
HTML 5 is the new W3C definition for HTML and will likely represent the direction the internet goes as people find the next killer apps that work in it.
There are the much publicized 'public' coding features like the <video> tag, but I'm wondering what low-level coding tricks people have found so far that could be important, useful, interesting or all of the above.
Some examples I've come across thus far:
Drag-and-drop events that control data transfer - eg:
document.addEventListener("dragstart", function(event)
{
event.dataTransfer.setData("image/png", slides.imageRep());
event.dataTransfer.setData("slides", slides.serializedRep());
// etc.
}, false)
2-dimensional and 3-dimensional graphics through extension of the <canvas> element.
Context-aware html blocks
(as a bonus - the obselecense of the <applet> and <marquee> tags - woohoo!)
<ruby> tag for ideographs
and I'm not sure if this is new, but the <progress> tag - these dynamically updateable tags are going to make the web a richer experience.
Anyone played with these and found some interesting examples of them put together? Some demo code perhaps?
There are nice samples on Chrome Experiments
From the about page:
These experiments were created by
designers and programmers from around
the world using the latest open
standards, including HTML5, Canvas,
SVG, and more
Check out Bespin, from Mozilla Labs - it is a code editor written entirely in JavaScript, using Canvas.
Also, it may not be a "sample" per se, but the Canvas Tutorial on the Mozilla Developer Center is a very good introduction to the <canvas /> element.
What are the key differences between HTML4 and HTML5 draft?
Please keep the answers related to changed syntax and added/removed html elements.
HTML5 has several goals which differentiate it from HTML4.
Consistency in Handling Malformed Documents
The primary one is consistent, defined error handling. As you know, HTML purposely supports 'tag soup', or the ability to write malformed code and have it corrected into a valid document. The problem is that the rules for doing this aren't written down anywhere. When a new browser vendor wants to enter the market, they just have to test malformed documents in various browsers (especially IE) and reverse-engineer their error handling. If they don't, then many pages won't display correctly (estimates place roughly 90% of pages on the net as being at least somewhat malformed).
So, HTML5 is attempting to discover and codify this error handling, so that browser developers can all standardize and greatly reduce the time and money required to display things consistently. As well, long in the future after HTML has died as a document format, historians may still want to read our documents, and having a completely defined parsing algorithm will greatly aid this.
Better Web Application Features
The secondary goal of HTML5 is to develop the ability of the browser to be an application platform, via HTML, CSS, and Javascript. Many elements have been added directly to the language that are currently (in HTML4) Flash or JS-based hacks, such as <canvas>, <video>, and <audio>. Useful things such as Local Storage (a js-accessible browser-built-in key-value database, for storing information beyond what cookies can hold), new input types such as date for which the browser can expose easy user interface (so that we don't have to use our js-based calendar date-pickers), and browser-supported form validation will make developing web applications much simpler for the developers, and make them much faster for the users (since many things will be supported natively, rather than hacked in via javascript).
Improved Element Semantics
There are many other smaller efforts taking place in HTML5, such as better-defined semantic roles for existing elements (<strong> and <em> now actually mean something different, and even <b> and <i> have vague semantics that should work well when parsing legacy documents) and adding new elements with useful semantics - <article>, <section>, <header>, <aside>, and <nav> should replace the majority of <div>s used on a web page, making your pages a bit more semantic, but more importantly, easier to read. No more painful scanning to see just what that random </div> is closing - instead you'll have an obvious </header>, or </article>, making the structure of your document much more intuitive.
From Wikipedia:
New parsing rules oriented towards flexible parsing and compatibility
New elements – section, video, progress, nav, meter, time, aside, canvas
New input attributes – dates and times, email, url
New attributes – ping, charset, async
Global attributes (that can be applied for every element) – id, tabindex, repeat
Deprecated elements dropped – center, font, strike
HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
An API for playing of video and audio which can be used with the new video and audio elements.
An API that enables offline Web applications.
An API that allows a Web application to register itself for certain protocols or media types.
An editing API in combination with a new global contenteditable attribute.
A drag & drop API in combination with a draggable attribute.
An API that exposes the history and allows pages to add to it to prevent breaking the back button.
You'll want to check HTML5 Differences from HTML4: W3C Working Group Note 9 December 2014 for the complete differences. There are many new elements and element attributes. Some elements were removed and others have different semantic value than before.
There are also APIs defined, such as the use of canvas, to help build the next generation of web apps and make sure implementations are standardized.
You might be interested in this list of HTML5 elements and attributes.
Also, please note that it's "HTML 4", not "HTML4". Indeed, for HTML 5, both variants are used, but there is an important difference in meaning. HTML 5 refers to the name of the W3C specification, whereas "HTML5" is the document type of those HTML files with a text/html MIME type that follow this spec.
The same goes for XHTML 5 vs. XHTML5.
Now W3c provides an official difference on their site:
http://www.w3.org/TR/html5-diff/
HTML 5 invites you give add a lot of semantic value to your code. What's more, there are natives solution to embed multimedia content.
The rest is important, but it's more technical sugar that will save you from doing the same stuff with a client programming language.
In short it is much simple compared to html, the long doctype is removed and also center and font tag is removed.
I also answered this difference in my blog :
http://ravisinghblog.in/key-difference-between-html-and-html-5/