Document Sample
MY HTML5 NOTES Powered By Docstoc
					   1.   INTRODUCTION
        1.1.   What is HTML5?

HTML5 is the upgraded version of html 4.1(not XHTML) and the futuristic language of the
web. HTML5 improves interoperability and reduces development costs by making precise
rules on how to handle all HTML elements. The HTML5 working group includes AOL, Apple,
Mozilla, Opera and two most important W3C and WHATWG.

WHATWG removed version from HTML5 and called it simply HTML. WHATWG and W3C
specification for HTML are somewhat similar.

        1.2.   What’s New in HTML5?

HTML introduces several new features such as audio and video elements for media playback,
canvas element for drawing objects, new content specific elements like section, nav, header,
footer, article etc., reduce the needs of external plugins (flash) and many more.

        1.3.   Typographic Conventions

This specification uses the “Calibri (body)” font. Below are some indications of this

This is a note.

This is an example.

This is a warning.

        1.4.   A quick Introduction to HTML

A basic HTML document looks like this:-

<! DOCTYPE html>






<h1>Sample Page</h1>
<p>This is a <a href=”demo.htm”>simple</a> sample.</p>

<!--This is a comment -->



The HTML document consists of a tree of elements and text. Each element is denoted by the
start tag such as <body> and an end tag </body>.

Tags have to be nested such that elements are completely within each other, without

<p>This is <em>very<strong>wrong</em>!</strong></p>

<p>This <em>is<strong>correct</strong>.</em></p>

Elements can have attribute which controls how the elements work. In the example below,
there is a hyperlink formed using the a element and its href attribute:

<a href=”demo.htm”>single</a>

Attributes are placed inside the start tag, and consist of a name and a value separated by an
“=” character. In some cases value can be unquoted but it is not a good practice. We can
place the value in single quotation or double quotation.

HTML user agents (e.g. web browser) then parse this markup, turning it into a DOM
(Document Object Model) tree. A DOM tree is an in-memory representation of a document.
DOM tree contains several kinds of nodes (connection). In the above example, it is DOCTYPE
node, elements, text nodes and comment node.

The markup snippet at the top of this section would be turned into the following DOM tree:
Since DOM trees are a way to represent HTML documents when they are processed and
presented by implementations, this specification is mostly phrased in terms of DOM trees
instead of markup described above.

      1.5.   Presentational Markup-Why they are removed?

In this version of HTML, presentational markup such as <u>, <s>, <tt> and all form elements
are removed as it has higher cost of maintenance and are better handled by CSS. Also, it
results in large document size. The only remaining presentational markup feature in HTML
are the style attribute and the style element as it provide internal styling for CSS.

      1.6.   Syntax errors

Errors that result in disproportionally poor performance

For e.g. the following markup would result in poor performance, since all the unclosed <i>
elements have to be reconstructed in each paragraph, resulting in progressively more
elements in each paragraph:

<p><i>He dreamt.

<p><i>He dreamt that he ate breakfast.
<p><i>Then lunch.

<p><i>And finally dinner.

The resulting DOM for this fragment would be:

Errors involving fragile syntax construct
Errors that risk exposing authors to security attacks

For e.g. the restriction on using UTF-7 exists purely to avoid authors falling prey to a known
cross-site-scripting attack using UTF-7.

Errors involving limits that have been imposed merely to simplify the language

Some conformance errors simplify the language that authors need to learn.

For example, the area element's shape attribute, despite accepting both circ and
circle values in practice as synonyms, disallows the use of the circ value, so as to simplify
tutorials and other learning aids. There would be no benefit to allowing both, but it would
cause extra confusion when teaching the language.

       1.7.   Previous Tags used in HTML (Version 4.1)

<!__...__>             A comment
<!DOCTYPE>             The document type(only one in HTML5)
<a>                    Hyperlink to a page or page area
<abbr>                 An abbreviation
<address>              Container for an address
<area>                 An area inside an image map
<b>                    Bold text
<base>                 A base URL for all links in a page
<bdo>          Direction of text display
<blackquote>   A block to text
<body>         Beginning of body element
<br>           A single line break
<button>       A clickable button
<caption>      A table caption
<cite>         Container for a citation
<code>         Format for computer code text
<col>          Defines attributes for table columns
<colgroup>     Container for a value for the <dt> element
<dd>           Definitive Description
<del>          Container for deleted text
<dfn>          Representation of the defining instance of term
<div>          Demarcation of division in a document
<dl>           Head for an definition list
<dt>           Specification for a name in name-value group
<em>           Emphasized text
<fieldset>     Container for a set of form controls
<form>         Container for a form typically with input elements
<h1> to <h6>   Text header 1 to header 6
<head>          Container for the first code to be interpreted by browser
<hr>           Horizontal rule(line)
<html>         Container for an HTML document
<i>            Italic text
<iframe>       Frame an inline sub window
<img>          Image container
<input>        User-input form
<ins>          Container for inserted text within implied paragraph
<kbd>          Container for user keyboard input
<label>        Representation of a caption in a user interface
<legend>       Title in a fieldset border
<li>           List item
<link>         A resource reference(for ex:- CSS)
<map>          Image map container
<mark>         Text in one context marked for text in different context
<menu>         Container for a list of commands
<meta>         Container for meta information
<noscript>     Defines if the script type on the page is unsupported
<object>       Container for embedded object
<ol>           Ordered list
<optgroup>     An option grouping header in an options list
<option>       Container for individual options in a drop-down list
<p>                 Paragraph
<param>             Plug-in parameters
<pre>               Preformatted text
<q>                 Enclosed text with quotation marks
<samp>              Computer code output
<script>            Container for script for CSS, JavaScript or another
                    recognized script
