Your Site Title

HTML5

因为需要使不同的用户在不同的环境下都可以使用(用户体验可以不同), 那么需要有design defensively

Cross-browser compatibility
Responsive Web design
Performance
Accessibility
Internationalization
Privacy & Security

New Features

New Semantic Elements − These are like <header>, <footer>, and <section>.
Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for tag.
Persistent Local Storage − To achieve without resorting to third-party plugins.
WebSocket − A next-generation bidirectional communication technology for web applications.
Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.
Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins.
Geolocation − Now visitors can choose to share their physical location with your web application.
Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
Drag and drop − Drag and drop the items from one location to another location on the same webpage.

Differences to html4

HTML syntax & Doctype

html4.0.1: HTML 4.01 strict <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> HTML 4.01 Transitional <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

html5: <!DOCTYPE html> xml <?xml version=”1.0” encoding=”UTF-8”?> <html xmlns="http://www.w3.org/1999/xhtml">

Character encoding

html4: 仍然支持

html5:

better structure

section − This tag represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article.
aside − This tag represents a piece of content that is only slightly related to the rest of the page.
header − This tag represents the header of a section.
footer − This tag represents a footer for a section and can contain information about the author, copyright information, et cetera.
nav − This tag represents a section of the document intended for navigation.
dialog − This tag can be used to mark up a conversation.

figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

<!DOCTYPE html> 

  <html>  
     <head> 
        <meta charset = "utf-8"> 
        <title>...</title> 
     </head> 
      
     <body> 
        <header>...</header> 
        <nav>...</nav> 
          
        <article> 
           <section> 
              ... 
           </section> 
        </article> 
        <aside>...</aside> 
          
        <footer>...</footer> 
     </body> 
  </html> 

Reference

HTML5 Differences from HTML4
HTML5 - Overview
Structuring the web with HTML
Front-end web developer

This site is open source. Improve this page.