Showing posts with label html4. Show all posts
Showing posts with label html4. Show all posts

Wednesday, 4 January 2012

HTML SESSION 2


Getting Started with HTML 5

The most common format for publishing documents on the web and creating web applications is HTML. From its beginning as a relatively simple language primarily designed for describing scientific documents, it has grown and adapted to a wide variety needs ranging from publishing news and blogs, to providing the foundation for full blown applications for email, maps, word processing and spreadsheets.
As the uses of HTML have grown, the demands placed upon it by authors have increased and the limitations of HTML become more pronounced. HTML 5 is represents the next major step in the development of HTML, introducing a wide range of new features into the language. Authors who are familiar with previous versions of HTML are advised to familiarise themselves with the differences from HTML 4 [HTML4DIFF]
This section provides an introductory tutorial to help get you started with HTML, and is suitable for beginners. Experienced authors may choose to skip this section and proceed to the syntax overview and the element reference.

  A Basic Document

The goal of this section is to walk people though creating example01.html

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>Example 01</title>
 </head>
 <body>
  <p>This is my first document.</p>
 </body>

</html>
To begin, we’re going to create a very basic HTML document, which will also serve as a useful template for future HTML documents. This document will simply contain a title and short paragraph.
Open a text editor and create a new, empty file. I suggest you save the file as example01.html.
All HTML documents need to begin with a DOCTYPE. The DOCTYPE is a remnant from the early days of the web. For historical reasons, it is needed to ensure that web browsers interpret the document correctly, rather than using a special compatibility mode designed to replicate the behaviour of older browsers.
In your text editor, type the following on the first line, and save the file.
<!DOCTYPE html>
Because this is required for all documents, it is good practice to get in the habit of always typing that as the first line in all new HTML documents you create, so that it never gets forgotten.
An HTML document is divided into two main sections. The head, which is used to contain document metadata, such as the title, stylesheets and scripts; and the body, which contain all of the page’s content. The markup itself forms a tree structure, as illustrated in the following diagram.

 Understanding Semantics

In general, the purpose of writing and publishing a document is to convey information to the readers. This could be any kind of information, such as telling a story, reporting news and current affairs or describing available products and services. Whatever the information is, it needs to be conveyed to the reader in a way that can be easily understood.
A typical document, such as an book, news article, blog entry or letter is often grouped into different sections containing a variety of headings, paragraphs, lists, tables, quotes and various other typographical structures. All of these structures are important for more easily conveying information to the reader. HTML provides the means to clearly identify each of these structures in a way that can then be easily presented to the user. In essence, this is the purpose of markup, and HTML in particular.
Markup is a machine readable language that describes aspects of a document such as its structure, semantics and/or style. Some markup languages are designed solely for the purpose of describing the presentation of the document, such as RTF (Rich Text Format). Others, such as HTML, are more generic and rather than focussing on describing the presentation, they are designed to focus on describing the meaning or purpose of the content and leave the presentation for another layer to deal with.
HTML provides a wide variety of semantic elements that can be used to mark up various common typographical structures. There are heading elements for marking up different levels of headings, a paragraph (p) element for paragraph, various list elements for marking up different types of lists, and a table elements for marking up tables.
It’s important to distinguish between the structure and semantics of content, which should be described using HTML, and its presentation. In one document, a heading may be presented visually in a large bold typeface with wide margins above and below to separate it from the surrounding content and make it stand out. In another document, a heading may be presented in a light coloured, italic, fancy script typeface. But regardless of the presentation, it’s still a heading and the markup can still uses the same basic elements for identifying common structures.
Posted by at No comments:
Labels: , , , , ,

DIFFRENCE BETWEEN HTML4 AND HTML5

1. Introduction

             HTML has been in continuous evolution since it was introduced to the Internet in the early 1990s. Some features were introduced in specifications; others were introduced in software releases. In some respects, implementations and author practices have converged with each other and with specifications and standards, but in other ways, they continue to diverge.
              HTML4 became a W3C Recommendation in 1997. While it continues to serve as a rough guide to many of the core features of HTML, it does not provide enough information to build implementations that interoperate with each other and, more importantly, with a critical mass of deployed content. The same goes for XHTML1, which defines an XML serialization for HTML4, and DOM Level 2 HTML, which defines JavaScript APIs for both HTML and XHTML. HTML5 will replace these documents. [HTML4] [XHTML1]
           The HTML5 draft reflects an effort, started in 2004, to study contemporary HTML implementations and deployed content. The draft:
  • Defines a single language called HTML5 which can be written in HTML syntax and in XML syntax.
  • Defines detailed processing models to foster interoperable implementations.
  • Improves markup for documents.
  • Introduces markup and APIs for emerging idioms, such as Web applications.

