<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.3//EN" "http://www.wapforum.org/DTD/wml13.dtd">
<wml>
 <!-- page name="index"-->
 <template>
  <do optional="false" label="Back Up" type="accept">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#index"/>
  </do>
 </template>
 <card ordered="true" newcontext="false" id="index">
  <do optional="false" label="Back Up" type="accept">
   <noop/>
  </do>
  <do optional="false" label="Back" type="prev">
   <prev/>
  </do>
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#whats-new"/>
  </do>
  <a href="#whats-new" accesskey="1">What's New</a>
  <br/>
  <a href="#diffs" accesskey="2">Differences</a>
  <br/>
  <a href="#syntax" accesskey="3">Syntax</a>
  <br/>
  <a href="#attributes" accesskey="4">Attributes</a>
  <br/>
  <a href="#style" accesskey="5">Style</a>
  <br/>
  <a href="#templates" accesskey="6">Templates</a>
  <br/>
  <a href="#case-sensitive" accesskey="7">Case-Sensitive</a>
  <br/>
  <a href="#namespaces" accesskey="8">Namespaces</a>
  <br/>
 </card>
 <card ordered="true" newcontext="false" id="whats-new">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#diffs"/>
  </do>
  <!-- h2 -->
  <h2>What's New in HTML 5</h2>
  <!-- h3 -->
  <h3>HTML 5 Specifications focus on the DOM</h3>
  <p>The specifications for HTML 5 define elements of the language in terms of the operation and effects of the document's internal object model, making HTML 5 more of an abstract language than earlier versions. As a result, the language can be encoded in more than one syntax, as determined by the media type (<span class="outlined">text/html</span> for the HTML syntax or <span class="outlined">application/xhtml+xml</span> for the XML syntax, for example). Documents can even exist without an external representation through using the DOM APIs internally. </p>
  <!-- h3 -->
  <h3>Different requirements for HTML authors and document parsers</h3>
  <p>HTML pages on the web have been somewhat haphazardly created under various different standards and proprietary formats and in many cases with no particular standard or format in mind. As a result, different browser vendors have developed a variety of incompatible methods of handling a lot of non-standard and just plain bad HTML coding. </p>
  <p>For backward compatibility with the majority of existing documents, the HTML 5 specification requires document parsers and viewers (browsers) to support older, deprecated elements and attributes and other non-standard HTML coding in as consistent manner as possible. This means that HTML 5 compliant user agents will gracefully handle some of the more common errors in HTML coding. It's sort of a "Do What I Mean, Not What I Say" feature of web browsers. It also means that different browsers should start handling certain types of errors in the coding of HTML documents in a more consistent and predictable way. </p>
  <p>In layman's terms, there are two different branches of the HTML standard - one for HTML authors and another for developers of browsers and other HTML parsers. While browsers may recognize deprecated and non-standard HTML coding, developers creating new HTML pages should avoid <a href="../avoid/">deprecated HTML elements and attributes</a> and try to create documents that conform to the authoring requirements of the HTML 5 standard. The benefits of conforming to the HTML authoring standard include more consistent presentation among traditional web browsers, better support in handheld and mobile devices and greatly increased longevity of the HTML pages being created. </p>
  <!-- h3 id="sectioning-tags" -->
  <h3>Document Sections in HTML</h3>
  <p>One of the most significant new features of HTML 5 is the ability to mark up sections of an HTML document using the sectioning tags and related tags, which can identify types of content within a section such as headers, footers and sidebars displayed along with a web page. </p>
  <p align="left"/>
  <!-- h3 -->
  <h3>Other New Tags in HTML 5</h3>
  <p align="left"/>
  <!-- h3 id="html5-changes" -->
  <h3>Other Changes in HTML 5</h3>
  <!-- block type="toc" -->
  <dt>
   <a href="#diffs">Differences</a>
  </dt>
  <dt>
   <a href="#N10177">Syntax</a>
  </dt>
  <dt>
   <a href="#N10189">Attributes</a>
  </dt>
  <dt>
   <a href="#N101AE">Style vs. Semantics</a>
  </dt>
  <dt>
   <a href="#N101BD">Templates</a>
  </dt>
  <dt>
   <a href="#N101D9">Case-Sensitive</a>
  </dt>
  <dt>
   <a href="#N101E9">Namespaces</a>
  </dt>
  <a href="deprecated.wml">Tags and Attributes Deprecated in HTML</a>
  <a href="character-entities.wml">Character Entities in HTML 5</a>
  <a href="html-dtd.wml">The HTML 5 Document Type Definition (HTML DTD)</a>
  <a href="html-tag.wml">Differences in the &lt;html&gt; Tag</a>
  <p align="left">
   <a href="#diffs">Next: Differences</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="diffs">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="deprecated.wml#deprecated"/>
  </do>
  <!-- h2 -->
  <h2>Differences between HTML 4 / XHTML and HTML 5</h2>
  <!-- block type="toc" -->
  <dt>
   <a href="#N100A5">What's New</a>
  </dt>
  <dt>
   <a href="#N10177">Syntax</a>
  </dt>
  <dt>
   <a href="#N10189">Attributes</a>
  </dt>
  <dt>
   <a href="#N101AE">Style vs. Semantics</a>
  </dt>
  <dt>
   <a href="#N101BD">Templates</a>
  </dt>
  <dt>
   <a href="#N101D9">Case-Sensitive</a>
  </dt>
  <dt>
   <a href="#N101E9">Namespaces</a>
  </dt>
  <p align="left">
   <a href="deprecated.wml#deprecated">Next: Deprecated</a>
   <br/>
   <a href="#whats-new">Prev: What's New</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="syntax">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#attributes"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">alternative HTML syntax standards</p>
  <p align="left">For backward compatibility with most existing web pages, HTML 5 allows documents to be coded using either the syntax traditionally used for the 1997-1999 versions of HTML (version 4.x), or the XSLT and mobile-friendly 2000-2001 W3C extended HTML syntax. (For example, compare how a site such as this one looks on a mobile device with how other sites such as WhiteHouse.gov look.) </p>
  <p align="left">An HTML page can be coded such that it adheres to a common subset of the syntactic requirements that are shared by both syntaxes and avoids anything that is unique to one syntax or the other. HTML documents that can be properly delivered and processed as either syntactic flavor of HTML are known as <!--??? no template for "{http://XMLStyles.com/namespaces/styles}dfn" ???-->
