HTML5: New Standards for Web Design

Simplified Document Elements
  • doctype definition simplified - no DTD definition required
    • <!DOCTYPE html>
  • language: defined in lang= attribute of html tag ; no xml namespace required
    • <html lang="en">
  • charset: defined through new attribute of meta tag
    • <meta charset="utf-8" />
  • link element: type= attribute no longer necessary
    • <link rel="stylesheet" href="styles.css" />
  • Link Relations
    • <link rel="shortcut icon" href="/favicon.ico">
    • <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" />
    • <a rel="nofollow"
Semantic Elements
  • section - a thematic grouping of content, typically with a heading
  • nav - a section with navigation links
  • article - a self-contained composition in a page that is intended to be independently distributable or reusable
  • aside - a section of a page that consists of content that is tangentially related to the content
  • hgroup - used to group a set of h1–h6 elements when the heading has multiple levels
  • header - a group of introductory or navigational aids, logo, search form, navigation, page title
  • footer - information about its section such as who wrote it, links to related documents, copyright data
  • time - a time on a 24 hour clock
  • mark - text in a document marked or highlighted for reference purposes.

<body>
<header>
<hgroup>
<h1>HTML5</h1>
<h2>The new standard for designing web pages</h2>
</hgroup>
</header>
<section id="lsidebar">
<nav>
<ul id="resources">
<li><a href="products.html">Products</li>
<li><a href="services.html">Services</a></li>
<li><a href="contact.html">Contact Us</li>
</ul>
</nav>
</section>
<section id="maincontent">
<hgroup>
<h1>Welcome</h1>
<article> <h2>About Acme Corp.</h2>
</article> </hgroup>
</section>
<div class="clearfloat"></div>
<footer>
<aside id="disclaimer">Website Design and Development &copy;&nbsp;&nbsp;Jay Peretz 2010</aside>
</footer>
</body>

Microdata


Google Search Rich Snippets is an application that reads Microdata markup

<div> <div itemscope itemtype="http://data-vocabulary.org/Review">
<span itemprop="itemreviewed">Stark's Steak House</span> Reviewed by <span itemprop="reviewer">Ulysses Grant</span> on <time itemprop="dtreviewed" datetime="2009-01-06">Jan 6</time>. <span itemprop="summary">Delicious, tasty pizza in Eastlake!</span> <span itemprop="description">L'Amourita serves up traditional wood-fired Neapolitan-style pizza, brought to your table promptly and without fuss. An ideal neighborhood pizza joint.</span> Rating: <span itemprop="rating">4.5</span>
</div>
</div>

Canvas

Click on the Canvas to draw a button

<canvas id="canvas-a" width="150" height="150" onclick="draw_a();" ></canvas>
<script type="text/javascript">
function draw_a() {
var a_canvas = document.getElementById("canvas-a");
var a_context = a_canvas.getContext("2d");
var my_gradient = a_context.createLinearGradient(0, 0, 100, 0);
my_gradient.addColorStop(0, "black");
my_gradient.addColorStop(1, "white");
var my_gradient2 = a_context.createLinearGradient(0, 0, 100, 0);
my_gradient2.addColorStop(1, "black");
my_gradient2.addColorStop(0, "white");
a_context.fillStyle = my_gradient2;
a_context.fillRect(25,25,100,100);
a_context.clearRect(45,45,60,60);
a_context.strokeRect(50,50,50,50);
a_context.fillStyle = my_gradient;
a_context.fillRect(50, 50, 50, 50);
}
</script>

SVG

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FFFFFF" stroke="#FF00FF" d="M169,45C97,18,74,8,55,39s-36,49-23,73s46,43,80,13s63-24,34-52s-42-40-66-21s-38,29-16,48 s15,18,36,0s28-23,5-32s-21,0.249-27,12.125S90,97,94,85s-2-11-2-11">
<animateTransform attributeName="transform" begin="0s" dur="5s" type="rotate" from="0 90 90" to="360 90 90" repeatCount="indefinite" />
</path>
</svg>

New Input Elements

Interactive Widgets

Spinbox



<input type="number" min="0" max="10" step="2" value="6">

Slider

0

<input type="range" min="0" max="10" value="0" name="range">

Color Picker - not yet supported

<input type="color">

Data Picker Widgets

Calendar Picker

<input type="date">

<input type="month">

<input type="week">

<input type="time">

<input type="datetime">

Validation Widgets

<input type="tel">

<input type="url">

<input type="email">

<input type="search">

Video and Audio elements

<audio id='aplayer'
src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg"
type="audio/ogg;
codecs=vorbis"
onTimeUpdate="update();"
onEnded="trackEnded();" >
<b>Your browser does not support the <code>audio</code> element. </b>
</audio>

Geolocation
CSS3 Multicolumn layout

column-count: 3;
column-gap: 20px;
column-rule: 1px solid #bbb;

About CSS

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL. CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.[citation needed] This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. While the author of a document typically links that document to a CSS style sheet, readers can use a different style sheet, perhaps one on their own computer, to override the one the author has specified. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Internet media type (MIME type) text/css is registered for use with CSS by RFC 2318 (March 1998).

Additional CSS3 Enhancements
  • @font-face
  • New selectors
  • Gradients, Opacity & HSL Color Model
  • Border radius & Shadows
  • Multiple Backgrounds
  • Transitions, Transforms & Animations
Additional Javascript APIs

Local Data Storage - Javascript API to store data persistently using either name/value pairs or SQL

Web Workers - Javascript API to set up simultaneous threads of Javascript processes

Drag and Drop - Javascript API for interaction

Web Sockets - TCP access directly from page

Inline Editing - Javascript API for storing onpage changes to CMS systems