1.1. Open Issues

                  HTML5 is still a draft. The contents of HTML5, as well as the contents of this document which depend on HTML5, are still being discussed on the HTML Working Group and WHATWG mailing lists. The open issues are linked from the HTML5 draft.

1.2. Backwards Compatible

             HTML5 is defined in a way that it is backwards compatible with the way user agents handle deployed content. To keep the authoring language relatively simple for authors several elements and attributes are not included as outlined in the other sections of this document, such as presentational elements that are better dealt with using CSS.
                 User agents, however, will always have to support these older elements and attributes and this is why the  HTML5 specification clearly separates requirements for authors and user agents. For instance, this means that authors cannot use the isindex or the plaintext element, but user agents are required to support them in a way that is compatible with how these elements need to behave for compatibility with deployed content.
              Since HTML5 has separate conformance requirements for authors and user agents there is no longer a need for marking features "deprecated".

1.3. Development Model

              The HTML5 specification will not be considered finished before there are at least two complete implementations of the specification. A test suite will be used to measure completeness of the implementations. This approach differs from previous versions of HTML, where the final specification would typically be approved by a committee before being actually implemented. The goal of this change is to ensure that the specification is implementable, and usable by authors once it is finished.

2. Syntax

HTML5 defines an HTML syntax that is compatible with HTML4 and XHTML1 documents published on the Web, but is not compatible with the more esoteric SGML features of HTML4, such as processing instructions and shorthand markup as these are not supported by most user agents. Documents using the HTML syntax are almost always served with the text/html media type.
HTML5 also defines detailed parsing rules (including "error handling") for this syntax which are largely compatible with popular implementations. User agents must use these rules for resources that have the text/html media type. Here is an example document that conforms to the HTML syntax: 
 
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body> 
</html>

HTML5 also defines a text/html-sandboxed media type for documents using the HTML syntax. This can be used when hosting untrusted content.
The other syntax that can be used for HTML5 is XML. This syntax is compatible with XHTML1 documents and implementations. Documents using this syntax need to be served with an XML media type and elements need to be put in the http://www.w3.org/1999/xhtml namespace following the rules set forth by the XML specifications. [XML]
Below is an example document that conforms to the XML syntax of HTML5. Note that XML documents must be served with an XML media type such as application/xhtml+xml or application/xml. 
 
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Example document</title>
  </head>
  <body>
    <p>Example paragraph</p>
  </body>
</html>

2.1. Character Encoding

For the HTML syntax of HTML5, authors have three means of setting the character encoding:
  • At the transport level. By using the HTTP Content-Type header for instance.
  • Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used.
  • Using a meta element with a charset attribute that specifies the encoding within the first 1024 bytes of the document. E.g. <meta charset="UTF-8"> could be used to specify the UTF-8 encoding. This replaces the need for <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> although that syntax is still allowed.
For the XML syntax, authors have to use the rules as set forth in the XML specifications to set the character encoding.

2.2. The DOCTYPE

The HTML syntax of HTML5 requires a DOCTYPE to be specified to ensure that the browser renders the page in standards mode. The DOCTYPE has no other purpose and is therefore optional for XML. Documents with an XML media type are always handled in standards mode. [DOCTYPE]
The DOCTYPE declaration is <!DOCTYPE html> and is case-insensitive in the HTML syntax. DOCTYPEs from earlier versions of HTML were longer because the HTML language was SGML-based and therefore required a reference to a DTD. With HTML5 this is no longer the case and the DOCTYPE is only needed to enable standards mode for documents written using the HTML syntax. Browsers already do this for <!DOCTYPE html>.

2.3. MathML and SVG

The HTML syntax of HTML5 allows for MathML and SVG elements to be used inside a document. E.g. a very simple document using some of the minimal syntax features could look like: 
<!doctype html>
<title>SVG in text/html</title>
<p>
 A green circle:
 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>
</p>
More complex combinations are also possible. E.g. with the SVG foreignObject element you could nest MathML, HTML, or both inside an SVG fragment that is itself inside HTML.

2.4. Miscellaneous

