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.