FileNav

online
online: /HTML & CSS/HTML5_New_Attributes.md

HTML5’s New Attribute

Link Attributes

New attributes or functionality for A, AREA, and LINK elements.

download

Elements that accept download:

Indicates a resource is intended to be downloaded for use later, rather than immediately.

The attribute can furthermore be given a value, to specify the filename that user agents are to use when storing the resource in a file system.

Example:

<a href="/docs/html5-attr-manual.pdf" download="HTML5 Attributes Manual.pdf"/>

ping

Elements that accept ping:

A space delimited list of URL tokens which should be notified if this link is followed.

Link Types

alternate

<link rel="alternate stylesheet" href="/css/gathering-darkness.css" title="The Gathering Darkness Theme" type="text/css"/>
<link rel="alternate" href="/feed.atom" type="application/atom+xml"/>
<link rel="alternate" href="/feed.rss" type="application/rss+xml"/>
<a href="/feed.atom" rel="alternate" type="application/atom+xml">Site's Atom Feed</a>
<a href="/page.rss" rel="alternate" type="application/rss+xml">Page's RSS Feed</a>
<a href="/page.pdf" rel="alternate" type="application/pdf">PDF version of this page</a>
<a href="/page-print.html" media="print" rel="alternate">Print version of this page</a>
<a href="/page-3d.jpg" media="3d-glasses" rel="alternate">3D image of this page</a>
<a href="/fr/page.html" hreflang="fr" rel="alternate">This Page's French Translation</a>

author

<link href="mailto:runeimp@gmail.com" rel="author"/>
<a href="/runeimp" rel="author">RuneImp</a>

bookmark

<a href="/blog/article-name-perm-url" rel="bookmark">Article Permalink</a>

help

<link href="/help?page=2" rel="help" title="help for this page/>
<a href="/help?page=2&section=1" rel="help">Help for this section</a>

icon

<link rel="shortcut icon" href="/favicon.ico" sizes="16x16 24x24 32x32 48x48" title="IE Compatible" type="image/x-icon" />
<link rel="icon" href="/assets/img/favicon.icns" sizes="16x16 32x32 128x128 256x256 512x512" title="Mac/iOS Options" type="image/icns" />
<link rel="icon" href="/assets/img/favicon_57.png" sizes="57x57" title="Web-Clip" type="image/png" />
<link rel="icon" href="/assets/img/favicon_114.png" sizes="114x114" title="Web-Clip HD" type="image/png" />
<link rel="icon" href="/assets/img/favicon.svg" sizes="any" type="image/svg+xml" />

license

<p><small><a rel="license" href="http://opensource.org/licenses/Apache-2.0">Apache License 2.0</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/BSD-3-Clause">BSD 3-Clause "New" or "Revised" license</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/BSD-2-Clause">BSD 2-Clause "Simplified" or "FreeBSD" license</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/gpl-license">GNU General Public License (GPL)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/lgpl-license">GNU Library or "Lesser" General Public License (LGPL)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/MIT">MIT license</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/MPL-2.0">Mozilla Public License 2.0</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/CDDL-1.0">Common Development and Distribution License</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/OFL-1.1">Open Font License 1.1 (OFL-1.1)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/APL-1.0">Adaptive Public License (APL-1.0)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/Artistic-2.0">Artistic license 2.0 (Artistic-2.0)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/OSL-3.0">Open Software License (OSL-3.0)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/QPL-1.0">Q Public License (QPL-1.0)</a></small></p>
<p><small><a rel="license" href="http://opensource.org/licenses/Zlib">zlib/libpng license (Zlib)</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by-nd/3.0/">Creative Commons Attribution-NoDerivs 3.0 License</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Attribution-ShareAlike 3.0 License</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by-nc/3.0/">Creative Commons Attribution-NonCommercial 3.0 License</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Creative Commons Attribution-NonCommercial-NoDerivs 3.0 License</a></small></p>
<p><small><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License</a></small></p>

next prev

<head>
    <title>Page 2</title>
    <link href="/page1.html" rel="prev" type="text/html"/>
    <link href="/page3.html" rel="next" type="text/html"/>
</head>
<body>
    <article>
        ...
        <a href="/page1.html" rel="prev"  type="text/html">Prev Page</a> | <a href="/page3.html" rel="next"  type="text/html">Next Page</a>
    </article>
</body>

nofollow

<div class="comments">
    <header>Comments:</header>
    <div>
        <p>Checkout my <a href="http://hotties.biz" rel="nofollow">babes site</a>.</p>
    </div>
</div>

noreferrer

<a href="http://debug.info/test-referer" rel="noreferrer">Test HTML5 <code>noreferrer</code> link compliance</a>

prefetch

<head>
    <link href="/gallery/img2.jpg" rel="prefetch"/>
    <link href="/gallery/img3.jpg" rel="prefetch"/>
    <link href="/gallery/img4.jpg" rel="prefetch"/>
</head>
<body>
    <h1>Image Gallery</h1>
    <section class="img-gallery">
        <a href="/gallery/img1.jpg" rel="prefetch"><img src="/gallery/img1_thumb.jpg"/></a>
        <a href="/gallery/img2.jpg"><img src="/gallery/img2_thumb.jpg"/></a>
        <a href="/gallery/img3.jpg"><img src="/gallery/img3_thumb.jpg"/></a>
    </section>
</body>

search

<link href="/search?page=2" rel="search"/>
<a href="/search?page=2" rel="search">Search This Page</a>

stylesheet

<link rel="stylesheet" href="/css/default.css" media="screen" type="text/css" />
<link rel="stylesheet" href="/css/desktop.css" media="screen and (min-width: 960px)" type="text/css" />
<link rel="stylesheet" href="/css/handheld.css" media="screen and (max-width: 959px)" type="text/css" />
<link rel="stylesheet" href="/css/print.css" media="print" type="text/css" />
<link rel="alternate stylesheet" href="/css/gathering-darkness.css" media="screen" title="The Gathering Darkness Theme" type="text/css" />

tag

<a href="/tags/curvy">Pages with the curvy tag</a>

Tag Cloud Example

<ul class="tag-cloud">
    <li><a href="/tags/beautiful" class="medium">Beautiful</a></li>
    <li><a href="/tags/busty" class="x-large">Busty</a> (very popular)</li>
    <li><a href="/tags/curvy" class="large">Curvy</a> (popular)</li>
    <li><a href="/tags/fit" class="small">Fit</a> (unpopular)</li>
    <li><a href="/tags/shorties" class="small">Shorties</a> (unpopular)</li>
    <li><a href="/tags/strong" class="large">Strong</a> (popular)</li>
    <li><a href="/tags/waif" class="x-small">Waif</a> (rare)</li>
</ul>