There are a few other syntax changes worthy of mentioning:
  • HTML now has native support for IRIs, though they can only be fully used if the document encoding is UTF-8 or UTF-16.
  • The lang attribute takes the empty string in addition to a valid language identifier, just like xml:lang does in XML.

3. Language

This section is split up in several subsections to more clearly illustrate the various differences there are between HTML4 and HTML5.

3.1. New Elements

The following elements have been introduced for better structure:
  • section represents a generic document or application section. It can be used together with the h1, h2, h3, h4, h5, and h6 elements to indicate the document structure.
  • article represents an independent piece of content of a document, such as a blog entry or newspaper article.
  • aside represents a piece of content that is only slightly related to the rest of the page.
  • hgroup represents the header of a section.
  • header represents a group of introductory or navigational aids.
  • footer represents a footer for a section and can contain information about the author, copyright information, etc.
  • nav represents a section of the document intended for navigation.
  • figure represents a piece of self-contained flow content, typically referenced as a single unit from the main flow of the document.

    <figure>
 <video src="example.webm" controls></video>
 <figcaption>Example</figcaption>
</figure>
     
    figcaption can be used as caption (it is optional).
Then there are several other new elements:
  • video and audio for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
  • track provides text tracks for the video element.
  • embed is used for plugin content.
  • mark represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context.
  • progress represents a completion of a task, such as downloading or when performing a series of expensive operations.
  • meter represents a measurement, such as disk usage.
  • time represents a date and/or time.
  • ruby, rt and rp allow for marking up ruby annotations.
  • bdi represents a span of text that is to be isolated from its surroundings for the purposes of bidirectional text formatting.
  • wbr represents a line break opportunity.
  • canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs or games.
  • command represents a command the user can invoke.
  • details represents additional information or controls which the user can obtain on demand. The summary element provides its summary, legend, or caption.
  • datalist together with the a new list attribute for input can be used to make comboboxes:
    <input list="browsers">
<datalist id="browsers">
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
</datalist>
  • keygen represents control for key pair generation.
  • output represents some type of output, such as from a calculation done through scripting.
The input element's type attribute now has the following new values:
The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user's address book, and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

3.2. New Attributes

HTML5 has introduced several new attributes to various elements that were already part of HTML4:
  • The a and area elements now have a media attribute for consistency with the link element.
  • The area element, for consistency with the a and link elements, now also has the hreflang, type and rel attributes.
  • The base element can now have a target attribute as well, mainly for consistency with the a element. (This is already widely supported.)
  • The meta element has a charset attribute now as this was already widely supported and provides a nice way to specify the character encoding for the document.
  • A new autofocus attribute can be specified on the input (except when the type attribute is hidden), select, textarea and button elements. It provides a declarative way to focus a form control during page load. Using this feature should enhance the user experience as the user can turn it off if the user does not like it, for instance.
  • A new placeholder attribute can be specified on the input and textarea elements. It represents a hint intended to aid the user with data entry.
    <input type=email placeholder="a@b.com">
  • The new form attribute for input, output, select, textarea, button, label, object and fieldset elements allows for controls to be associated with a form. These elements can now be placed anywhere on a page, not just as descendants of the form element, and still be associated with a form.
    <label>Email:
 <input type=email form=foo name=email>
</label>
<form id=foo></form>
  • The new required attribute applies to input (except when the type attribute is hidden, image or some button type such as submit), select and textarea. It indicates that the user has to fill in a value in order to submit the form. For select, the first option element has to be a placeholder with an empty value. 
    <label>Color: <select name=color required>
 <option value="">Choose one
 <option>Red
 <option>Green
 <option>Blue
