150

What are the key differences between HTML4 and HTML5 draft?

Please keep the answers related to changed syntax and added/removed html elements.

TylerH
  • 20,799
  • 66
  • 75
  • 101
deepwell
  • 20,195
  • 10
  • 33
  • 39
  • @Inigo The TagSoup tag refers to a *specific thing*: https://web.archive.org/web/20181015153141/http://vrici.lojban.org/~cowan/XML/XML/tagsoup/ and https://javadoc.io/static/org.ccil.cowan.tagsoup/tagsoup/1.2.1/org/ccil/cowan/tagsoup/Parser.html Even if it were just a reference to the general pejorative term, such a tag would be a worthless tag appropriate for burnination. – TylerH Nov 30 '21 at 19:18
  • I added it because HTML5 specifically tries to address tag-soup in the specification, whereas HTML4 left it to browser vendors to figure out for themselves. – Inigo Nov 30 '21 at 19:19

8 Answers8

205

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.

Joel Spolsky
  • 33,372
  • 17
  • 89
  • 105
Xanthir
  • 18,065
  • 2
  • 31
  • 32
  • 15
    Please make some highlight to the tags and sentences by editing the answer. (Its just a suggestion because while I was reading this, it made me tired.) – Mohammad Faisal May 13 '13 at 15:48
45

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
Christian Davén
  • 16,713
  • 12
  • 64
  • 77
12

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.

Richard Chambers
  • 16,643
  • 4
  • 81
  • 106
Zach
  • 24,496
  • 9
  • 43
  • 50
12

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.
SharpC
  • 6,974
  • 4
  • 45
  • 40
Viktor
  • 2,982
  • 27
  • 32
3

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.

Mathias Bynens
  • 144,855
  • 52
  • 216
  • 248
  • 1
    You seem to imply that XHTML 5 exists, while this is not the case. The latest W3C recommendation of XHTML is 1.1, and 2.0 is in the draft stages. – David Rivers Aug 11 '10 at 04:41
  • 4
    @David Rivers: It does exist. [XHTML5 is the XML serialization of HTML5](http://mathiasbynens.be/notes/xhtml5). – Mathias Bynens Aug 11 '10 at 12:20
  • 2
    @David Rivers: By the way, XHTML 2 is not in the draft stages anymore. It has been [discontinued in favor of HTML5](http://www.w3.org/News/2009#item119). – Mathias Bynens Aug 11 '10 at 13:05
  • Thanks. I just discovered this too and cannot believe how out-of-the-loop I've been. It's been a rough year! – David Rivers Aug 11 '10 at 15:43
2

Now W3c provides an official difference on their site:

http://www.w3.org/TR/html5-diff/

Sajit
  • 49
  • 3
0

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.

Bite code
  • 578,959
  • 113
  • 301
  • 329
0

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/

user2909753
  • 1