HTML5 Bones

Back to basics

About

• HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5.
• Inline comments explain how and when to use some of the most common HTML5 elements.
• Can also be used as a guide when building your own pages from scratch.
• No JavaScript libraries such as jQuery or Modernizr are included, as they may be completely unnecessary.
• It does include Normalize.css and original html5shiv as the former aids cross browser similarity and the latter is the minimum requirement for HTML5 documents to render in older versions (8 and below) of Internet Explorer.
• Some of the WAI-ARIA roles are also included.
• Templates that explain how to use HTML5 audio and video are also available.
• View changelog.

 

Download

Download v1.6.2

…

Metadata content | HTML5

Metadata content | HTML5

Metadata content

Metadata content is content that sets up the presentation or behavior of the rest of the content, or that sets up the relationship of the document with other documents, or that conveys other "out of band" information.

The base element

The base element allows authors to specify the document base URL for the purposes of resolving relative URLs, and the name of the default browsing context for the purposes of following hyperlinks. The element does not represent any content beyond this information.
There must be no more than one base element per document.
A base element must have either an href attribute, a target attribute, or both.
The href content attribute, if specified, must contain a valid URL potentially surrounded by spaces.

In this example, a base element is used to set the document base URL:

<!DOCTYPE html>
<html>
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="http://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

Label

Code:

<label>Carpet: <input type="text" class="carpet" name="c" data-texture="deep pile"></label>

Result Below:

Carpet:

ARIA Semantics

 o           .'`/
     '      /  (
   O    .-'` ` `'-._      .')
      _/ (o)        '.  .' /
      )       )))     ><  <
      `\  |_\      _.'  '. \
        '-._  _ .-'       '.)
    jgs     `\__\
 

Joan G. Stark, "fish". October 1997. ASCII on electrons. 28×8.

DROPZONE

In this example, a div element is made into a drop target for image files using the dropzone attribute. Images dropped into the target are then displayed.

<div dropzone="copy file:image/png file:image/gif file:image/jpeg" ondrop="receive(event, this)">
 <p>Drop an image here to have it displayed.</p>
</div>
<script>
 function receive(event, element) {
 var data = event.dataTransfer.items;
 for (var i = 0; i < data.length; i += 1) {
 if ((data[i].kind == 'file') && (data[i].type.match('^image/'))) {
 var img = new Image();
 img.src = window.createObjectURL(data[i].getAsFile());
 element.appendChild(img);
 }
 }
 }
</script>

Here is the Implementation:

Drop an image here to have it displayed.

Basic of HTML5

The Basics of HTML