</select></label>
  • The fieldset element now allows the disabled attribute which disables all descendant controls when specified, and the name attribute which can be used for script access.
  • The input element has several new attributes to specify constraints: autocomplete, min, max, multiple, pattern and step. As mentioned before it also has a new list attribute which can be used together with the datalist element. It also now has the width and height attributes to specify the dimensions of the image when using type=image.
  • The input and textarea elements have a new attribute named dirname that causes the directionality of the control as set by the user to be submitted as well.
  • The textarea element also has two new attributes, maxlength and wrap which control max input length and submitted line wrapping behavior, respectively.
  • The form element has a novalidate attribute that can be used to disable form validation submission (i.e. the form can always be submitted).
  • The input and button elements have formaction, formenctype, formmethod, formnovalidate, and formtarget as new attributes. If present, they override the action, enctype, method, novalidate, and target attributes on the form element.
  • The menu element has two new attributes: type and label. They allow the element to transform into a menu as found in typical user interfaces as well as providing for context menus in conjunction with the global contextmenu attribute.
  • The style element has a new scoped attribute which can be used to enable scoped style sheets. Style rules within such a style element only apply to the local tree.
  • The script element has a new attribute called async that influences script loading and execution.
  • The html element has a new attribute called manifest that points to an application cache manifest used in conjunction with the API for offline Web applications.
  • The link element has a new attribute called sizes. It can be used in conjunction with the icon relationship (set through the rel attribute; can be used for e.g. favicons) to indicate the size of the referenced icon. Thus allowing for icons of distinct dimensions.
  • The ol element has a new attribute called reversed. When present, it indicates that the list order is descending.
  • The iframe element has three new attributes called sandbox, seamless, and srcdoc which allow for sandboxing content, e.g. blog comments.
Several attributes from HTML4 now apply to all elements. These are called global attributes: accesskey, class, dir, id, lang, style, tabindex and title. Additionally, XHTML 1.0 only allowed xml:space on some elements, which is now allowed on all elements in XHTML documents.
There are also several new global attributes:
  • The contenteditable attribute indicates that the element is an editable area. The user can change the contents of the element and manipulate the markup.
  • The contextmenu attribute can be used to point to a context menu provided by the author.
  • The data-* collection of author-defined attributes. Authors can define any attribute they want as long as they prefix it with data- to avoid clashes with future versions of HTML. The only requirement on these attributes is that they are not used for user agent extensions.
  • The draggable and dropzone attributes can be used together with the new drag & drop API.
  • The hidden attribute indicates that an element is not yet, or is no longer, relevant.
  • The role and aria-* collection attributes which can be used to instruct assistive technology.
  • The spellcheck attribute allows for hinting whether content can be checked for spelling or not.
HTML5 also makes all event handler attributes from HTML4, which take the form onevent-name, global attributes and adds several new event handler attributes for new events it defines. E.g. the play event which is used by the API for the media elements (video and audio).

3.3. Changed Elements

These elements have slightly modified meanings in HTML5 to better reflect how they are used on the Web or to make them more useful:
  • The a element without an href attribute now represents a placeholder for where a link otherwise might have been placed. It can also contain flow content rather than being restricted to phrasing content.
  • The address element is now scoped by the new concept of sectioning.
  • The b element now represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.
  • The cite element now solely represents the title of a work (e.g. a book, a paper, an essay, a poem, a score, a song, a script, a film, a TV show, a game, a sculpture, a painting, a theatre production, a play, an opera, a musical, an exhibition, a legal case report, etc). Specifically the example in HTML4 where it is used to mark up the name of a person is no longer considered conforming.
  • The dl element now represents an association list of name-value groups, and is no longer said to be appropriate for dialogue.
  • The head element no longer allows the object element as child.
  • The hr element now represents a paragraph-level thematic break.
  • The i element now represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.
  • For the label element the browser should no longer move focus from the label to the control unless such behavior is standard for the underlying platform user interface.
  • The menu element is redefined to be useful for toolbars and context menus.
  • The s element now represents contents that are no longer accurate or no longer relevant.
  • The small element now represents side comments such as small print.
  • The strong element now represents importance rather than strong emphasis.
  • The u element now represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.

3.4. Changed Attributes

The value attribute for the li element is no longer deprecated as it is not presentational. The same goes for the start attribute of the ol element.
The target attribute for the a and area elements is no longer deprecated, as it is useful in Web applications, e.g. in conjunction with iframe.
The type attribute on script and style is no longer required if the scripting language is ECMAScript and the styling language is CSS respectively.
The border attribute on table only allows the values "1" and the empty string.
The following attributes are allowed but authors are discouraged from using them and instead strongly encouraged to use an alternative solution:
  • The border attribute on img. It is required to have the value "0" when present. Authors can use CSS instead.
  • The language attribute on script. It is required to have the value "JavaScript" (case-insensitive) when present and cannot conflict with the type attribute. Authors can simply omit it as it has no useful function.
  • The name attribute on a. Authors can use the id attribute instead.
  • The summary attribute on table. The HTML5 draft defines several alternative solutions.
  • The width and height attributes on img and other elements are no longer allowed to contain percentages.

