Foundations of an HTML5 Web app

  • Revision slug: Apps/Tutorials/General/Foundations_of_an_HTML5_Web_App
  • Revision title: Foundations of an HTML5 Web app
  • Revision id: 348521
  • Created:
  • Creator: bsilverberg
  • Is current revision? No
  • Comment To correct a spelling error.

Revision Content

An Open Web App is basically an HTML5 app. While the role of HTML, CSS, and JavaScript are obvious to some, let's do a quick recap of how each plays its own important role in an HTML5 app.

HTML5 for content and structure

html5 logo

HTML is used to create the content structure for the web application. New features in HTML5 include new {{HTMLElement("input")}} types, form validation support, media tags like {{HTMLElement("audio")}} and {{HTMLElement("video")}}, and more semantic HTML elements.

CSS3 for style

css logo

CSS provides the visual presentation, letting you control the basic layout of content. CSS can do more than just format content though; you can use the power of CSS to animate elements, create precise gradients to avoid having to unnecessarily use images, and create media queries which let you adjust the appearance of your content based on the type of device it's being viewed on.

JavaScript for dynamic interaction

js logo

JavaScript provides the level of dynamism and user interaction for the web app. JavaScript lets you listen for and respond to user interactions, load content dynamically, and get access to device-specific features, like the Camera API and Geolocation API.

It's important to note that support for individual features varies from browser to browser; feature detection and research should be done before using each feature. How to use these strategies will be covered in depth below.

Revision Source

<p>An Open Web App is basically an HTML5 app. While the role of HTML, CSS, and JavaScript are obvious to some, let's do a quick recap of how each plays its own important role in an HTML5 app.</p>
<h2 id="HTML5_for_content_and_structure">HTML5 for content and structure</h2>
<table border="0" height="329" width="904">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img alt="html5 logo" src="/files/4263/html5.png"></td>
      <td>
        <p style="padding-left: 10px;">HTML is used to create the content structure for the web application. <a href="/en-US/docs/HTML/HTML5">New features in HTML5</a> include new {{HTMLElement("input")}} types, <a href="/en-US/docs/HTML/HTML5/Constraint_validation">form validation support</a>, media tags like {{HTMLElement("audio")}} and {{HTMLElement("video")}}, and <a href="/en-US/docs/Sections_and_Outlines_of_an_HTML5_document">more semantic HTML elements</a>.</p>
        <div class="infoBlock">
          <ul>
            <li><a href="/en-US/docs/HTML">HTML documentation</a></li>
            <li><a href="/en-US/docs/HTML/HTML5">HTML5 features</a></li>
            <li><a href="/en-US/learn/html">Learn HTML</a></li>
            <li><a class="external" href="http://www.html5rocks.com/en/">HTML5 Rocks!</a></li>
            <li><a class="external" href="http://html5test.com/">HTML5 Test</a></li>
            <li><a class="external" href="http://html5boilerplate.com/">HTML5 Boilerplate</a></li>
            <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/">HTML Living Standard</a></li>
            <li><a class="external" href="http://developers.whatwg.org/">Simple HTML5 Guide</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="CSS3_for_style">CSS3 for style</h2>
<table border="0">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img alt="css logo" src="/files/4259/css.png"></td>
      <td>
        <p style="padding-left: 10px;">CSS provides the visual presentation, letting you control the basic layout of content. CSS can do more than just format content though; you can use the power of CSS to <a href="/en-US/docs/CSS/CSS_animations">animate elements</a>, create <a href="/en-US/docs/CSS/Using_CSS_gradients">precise gradients</a> to avoid having to unnecessarily use images, and create <a href="/en-US/docs/CSS/Media_queries">media queries</a> which let you adjust the appearance of your content based on the type of device it's being viewed on.</p>
        <div class="infoBlock">
          <ul>
            <li><a href="/en-US/docs/CSS">CSS documentation</a></li>
            <li><a href="/en-US/docs/CSS/CSS_Reference">CSS Reference</a></li>
            <li><a class="external" href="http://dev.w3.org/csswg/css3-animations/">CSS Animations Specification</a></li>
            <li><a class="external" href="http://www.colorzilla.com/gradient-editor/">CSS Gradient Generator</a></li>
            <li><a class="external" href="http://www.w3.org/TR/css3-mediaqueries/">CSS Media Queries Specification</a></li>
            <li><a class="external" href="http://css-tricks.com/snippets/css/media-queries-for-standard-devices/">Media Queries for Standard Devices</a></li>
            <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safaricssref/articles/standardcssproperties.html">Mobile Safari Supported CSS Properties</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<h2 id="JavaScript_for_dynamic_interaction">JavaScript for dynamic interaction</h2>
<table border="0">
  <tbody>
    <tr>
      <td style="vertical-align: top;"><img alt="js logo" src="/files/4261/js.png"></td>
      <td>
        <p style="padding-left: 10px;">JavaScript provides the level of dynamism and user interaction for the web app. JavaScript lets you <a href="/en-US/docs/DOM/element.addEventListener">listen for and respond to user interactions</a>, <a href="/en-US/docs/AJAX">load content dynamically</a>, and get access to device-specific features, like the <a href="/en-US/docs/DOM/Using_the_Camera_API">Camera API</a> and <a href="/en-US/docs/Using_geolocation">Geolocation API</a>.</p>
        <div class="infoBlock">
          <ul>
            <li><a href="/en-US/docs/JavaScript/Guide">JavaScript Guide</a></li>
            <li><a href="/en-US/docs/JavaScript/Reference">JavaScript Reference</a></li>
            <li><a href="/en-US/docs/JavaScript">All JavaScript documentation on MDN</a></li>
            <li><a href="/en-US/docs/Canvas_tutorial">Canvas Tutorial</a></li>
            <li><a href="/en-US/docs/DOM/element.classList"><code>Element.classList</code> API</a></li>
            <li><a href="/en-US/docs/DOM/Storage">DOM Storage API</a> (<code>localStorage</code> object)</li>
            <li><a class="external" href="http://addyosmani.com/writing-modular-js/">Writing Modular JavaScript With AMD, CommonJS &amp; ES Harmony</a></li>
            <li><a href="/en-US/docs/DOM/window.navigator.battery">Battery API</a></li>
            <li><a href="/en-US/docs/DOM/Document.querySelectorAll"><code>document.querySelectorAll</code> API</a></li>
            <li><a href="/en-US/docs/DOM/Using_the_Page_Visibility_API">Using the Page Visibility API</a></li>
            <li><a href="/en-US/docs/WebSockets">WebSockets</a></li>
          </ul>
        </div>
      </td>
    </tr>
  </tbody>
</table>
<p class="callout">It's important to note that support for individual features varies from browser to browser; <a href="/en-US/docs/Browser_Feature_Detection">feature detection</a> and research should be done before using each feature. How to use these strategies will be covered in depth below.</p>
Revert to this revision