Html5 Notes

Old HTML:
New HTML5:
Getting rid of unnecessary stuff..

HTML5 Structural Elements
HTML5 defines a consistent set of elements for the common structural blocks that
appear on web sites.
Some of them include the header, footer, section, article, aside, nav and so on.
let's learn about the most commonly used structural/semantic tags - header, section, nav and
footer that help in organizing the content on web pages and make the code more readable.
Structural Tags
Tag Description
<a> Defines a hyperlink.
<article> Defines an article.
<aside> Defines some content loosely related to the page content.
<body> Defines the document's body.
<br> Produces a single line break.
<details> Represents a widget from which the user can obtain additional information or controls on-
demand.
<div> Specifies a division or a section in a document.
<h1> to <h6> Defines HTML headings.
<head> Defines the head portion of the document that contains information about the document.
<header> Represents the header of a document or a section.
<hgroup> Defines a group of headings.
<hr> Produce a horizontal line.

<html> Defines the root of an HTML document.
<footer> Represents the footer of a document or a section.
<nav> Defines a section of navigation links.
<p> Defines a paragraph.
<section> Defines a section of a document, such as header, footer etc.
<span> Defines an inline styleless section in a document.
<summary> Defines a summary for the <details> element.
Metadata Tags
Tag Description
<base> Defines the base URL for all linked objects on a page.
<basefont> Obsolete Specifies the base font for a page.
<link> Defines the relationship between the current document and an external resource.
<meta> Provides structured metadata about the document content.
<style> Inserts style information (commonly CSS) into the head of a document.
<title> Defines a title for the document.
Form Tags
Tag Description
<button> Creates a clickable button.
<datalist> Represents a set of pre-defined options for an <input> element.
<fieldset> Specifies a set of related form fields.

<form> Defines an HTML form for user input.
<input> Defines an input control.
<keygen> Represents a control for generating a public-private key pair.
<label> Defines a label for an <input> control.
<legend> Defines a caption for a <fieldset> element.
<meter> Represents a scalar measurement within a known range.
<optgroup> Defines a group of related options in a selection list.
<option> Defines an option in a selection list.
<select> Defines a selection list within a form.
<textarea> Defines a multi-line text input control (text area).
Formatting Tags
Tag Description
<abbr> Defines an abbreviated form of a longer word or phrase.
<acronym> Defines an acronym.
<address> Specifies the author's contact information.
<b> Displays text in a bold style.
<bdi> Represents text that is isolated from its surrounding for the purposes of bidirectional text
formatting.
<bdo> Overrides the current text direction.
<big> displays text in a large size.

<blockquote> Defines a long quotation.
<center> Obsolete ,p. contents in the center of the enclosing block.
<cite> Indicates a citation or reference to another source.
<code> Specifies text as computer code.
<del> Specifies a block of deleted text.
<dfn> Specifies a definition.
<em> Specifies emphasized text.
<font> Obsolete Defines font, color, and size for text.
<i> Displays text in an italic style.
<ins> Defines a block of text that has been inserted into a document.
<kbd> Specifies text as keyboard input.
<mark> Represents text highlighted for reference purposes.
<output> Represents the result of a calculation.
<pre> Defines a block of preformatted text.
<progress> Represents the completion progress of a task.
<q> Defines a short inline quotation.
<rp> Provides fall-back parenthesis for browsers that that don't support ruby annotations.
<rt> Defines the pronunciation of character presented in a ruby annotations.
<ruby> Represents a ruby annotation.

<s> Obsolete Displays text in strikethrough style.
<samp> Specifies text as sample output from a computer program.
<small> Displays text in a smaller size.
<strike> Obsolete Displays text in strikethrough style.
<strong> Indicate strongly emphasized text.
<sub> Defines subscripted text.
<sup> Defines superscripted text.
<tt> Displays text in a teletype style.
<u> Obsolete Displays text with an underline.
<var> Defines a variable.
<wbr> Represents a line break opportunity.
List Tags
Tag Description
<dd> Specifies a definition for a term in a definition list.
<dir> Obsolete Defines a directory list.
<dl> Defines a definition list.
<dt> Defines a term (an item) in a definition list.
<li> Defines a list item.
<ol> Defines an ordered list.

<menu> Represents a list of commands.
<ul> Defines an unordered list.
Table Tags
Tag Description
<caption> Defines the title of a table.
<col> Defines attribute values for one or more columns in a table.
<colgroup> Specifies attributes for multiple columns in a table.
<table> Defines a data table.
<tbody> Groups a set of rows defining the main body of the table data.
<td> Defines a cell in a table.
<tfoot> Groups a set of rows summarizing the columns of the table.
<thead> Groups a set of rows that describes the column labels of a table.
<th> Defines a header cell in a table.
<tr> Defines a row of cells in a table.
Scripting Tags
Tag Description
<noscript> Defines alternative content to display when the browser doesn't support scripting.
<script> Places script in the document for client-side processing.
Embedded Content Tags