3.5. Absent Elements

The elements in this section are not to be used by authors. User agents will still have to support them and various sections in HTML5 define how. E.g. the obsolete isindex element is handled by the parser section.
The following elements are not in HTML5 because their effect is purely presentational and their function is better handled by CSS:
  • basefont
  • big
  • center
  • font
  • strike
  • tt
The following elements are not in HTML5 because using them damages usability and accessibility:
  • frame
  • frameset
  • noframes
The following elements are not included because they have not been used often, created confusion, or their function can be handled by other elements:
  • acronym is not included because it has created a lot of confusion. Authors are to use abbr for abbreviations.
  • applet has been obsoleted in favor of object.
  • isindex usage can be replaced by usage of form controls.
  • dir has been obsoleted in favor of ul.
Finally the noscript element is only conforming in the HTML syntax. It is not included in the XML syntax as its usage relies on an HTML parser.

3.6. Absent Attributes

Some attributes from HTML4 are no longer allowed in HTML5. The specification defines how user agents should process them in legacy documents, but authors must not use them and they will not validate.
HTML5 has advice on what you can use instead.
  • rev and charset attributes on link and a.
  • shape and coords attributes on a.
  • longdesc attribute on img and iframe.
  • target attribute on link.
  • nohref attribute on area.
  • profile attribute on head.
  • version attribute on html.
  • name attribute on img (use id instead).
  • scheme attribute on meta.
  • archive, classid, codebase, codetype, declare and standby attributes on object.
  • valuetype and type attributes on param.
  • axis and abbr attributes on td and th.
  • scope attribute on td.
  • summary attribute on table.
In addition, HTML5 has none of the presentational attributes that were in HTML4 as their functions are better handled by CSS:
  • align attribute on caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
  • alink, link, text and vlink attributes on body.
  • background attribute on body.
  • bgcolor attribute on table, tr, td, th and body.
  • border attribute on object.
  • cellpadding and cellspacing attributes on table.
  • char and charoff attributes on col, colgroup, tbody, td, tfoot, th, thead and tr.
  • clear attribute on br.
  • compact attribute on dl, menu, ol and ul.
  • frame attribute on table.
  • frameborder attribute on iframe.
  • height attribute on td and th.
  • hspace and vspace attributes on img and object.
  • marginheight and marginwidth attributes on iframe.
  • noshade attribute on hr.
  • nowrap attribute on td and th.
  • rules attribute on table.
  • scrolling attribute on iframe.
  • size attribute on hr.
  • type attribute on li, ol and ul.
  • valign attribute on col, colgroup, tbody, td, tfoot, th, thead and tr.
  • width attribute on hr, table, td, th, col, colgroup and pre.

4. APIs

HTML5 introduces a number of APIs that help in creating Web applications. These can be used together with the new elements introduced for applications:
  • An API for playing of video and audio which can be used with the new video and audio elements.
  • An API that enables offline Web applications.
  • An API that allows a Web application to register itself for certain protocols or media types.
  • Editing API in combination with a new global contenteditable attribute.
  • Drag & drop API in combination with a draggable attribute.
  • API that exposes the history and allows pages to add to it to prevent breaking the back button.

4.1. Extensions to HTMLDocument

HTML5 has extended the HTMLDocument interface from DOM Level 2 HTML in a number of ways. The interface is now implemented on all objects implementing the Document interface so it stays meaningful in a compound document context. It also has several noteworthy new members:
  • getElementsByClassName() to select elements by their class name. The way this method is defined will allow it to work for any content with class attributes and a Document object such as SVG and MathML.
  • innerHTML as an easy way to parse and serialize an HTML or XML document. This attribute was previously only available on HTMLElement in Web browsers and not part of any standard.
  • activeElement and hasFocus to determine which element is currently focused and whether the Document has focus respectively.

4.2. Extensions to HTMLElement

The HTMLElement interface has also gained several extensions in HTML5:
  • getElementsByClassName() which is basically a scoped version of the one found on HTMLDocument.
  • innerHTML as found in Web browsers today. It is also defined to work in XML context (when it is used in an XML document).
  • classList is a convenient accessor for className. The object it returns, exposes methods (contains(), add(), remove(), and toggle()) for manipulating the element's classes. The a, area and link elements have a similar attribute called relList that provides the same functionality for the rel attribute.
Posted by at No comments:
Labels: , , , ,
Subscribe to: Comments (Atom)