HTML5
Introduction to HTML5, Content Models HTML5 Page Structure
When writing HTML5 documents, one of the first new features that you'll notice is the doc type declaration:
<!DOCTYPE HTML>
The character encoding (charset) declaration is also simplified:
<meta charset="UTF-8">
Some notable new features:
-
Forms
- The Web Forms 2.0 specification allows for creation of more powerful forms and more compelling user experiences.
- Date pickers, color pickers, and numeric stepper controls have been added.
- Input field types now include email, search, and URL.
- PUT and DELETE form methods are now supported.
-
Integrated API (Application Programming Interfaces)
- Drag and Drop
- Audio and Video
- Offline Web Applications
- History
- Local Storage
- Geolocation
- Web Messaging
-
In HTML, elements typically belonged in either the block level or inline content model. HTML5 introduces seven main content models.The HTML5 content models are designed to make the markup structure more meaningful for both the browser and the web designer.
- Metadata
- Embedded
- Interactive
- Heading
- Phrasing
- Flow
- Sectioning
-
Content models:
- Metadata: Content that sets up the presentation or behavior of the rest of the content. These elements are found in the
head of the document.
Elements: <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
- Embedded: Content that imports other resources into the document.
Elements: <audio>, <video>, <canvas>, <iframe>, <img>, <math>, <object>, <svg>
- Interactive: Content specifically intended for user interaction.
Elements: <a>, <audio>, <video>, <button>, <details>, <embed>, <iframe>, <img>, <input>, <label>, <object>, <select>, <textarea>
- Heading: Defines a section header.
Elements: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <group>
- Phrasing: This model has a number of inline level elements in common with HTML4.
Elements: <img>, <span>, <strong>, <label>, <br />, <small>, <sub>, and more.
- Flow content: Contains the majority of HTML5 elements that would be included in the normal flow of the document.
- Sectioning content: Defines the scope of headings, content, navigation, and footers.
Elements: <article>, <aside>, <nav>, <section>
-
Page structure:
nav
-
This tag represents a section of a page that links to other pages or to certain sections within the page. This would be a section with navigation links.
-
Here is an example of a major block of navigation links:
-
Not all of the links in a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links
The audio and video Element
-
To play an audio file in HTML, use the <audio> element:
-
To show a video in HTML, use the <video> element:
-
The controls attribute adds audio/video controls, like play, pause, and volume.
autoplay: When this attribute is defined, audio/video starts playing as soon as it is ready, without asking for the visitor's
permission.
loop: This attribute is used to have the audio/video replay every time it is finished.
-
It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads.
-
The <source> element allows you to specify alternative audio/video files which the browser may choose from. The browser will use the first recognized format.
-
The text between the <audio> or <video> and </audio> or </video> tags will only be displayed in browsers that do not support the <video> element
-
Add Youtube video to your page: HTML Youtube Video
HTML5 Forms
-
placeholder. On <input> and <textarea> elements, this attribute provides a hint to the user of what information can be entered into the field.
<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" placeholder="email@example.com" />
</form>
-
The autofocus attribute makes the desired input focus when the form loads:
<form>
<label for="email">Your e-mail address: </label>
<input type="text" name="email" autofocus/>
</form>
-
The "required" attribute is used to make the input elements required. The form will not be submitted without completing these fields
<form autocomplete="off">
<label for="e-mail">Your e-mail address: </label>
<input name="Email" type="text" required />
<input type="submit" value="Submit"/>
</form>
-
The new search input type can be used to create a search box:
<input id="mysearch" name="searchitem" type="search" />
-
Remember to set a name for your input; otherwise, nothing will be submitted.
-
The <datalist> tag can be used to define a list of pre-defined options for the search field:
<input id="car" type="text" list="colors" />
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Yellow">
</datalist>
The ID of the datalist element must match with the list attribute of the input box.
-
Some other new input types include email, url, and tel. These are especially useful when opening a page on a modern mobile device, which recognizes the input types and opens a corresponding keyboard matching the field's type
<input id="email" name="email" type="email" placeholder="example@example.com" />
<br />
<input id="url" name="url" type="url" placeholder="example.com" />
<br />
<input id="tel" name="tel" type="tel" placeholder="555.555.1211" />
-
New input types: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
-
New input attributes in HTML5: autofocus, form, formaction, formenctype, formmethod, formnovalidate, formtarget, height and width, list, min and max, multiple, pattern (regexp), placeholder, required, step