<select>            A selectable list
<small>             Small text
<span>              Inline section
<strong>            Strong text that looks like bold
<style>             Container for a style definition
<sub>               Subscripted text
<sup>               Superscripted text
<table>             A table definition
<tbody>             Demarcation for a block of rows for a table’s body
<td>                A table cell
<textarea>          A text area container
<tfoot>             Representation for a block of rows of column summaries
                    for a table
<th>                Table header format
<thead>             Representation of a block of rows of column summaries
                    for a table header
<title>             The document title
<tr>                Demarcation of a table row
<ul>                Unordered list(a bullet list)
<var>               Variable style in formula

      1.8.   Discontinued tags in HTML5

<acronym>           Replaced by <abbr>
<applet>            Replaced by <object>
<basefont>          Better handled by CSS
<bgsound>           Replaced by <audio>
<big>               Better handled by CSS
<blink>             Removed in HTML5
<center>            Better handled by CSS
<dir>               Replaced by <ul>
<font>               Removed in HTML5
<frame>              Removed in HTML5
<frameset>           Removed in HTML5
<isindex>            Replaced by <form>
<marquee>            Removed in HTML5
<multicol>           Removed in HTML5
<nobr>               Removed in HTML5
<noframes>           Removed in HTML5
<s>                  Better handled by CSS
<spacer>             Removed in HTML5
<strike>             Better handled by CSS
<tt>                 Better handled by CSS
<u>                  Better handled by CSS

      1.9.     New elements in HTML5

<article>            Self-contained composition in document
<aside>              Content tangentially related to content of the article
<audio>              Sound content container
<canvas>             Graphics development container
<command>            A command that the use can invoke
<datalist>           List generator when used with the <input> element and
                     its new list attribute
<details>            Discloses details of an element
<embed>              External interactive plug-in or content
<figcaption>         Caption tag for the figure element
<figure>             Contains a group of media content and their caption
<footer>             Container for a footer for a section or page
<header>             Container for header for a section or page
<hgroup>             A heading of a section with multiple h1 to h6 element in a
<keygen>             The key pair generator control representation
<mark>               A string of text in one document, marked or highlighted
                     for reference in another document
<meter>              Container for known range of values(for ex:- disk use)
<nav>                Representation of a section of a document intended for
<output.             Defines the progress of a task of any kind
<progress>             Representation of the progress made in a task(such as
                       percentage complete in a download operation))
<rp>                   Indicator in Ruby(a programming language) annotations
                       to define what to show browser that don’t support the
                       <ruby> element
<rt>                   Marks the ruby text component of a ruby annotation
<ruby>                 Element for spans with ruby annotations
<section>              Theme identifier for content grouping
<source>               Container for multiple specification of media resources
<summary>              Information on a <details> element
<time>                 Container for a date/time
<track>                Specify text track for HTML5 media elements(<audio> and
<video>                Element for linking to a video file
<wbr>                  Representations of a line break opportunity to guide the
                       hyphenation of long words or text strings.

       1.10.    Kinds of Content

Each element in HTML falls into zero or more categories that group elements with similar
characteristics together. The following broad categories are used:

   •  Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content
Some elements also fall into other categories which will be described later.

       1.11.    Common Infrastructure

       1.11.1              Terminology

This specification refers to both HTML and XML attributes. This specification uses the term
document refers to any use of HTML. The term “transparent black” refers to the color with
red, green, blue and alpha (rgba) channels all set to zero.

The term MIME (Multipurpose Internet Mail Extensions) type is used to refer to what is
sometimes called an Internet media type in protocol literature. The term media type in this
specification is used to refer to the type of media intended for presentation, as used by the
CSS specifications.

The term HTML MIME type is used to refer to the MIME types text/html and text/html-

       1.11.2               Common Microsyntaxes

Boolean attributes:- A no of attributes are Boolean attributes. The presence of Boolean
attribute on an element represents the true value, or absence represents false value. If the
attribute is present, its value must either be the empty string or value that is an ASCII case-

NOTE: The values “true or false” are not allowed in Boolean attribute. To represent a false
value, the value has to be omitted together.

Here is an example of checkbox that is checked and disabled. The checked and disabled
attribute are Boolean attributes.

<label><input type=checkbox checked name=cheese disabled> Cheese</label>

This could be equivalently written as:

<label><input type=checkbox checked=checked name=cheese disabled=disabled>

You can also mix styles; the following is still equivalent:

<label><input type=’checkbox’ checked name=cheese disabled=””> Cheese</label>

Colors:- A simple color consists of three 8-bit numbers in the range 0..255, representing red,
green and blue components of the color respectively in the RGB color space.

Resolving URLs:- Resolving a URL is the process of taking a relative URL and obtaining the
absolute URL that it implies. A relative URL contains only the short path of address while
absolute URL contains the full path.

Shared By:
Description: This is a series of my html5 notes. Hope you like it.