Tag Description
<applet> Obsolete Embeds a Java applet (mini Java applications) on the page. Use the <object> element
instead.
<area> Defines a specific area within an image map.
<audio> Embeds a sound, or an audio stream in an HTML document.
<canvas> Defines a region in the document, which can be used to draw graphics on the fly via scripting
(usually JavaScript).
<embed> Embeds external application, typically multimedia content like audio or video into an HTML
document.
<figcaption> Defines a caption or legend for a figure.
<figure> Represents a figure illustrated as part of the document.
<frame> Defines a single frame within a frameset.
<frameset> Defines a collection of frames or other frameset.
<iframe> Displays a URL in an inline frame.
<img> Displays an inline image.
<map> Defines a client-side image-map.
<noframes> Defines an alternate content that displays in browsers that do not support frames.
<object> Defines an embedded object.
<param> Defines a parameter for an object or applet element.
<source> Defines alternative media resources for the media elements like <audio> or <video>.
<time> Represents a time and/or date.
<video> Embeds video content in an HTML document.

10 useful and important HTML5 tags and attributes:
1. A new DOCTYPE declaration

Having problem remembering long and complicated HTML4 / XHTML
1.0 doctype like below?
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
If so, then you will surely love the new doctype by HTML5, which looks
simple, clean and easy to memorize. Here it is:
1 <!DOCTYPE html>
#Tips: Always add the <!DOCTYPE> declaration to your HTML

documents, so that the browser knows what type of document to
expect. – by w3schools
2. Getting Simple – No
more Type attribute
for script and link
This is how you define your <script> and < link> tags in HTML4.
<link rel="stylesheet" type="text/css" href="style.css" />

1
<script type="text/javascript" src="script.js"></script>
2
In HTML5, you don’t have to specify the MIME type value for
your <script> and <link> tag. All scripts and styles are assumed to
be type="text/javascript" and type="text/css" . You can simply write
your code as:
1 <link rel="stylesheet" href="style.css" />
2 <script src="script.js"></script>
#Tips: HTML5 has added new attribute for <script> tag, which
is async. With this attribute, the script will be executed asynchronously
as soon as it is available.
3. Semantic Structure
– header , footer & nav
Previously, we added an id or classes to HTML structure and perhaps,
it can be serve as pseudo-semantic structure. But by nature, div have
no semantic structure even after added an id .
1
<div id="header">
2 ...
3 </div>
4 <div id="nav">
5 <ul>...</ul>
</div>
6
<div id="footer">
7
8 ...
9 </div>
Hereby, HTML5 were created to help us better explain the semantic

structure. New HTML5 tags like <header> , <nav> and <footer> can be
used to replace the mark-up above, with provide semantic structure to
content.
1
<header>
2
...
3 </header>
4 <nav>
5 <ul>...</ul>
6 </nav>
<footer>
7
...
8
</footer>
9
4. Semantic Structure
– article vs section
HTML5 also offers new <article> and <section> tags to help us create
semantic content.
1 <section>
2 ...
3 </section>
<section>tag defines sections in a HTML such as headers, footers, or

any other sections of content.
1 <article>
2 ...
3 </article>
The <article> tag is used to specify independent and self-contained

content.
=== Find out more about HTML5 <article> and <section> tags from
links below! ===
http://oli.jp/2009/html5-structure1/ ( div vs section vs article )
http://www.iandevlin.com/blog/2011/04/html5/html5-section-or-article
5. New HTML5 Form Input Types

and Attributes
HTML5 has introduced 13 new input types and several new attributes
for <form> and <input> tags. However, not all browsers are fully support
HTML5 new input types and attribute. By the way, you might have to
try out these amazing HTML5 form, some new features has been
added for instance the browser-based validation, build-in placeholder
and new input types.
1 <form id="myform">
2 Name: <input name="name" required placeholder="Your name" pattern="[A-z]{7}" />
3 <br/>
Email: <input type="email" name="email" required placeholder="email@inwebson.com"/>

4
<br/>
5
URL: <input type="url" name="url" placeholder="Homepage URL"/>
6
<br/>
7
Age: <input type="number" name="age" min="18" max="99" />
8
<br/>
9 Description: <textarea name="desc" placeholder="Describe yourself here..."></textar
10 <br/>
11 <input type="submit" value="Submit" />
12 </form>
13
The form above using new HTML5 input types

like email, url and number, and new HTML5 input attributes
like required, pattern(regexp), min, max and placeholder.
By the way, you can always check the full list of new HTML5 input
types and attributes here.
#Tips: At this time, we cannot depend on browser validation. A

