<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="/styles/XMLStylesDoc_xhtml10_en.xsl"?><!DOCTYPE document SYSTEM "/schemas/XMLStyles10.dtd">
<document xmlns="http://XMLStyles.com/namespaces/styles" xmlns:xst="http://XMLStyles.com/namespaces/styles" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:date="http://exslt.org/dates-and-times">
   <noxml>
      <p xmlns="http://www.w3.org/1999/xhtml"/>
      <!-- You are viewing the source.  The following message should be ignored if you did "View Source" in your browser. -->
      <p xmlns="http://www.w3.org/1999/xhtml">
ATTENTION: XML WEB PAGES NOT SUPPORTED
   If you see this message, your current browser does not support the
   1999 XSLT 1.0 (or later) standard for XML web pages such as this one.
   Please upgrade your browser to a newer version
   that supports 1999 or later standards such as:
      Mozilla Firefox version 1.0.2 or later (GetFirefox -&gt; http://www.GetFirefox.com/)
      Netscape version 8 or later
      Safari version 1.3 or later
      Opera version 9 or later
      Microsoft Internet Explorer (MSIE) version 5 or later
   For further assistance, contact the software vendor for your browser.
   To go to the X<!-- extended HTML -->HTML version of this page click the following link:
<a href="index.html">index.html</a>
      </p>
      <p xmlns="http://www.w3.org/1999/xhtml">&#160;</p>
   </noxml>
   <path>/tutorials/</path>
   <site>HTML 5 Reference</site>
   <logo xlink:type="simple" xlink:href="/images/html-5.jpg" media="screen" width="156" height="27">HTML 5 Reference</logo>
   <logo xlink:type="simple" xlink:href="/images/html-5.jpg" media="print" width="156" height="27">HTML 5 Reference</logo>
   <logo xlink:type="simple" xlink:href="/images/html-5.jpg" media="handheld" width="150" height="17">HTML 5 Reference</logo>
   <navigation where="sections">
      <label>HTML 5 Reference</label>
      <link xlink:type="simple" xlink:href="/index.xml">Home</link>
      <link xlink:type="simple" xlink:href="/tutorial/index.xml">Tutorial</link>
      <link xlink:type="simple" xlink:href="/tags/index.xml">HTML5 Tags</link>
      <link xlink:type="simple" xlink:href="/attributes/index.xml">Attributes</link>
      <link xlink:type="simple" xlink:href="/css-styles/index.xml">CSS Styles</link>
      <link xlink:type="simple" xlink:href="/metatags/index.xml">Metatags</link>
      <link xlink:type="simple" xlink:href="/cheat-sheet/index.xml">Cheat Sheet</link>
      <link xlink:type="simple" xlink:href="/examples/index.xml">Examples</link>
      <link xlink:type="simple" xlink:href="/definitions/index.xml">Definitions</link>
      <link xlink:type="simple" xlink:href="/diffs/index.xml">Differences</link>
      <link xlink:type="simple" xlink:href="/avoid/index.xml">Avoid</link>
      <link xlink:type="simple" xlink:href="/faqs/index.xml">HTML5 FAQs</link>
      <link xlink:type="simple" xlink:href="/prod/rssfeeds.cgi">RSS Feeds</link>
      <link xlink:type="simple" xlink:href="/prod/help/index.cgi">Help</link>
   </navigation>
   <navigation where="left">
      <label>HTML 5 Reference</label>
      <link xlink:type="simple" xlink:href="/tutorial/index.xml">HTML Tutorial</link>
      <link xlink:type="simple" xlink:href="/tags/index.xml">HTML 5 Tags</link>
      <link xlink:type="simple" xlink:href="/attributes/index.xml">HTML Attributes</link>
      <link xlink:type="simple" xlink:href="/css-styles/index.xml">CSS Styles</link>
      <link xlink:type="simple" xlink:href="/metatags/index.xml">HTML Metatags</link>
      <link xlink:type="simple" xlink:href="/cheat-sheet/index.xml">Cheat Sheet</link>
      <link xlink:type="simple" xlink:href="/examples/index.xml">HTML Examples</link>
      <link xlink:type="simple" xlink:href="/definitions/index.xml">Definitions</link>
      <link xlink:type="simple" xlink:href="/diffs/index.xml">HTML 5 Changes</link>
      <link xlink:type="simple" xlink:href="/avoid/index.xml">Things to Avoid</link>
      <link xlink:type="simple" xlink:href="/faqs/index.xml">HTML 5 FAQs</link>
      <link xlink:type="simple" xlink:href="/prod/help/index.cgi">Help</link>
      <link xlink:type="simple" xlink:href="/prod/help/index.cgi?p=about">About</link>
   </navigation>
   <section id="body" type="body">
      <pages name="index">
         <navigation where="pages">
            <label>index</label>
            <link xlink:type="simple" xlink:href="index.xml">index</link>
            <link xlink:type="simple" xlink:href="page-structure.xml">Tutorial</link>
            <link xlink:type="simple" xlink:href="style-sheets.xml">Style Sheets</link>
            <link xlink:type="simple" xlink:href="html-templates.xml">XSLT Style Sheets</link>
            <link xlink:type="simple" xlink:href="css-stylesheets.xml">CSS StyleSheets</link>
            <link xlink:type="simple" xlink:href="namespaces.xml">Namespaces</link>
            <link xlink:type="simple" xlink:href="sections.xml">Sections</link>
            <link xlink:type="simple" xlink:href="style-tags.xml">Style Tags</link>
            <link xlink:type="simple" xlink:href="lists.xml">Lists</link>
            <link xlink:type="simple" xlink:href="groups.xml">Groups</link>
            <link xlink:type="simple" xlink:href="acronyms.xml">Acronyms</link>
            <link xlink:type="simple" xlink:href="times.xml">Dates/Times</link>
            <link xlink:type="simple" xlink:href="tables.xml">Tables</link>
            <link xlink:type="simple" xlink:href="forms.xml">Forms</link>
            <link xlink:type="simple" xlink:href="gauges.xml">Gauges</link>
         </navigation>
         <page id="gauges" name="gauges">
            <label>Gauges</label>
            <title>HTML 5 Meters and Progress Bars</title>
            <h2>HTML 5 Meters and Progress Bars Tutorial</h2>
            <p>Gauges on a web page provide a visual indication of the current value
               of a measurement between some minimum value and a maximum value.
               A "meter", which is analogous to a needle gauge, shows the
               current value in relation to the minimum and maximum values.
               A progress bar shows the how far a task has progressed between
               the start of the task and the estimated completion of it.
               The tags for creating gauges in HTML 5 include:
            </p>
            <ul>
               <li>
                  <link xlink:type="simple" xlink:href="../tags/meter-tag/">&lt;meter&gt;</link>
               </li>
               <li>
                  <link xlink:type="simple" xlink:href="../tags/progress-tag/">&lt;progress&gt; for progress bars</link>
               </li>
            </ul>
            <updated local="2010-09-19">Sunday September 19, 2010</updated>
         </page>
      </pages>
   </section>
   <copyright>Copyright © 2010 Accilent<span class="sup">®</span> Corp. Alteration of content, including addition of any function such as hypertext links or pop-up advertising, or interference with the hypertext links or other functions of this site is expressly prohibited.</copyright>
   <disclaimer>All information, links, forms, applications and other items on this site or obtained from it are provided <b>AS IS</b>, WITHOUT WARRANTY OF ANY KIND EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.</disclaimer>
</document>