polyglot HTML documents. </p>
  <p align="left">
   <a href="#attributes">Next: Attributes</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="attributes">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#style"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">attribute coding for polyglot HTML documents</p>
  <p align="left">There are some specific requirements for coding attributes in HTML documents that can be parsed using either set of syntax rules. Coding of attributes, even boolean attributes, must include an equal sign and value, and the value must always be enclosed in quotes. The value of a boolean attribute must be the name of the attribute itself or else the attribute must be omitted - the value of a boolean attribute should <span class="underlined">not</span> be true, false or an empty string. <p align="left">&lt;option selected="selected"/&gt;</p>
   <p>The following ways of coding HTML attributes should be avoided: </p>
   <p align="left">&lt;option selected/&gt;&lt;option selected=""/&gt;&lt;option selected="true"/&gt;&lt;option selected="yes"/&gt;</p>
  </p>
  <p align="left">
   <a href="#style">Next: Style</a>
   <br/>
   <a href="#syntax">Prev: Syntax</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="style">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#templates"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">migration toward separation of style from content and structure</p>
  <p align="left">Previous versions of HTML have deprecated presentational elements that provide no semantic value and are used exclusively to style text. HTML 5 continues the move in this direction, encouraging styles to be applied through use of CSS. </p>
  <p align="left">
   <a href="#templates">Next: Templates</a>
   <br/>
   <a href="#attributes">Prev: Attributes</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="templates">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#case-sensitive"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">separation of content and layout</p>
  <p align="left">One of the most significant improvements of the 2000-2001 version of HTML over the 1997-1999 version was the ability to take advantage of XSLT style sheets. Using templates allows separating the content of individual pages from the page layout and general structure of related pages. For example, you could create templates for the layout of various sections of a web site, such as a shopping cart, as well as import a site-wide template for the entire site's "look and feel". Templates are stored in separate documents, which web browsers only need to cache once, thus improving page load times. HTML version 5 continues to support these templates, which were not available in HTML version 4. </p>
  <p align="left">Both XSLT and CSS style sheets for any number of HTML pages can be referenced by the <a href="../tags/link-tag/">&lt;link&gt; tag</a> which allows creating specific layouts for various devices. For example, the template and styles for a printer-friendly version would be indicated by &lt;link media="print" .../&gt; while a version for small screen devices such as cell phones would be indicated by &lt;link media="handheld" .../&gt;. </p>
  <p align="left">
   <a href="#case-sensitive">Next: Case-Sensitive</a>
   <br/>
   <a href="#style">Prev: Style</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="case-sensitive">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="#namespaces"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">case-sensitive tags and attributes</p>
  <p align="left">In the 2000 W3C recommendation and later versions of HTML, HTML tag names should be coded in all lower case. Attributes on HTML elements and CSS selectors in a <a href="../attributes/#class-attribute">class attribute</a> are also case-sensitive. </p>
  <p align="left">
   <a href="#namespaces">Next: Namespaces</a>
   <br/>
   <a href="#templates">Prev: Templates</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
 <card ordered="true" newcontext="false" id="namespaces">
  <do optional="false" type="options" label="Next">
   <go enctype="application/x-www-form-urlencoded" method="get" sendreferer="true" href="deprecated.wml#deprecated"/>
  </do>
  <!--TO DO: uses XMLStyles_wml1.xsl - delete XMLStyles_wml.xsl-->
  <p align="left">consistent namespace for HTML elements (either explicit or implied)</p>
  <p align="left">In HTML version 4, the tag element names were unnamespaced. If you applied a style sheet (such as a site-wide template for the site's "look and feel") to a "well-formed" HTML 4 document (where all tags were properly closed with matching end tags) the element names would have to be matched without a namespace prefix (for example: match="img"). The template would use &lt;xsl:output method="html" omit-xml-declaration="yes"/&gt; to convert the document to true HTML, by removing extraneous closing tags, for example. That is, coding in the source document such as &lt;img src="..." alt="..."&gt;&lt;/img&gt; would automatically become &lt;img src="..." alt="..."&gt; with no closing &lt;/img&gt; tag or self-closing /&gt;. </p>
  <p align="left"> In the 2000 W3C standard, a namespace is explicitly specified, usually within the top element, which applies to all HTML elements (&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;). Therefore, template matching rules would include a prefix for the namespace (ex: match="html:img" xmlns:html="http://www.w3.org/1999/xhtml"). </p>
  <p align="left">In HTML version 5, the namespace can be explicitly specified in well-formed HTML documents or, in HTML syntax documents, the "http://www.w3.org/1999/xhtml" namespace is implied, which allows the matching rules with namespace prefixes to be applied to either syntax. </p>
  <p align="left">
   <a href="deprecated.wml#deprecated">Next: Deprecated</a>
   <br/>
   <a href="#case-sensitive">Prev: Case-Sensitive</a>
   <br/>
   <a href="#index">Back Up: Menu</a>
   <br/>
  </p>
 </card>
</wml>
