Directory:
Semantic tags /improved form/video & audio without plug-in/2D drawing based on JavaScript/editable content/stable data storage/extra resources
Feature 1: Semantic Tags
Why should we semanticize tags? Every HTML tag has its unique definition; and semantizaion enables us to use different tags in different places, which is convenient to read for people, browsers and search engine.
Barrier Free Reading for Mobile Devices:
The CSS interpretation ability of PDA and smart phone is poor; so we need a set of more semantic tags to express the readability of webpage.
The Disabled-Accessible Reading:
Screen reader pronounces different voices according to different tags; so it is important to adopt more semantic tags to express more specific meanings.
Search Engine Friendly:
Although the ranking rules of major search engines are changing, the basic principle is the same—tag match. The semantic tags make spider to decide the key word authority of tag.
Technology Trend:
The original intention of HTML is to use right tag in the right place, and is not to express the non-semantic tag by CSS. HTML5 adopts so many new semantic tags. The format <div id="header"></div> could be expressed by <header>.
Convenient for Operation and Maintenance of Team Work Project:
Semantic naming keep the team work project in order, which promote the efficiency; you don't have to waste time on the meaning of other colleague's CSS naming. In case of individual project, it is also convenient for correction. Semantic naming promotes the project readability.
If the webpage is full of div, it'd be unclear of using semantic tags. It is unnecessary to express a header by non-semantic tag. Let's suppose that if all the tags we use are non-semantic, there would be not format information after we clear away the CSS, which is hard to read; on the other hand, if all the tags are semantic, it would be highly readable for the same assumption. Each browser has its own default CSS which display in different way for each tag; the right use of tags is the key method to test the readability of website.
The greatness of semantic tags lies in the promotion of information sharing and broadcasting. The application of RSS is a really good example. RSS is a highly semanticized XML document; meanwhile, it is also an agreement that everybody provide website information. So we can program under the same agreement that helps us to acquire the information we need, which benefit the mutual exchange of information.
The new HTML5 tags include: <article>, <section>, <aside>, <hgroup>, <header>, <footer>, <nav>, <time>, <mark>, <figure> and <figcaption>.
| <article> : The <article> tag specifies independent, self-contained content. <aside> : The <aside> tag defines some content aside from the content it is placed in. <details> : The <details> tag specifies additional details that the user can view or hide on demand. <figcaption> : The <figcaption> tag defines a caption for a <figure> element. <figure> : The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <header> : The <header> tag is supported in all major browsers. <hgroup> : The <hgroup> tag represents the heading of a section. <section> : The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document. <summary> : The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. <nav> : The <nav> tag defines a section of navigation links. |
Different browsers have different supports of HTML5. Not all HTML5 tags are inline element; article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section should be rendered as block elements. So they should be reset as block elements in CSS.
As for browsers before IE9, some operation for unknown elements will be invalid; for example, <article id=”abc”>This is the content</article> is invalid in the browsers before IE9; if you add CSS rule like this: article {color:red}, there will be no change either.
The new input categories: color, email, date, month, week, time, datetime, datetime-local, number, range, search, tel and url.
The new features: required, autofocus, pattern, list, autocomplete and placeholder.
The new elements: <keygen> <datalist> <output> <meter> <progress>.
The Browser Supports of New Categories:
The Browsers Supports of New Features:
A form example
 <form><fieldset> <legend> Table name </legend> <p><label>Required:</label> <input type=”text” name=”html5requied” required=”true”> <small>Works in Opera & Chrome</small> </p> <p><label>Multiple Files:</label> <input type=”file” name=”html5multiplefileupload” multiple> <small>Works in Chrome, Safari & Firefox</small> </p> <p> <label>List:</label> <input type=”text” name=”html5textwithdatalist” list=”colors”> <datalist id=”colors”> <option value=”Red”> <option value=”Green”> <option value=”Blue”> </datalist> <small>Works in Opera</small> </p> <p> <label>Email:</label> <input type=”email” name=”html5email”> <small>Works in Opera</small> </p> <p> <label>URL:</label> <input type=”url” name=”html5url”> <small>Works in Opera</small> </p> <p> <label>Number:</label> <input type=”number” name=”html5number” min=”1″ max=”10″ step=”1″ value=”1″> <small>Works in Opera</small> </p> <p> <label>Range:</label> <input type=”range” name=”html5range” min=”-100″ max=”100″ value=”0″ step=”10″> <small>Works in Opera, Chrome & Safari</small> </p> <p> <label>Time:</label> <input type=”time” step=”900″ name=”html5time”> <small>Works in Opera</small> </p> <p> <label>Date:</label> <input type=”date” name=”html5date”> <small>Works in Opera</small> </p> <p> <label>Month:</label> <input type=”month” name=”html5month”> <small>Works in Opera</small> </p> <p> <label>Week:</label> <input type=”week” name=”html5week”> <small>Works in Opera</small> </p> <p> <label>DateTime:</label> <input type=”datetime” name=”html5datetime”> <small>Works in Opera</small> </p> </fieldset> <div><button>Submit</button></div></form> |
Advantages:
Document upload control is improved: multi-upload, optional formats and size control.
New types of control: It simplifies the complicated procedure of verification
Inbuilt form verification: it provides new features for input controls of different types.
XML submission: it changed the traditional way of form coding format. The server received form data of XML format.
Today, we talked about the benefits of first 2 features: semantic tags and improved forms; we will discuss video & audio and 2D drawing in part two. To be continued.