server/client side solution must still beimplemented. – by tutsplus.com
6. HTML5 Canvas
The most exciting feature, HTML5 <canvas> tag allows us to render 2D
shapes or graphics on web page with help of JavaScript. Moreover,
we’re able to create an animation using HTML5 Canvas.
The HTML below shows a simple HTML5 Canvas declaration and use
JavaScript to draw a blue rectangle on it.
1
<canvas id="myCanvas" width="200" height="200"></canvas>
2
3 <script>
4 var c=document.getElementById("myCanvas");
5 var ctx=c.getContext("2d");
6 ctx.fillStyle="#0000FF";
ctx.fillRect(0,0,150,150);
7
</script>
8
7. HTML5 Audio and Video

Support
Previously, to embed an audio or video file on web page we have to
rely on third party plugin like Flash through <object> and <embed> tags.
To view the media, user requires administrator privileges to install this
plugin as well as the browser has to be able to support this plugin.
<object width="400" height="300">

1
<param name="movie" value="video.mp4" />
2
...
3
<embed src="video.mp4" type="application/x-shockwave-flash" ... ></embed>
4 </object>
HTML5 now introduces a new way to embed media via

the <audio> and <video> tags. With HTML5, at least we don’t have to
worry about plugins problem. But for the time being, not all browsers
but most recent version of browsers offer support for
HTML5 <audio> and <video> tags.
1 <audio controls="controls">
2 <source src="audio.mp3" type="audio/mp3" />
3 <source src="audio.ogg" type="audio/ogg" />
4 Your browser does not support the <audio> tag.
</audio>
5
1 <video controls="controls" width="400" height="300">
2 <source src="movie.mp4" type="audio/mp4" />
3 <source src="media.ogg" type="audio/ogg" />
4 Your browser does not support the <video> tag.
</audio>
5
#Tips: Multiple <source> tags can be specified in

HTML5 <video> and <audio> tags in order to provide different formats for
different browsers.
#Tips: It is a good practice to insert text content between <video> tags

for browsers that do not support the <video> tag.
8. Editable HTML5 Content

HTML5 has offers another cool new attribute – contenteditable . You
can make your content editable with adding
the contenteditable attribute to it. This feature will be more useful if
paired with HTML5 Local Storage (will be explain in below).
1 <div contenteditable="true">
2 Any content here will be editable...
3 </div>
#Tips: You can add contenteditable attribute to your CSS styles to

make it editable. – by css-tricks.com
9. HTML5 Local Storage

Now, no more web browser’s cookies storage needed (perhaps,
depend on your usage)! This is because HTML5 has introduces a new
way to store the data in user’s browser, known as client-side storage.
HTML5 offers two new methods for storing data on user’s browser,
which are localStorage and sessionStorage .
1 <script>
2 localStorage.variableName = "value";
3 alert(localStorage.variableName);
4 localStorage.removeItem("variableName");
5 alert(localStorage.variableName);
</script>
6
The localStorage stores the data with no time limit, which means the
data can be accessible at anytime and any windows/tabs (with some
conditions like same domain and same browser) even if the browser is
restarted.
1 <script>
2 sessionStorage.variableName = "value";
3 alert(sessionStorage.variableName);
4 sessionStorage.removeItem("variableName");
5 alert(sessionStorage.variableName);
</script>
6
10. HTML5 Custom Data- Attribute

Have you ever use custom attributes inside a tag to store arbitrary
data for the purpose of JavaScript? Or store these arbitrary data
using class or rel attribute rather than creating custom attributes for
the purpose of valid HTML markup.
1 <div id="div1" class="style" time="3" order="1"></div>
Thanks to HTML5, we now able to create custom attributes on all

HTML elements with the prefix data- and simultaneously, give us valid
HTML markup.
1 <div id="div1" class="style" data-time="3" data-order="1"></div>

Extra: HTML5 Fix for Internet
Explorer
Internet Explorer up to version 8.0 can’t read HTML5 tags properly,
you can’t style them. Thankfully, Remy Sharp and John Resig have
found a fix for this.
1 
Simply include this script in the <header> tag and you will be able to
style the HTML5 elements in IE.
Input Control Types

HTML5 has added a number of new Input Types like email, color, date, etc. And New Form
Elements like datalist, keygen, and output which simplify addition of some functionalities which
in the past required a lot of JavaScript code.
Audio
Embedding an HTML5 Audio Player is easy and simple to make. However, it's important to
know that not all browsers support the same format.
Control Audio Elements
The audio element can be programmatically controlled from JavaScript code. Here is a
sample code to add a Play button to control the audio file:
<audio id=""demo"" src=""audio.mp3""></audio>

<div>
<button onclick=""document.getElementById('demo').play()"">
Play the Audio </button>
</div>
Video
HTML 5 allows you to do is embed video players. A lot of people are leaning away from Flash
and are using HTML 5.
Custom Video Player

Custom media controls can be created and styled to match the theme by using
JavaScript, CSS and the HTMLMediaElement interface.
HTMLMediaElement interface defines a number of properties, methods, and events to

gather information about the media elements and control their behavior.
HTML5 Graphics
SVG and Canvas are two impressive graphics features introduced by HTML5 to
address a range of graphic scenarios on the modern web.
What is HTML5 Canvas?

Canvas is an HTML5 element that offers a blank canvas to draw graphics. JavaScript
code may access this area through a full set of drawing functions allowing for
dynamically generated graphics.
You can create very promising animations or even interactive games using Canvas.
Introduction to HTML5 Canvas

HTML5 element 'Canvas' gives an easy and powerful way to draw graphics, make photo
compositions and do simple animations using JavaScript. This video gives a brief introduction to
the element 'Canvas'.
Also, Canvas is now being used for building some of the interactive games as well. Visit
www.html5games.com to see some of the cool games created using HTML5.
Animation:
Scalable Vector Graphics (SVG)
HTML5 API;
Modernizr
Modernizr is a cool library that tests and detects browser support for a particular feature
WebStorage API
Cache API
HTML5 presents application cache. In other words, a web application is cached with the
help of a manifest file, to make the application accessible without an internet
connection.
Web Worker
Web Workers offer uncomplicated ways for web content to run scripts in background threads
without affecting the performance of the page.
Geolocation API
A lot of applications and websites include location-aware features like finding local businesses
or showing users location on a map. Geolocation API helps in enabling such features.
File API
HTML5 ultimately offers a standard way to communicate with local files, through the File API
specification. Here, File API is utilized to generate a thumbnail preview of images while the
images are being uploaded, verify uploads mime type matches its file extension or restrict the
size of an upload.

Html5 Notes

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Html5 Notes

Transféré par

Droits d'auteur :

Formats disponibles

Old HTML:

Getting rid of unnecessary stuff..

<a> Defines a hyperlink.

<article> Defines an article.

<aside> Defines some content loosely related to the page content.

<body> Defines the document's body.

<br> Produces a single line break.

<div> Specifies a division or a section in a document.

<h1> to <h6> Defines HTML headings.

<header> Represents the header of a document or a section.

<hgroup> Defines a group of headings.

<hr> Produce a horizontal line.

<footer> Represents the footer of a document or a section.

<nav> Defines a section of navigation links.

<p> Defines a paragraph.

<section> Defines a section of a document, such as header, footer etc.

<span> Defines an inline styleless section in a document.

<summary> Defines a summary for the <details> element.

<basefont> Obsolete Specifies the base font for a page.

<meta> Provides structured metadata about the document content.

<title> Defines a title for the document.

<button> Creates a clickable button.

<datalist> Represents a set of pre-defined options for an <input> element.

<fieldset> Specifies a set of related form fields.

<input> Defines an input control.

<keygen> Represents a control for generating a public-private key pair.

<label> Defines a label for an <input> control.

<legend> Defines a caption for a <fieldset> element.

<meter> Represents a scalar measurement within a known range.

<optgroup> Defines a group of related options in a selection list.

<option> Defines an option in a selection list.

<select> Defines a selection list within a form.

<textarea> Defines a multi-line text input control (text area).

<abbr> Defines an abbreviated form of a longer word or phrase.

<acronym> Defines an acronym.

<address> Specifies the author's contact information.

<b> Displays text in a bold style.

<bdo> Overrides the current text direction.

<big> displays text in a large size.

<center> Obsolete ,p. contents in the center of the enclosing block.

<cite> Indicates a citation or reference to another source.

<code> Specifies text as computer code.

<del> Specifies a block of deleted text.

<dfn> Specifies a definition.

<em> Specifies emphasized text.

<font> Obsolete Defines font, color, and size for text.

<i> Displays text in an italic style.

<kbd> Specifies text as keyboard input.

<mark> Represents text highlighted for reference purposes.

<output> Represents the result of a calculation.

<pre> Defines a block of preformatted text.

<progress> Represents the completion progress of a task.

<q> Defines a short inline quotation.

<rt> Defines the pronunciation of character presented in a ruby annotations.

<ruby> Represents a ruby annotation.

<samp> Specifies text as sample output from a computer program.

<small> Displays text in a smaller size.

<strike> Obsolete Displays text in strikethrough style.

<strong> Indicate strongly emphasized text.

<sub> Defines subscripted text.

<sup> Defines superscripted text.

<tt> Displays text in a teletype style.

<u> Obsolete Displays text with an underline.