Step 9: Links

Creating links in HTML5 is still done the exact same way as before, but a lot of attributes have been added over the years, so I thought I’d show you all the options you can still use in HTML5.

Add links

<!DOCTYPE html>

<html>
<head>
<meta charset=”UTF-8″>
<title>Whatever title of your file</title>
</head>

<body>

<p><img src=”images/nora_logo.jpg” alt=”nora’s artist logo” height=”42″ width=”50″ /></p>

<p>
Nora Tol loves pop music and loves to write. At the early age of 9 those two loves got combined when she wrote her first lyrics. She never stopped writing song words since and also started producing music in her teens.
</p>

<div>
More recently Nora’s been releasing various songs and music videos for you to enjoy online. You can listen to a mix of her songs right here:<br />

<audio controls>
<source src=”Nora-Tol-mega-mix.mp3” type=”audio/mpeg”>
Your browser does not support the audio tag.
</audio>

or watch her video

<video width=”320″ height=”240″ controls>
<source src=”music-video.mp4” type=”video/mp4″>
Your browser does not support the video tag.
</video>

</div>

<p>
Nora’s songs include (in the order of release):
<ol reversed>
<li><a href=”http://youtu.be/LBt58qpwSu8” title=”Burner“>Burner</a></li>
<li><a href=”file.mp3” download=”file.mp3“>Catch Me</a></li>
<li><a href=”lyrics.php?print” media=”print” type=”text/html”>They’re Waiting 4 My Beat 2 Drop</a>
<ul>
<li><a href=”newsitem.html” hreflang=”eng”>Originally released as “Beat 2 Drop” in 2010</a>, on the Darlin Nikki movie soundtrack</li>
<li>Re-released in 2013</li>
</ul>
</li>
<li><a href=”http://www.noratol.com/run-girl”  target=”_top”>Run Girl</a></li>
</ol>
</p>

<p>All songs are written by <a href=”http://www.noratol.com” rel=”author”>Nora Tol</a></p>

</body>
</html>

<A>-element and it’s attributes

The first link showcases the most used way for linking so far:
<a href=”http://youtu.be/LBt58qpwSu8″ title=”Burner”>Burner</a>
The anker’s hyper reference (a href) is a YouTube link. The title is added for anyone who’s surfing the web with bad eye sight. Speech computers will read your nested content to identify the link to the visitor.

Link to a download file

The second link is a download link. The download-attribute is new to HTML5:
<a href=”file.mp3″ download=”file.mp3″>Catch Me</a>
In the past a browser would automatically offer a download prompt when you clicked on a link to a file it couldn’t read itself. However, over the years, all types of documents are being offered as a download, including those a browser can read. Not all of them automatically trigger the download prompt. So sometimes you just want to force the issue. The attribute is not supported in Internet Explorer and Safari though.

Link to content for specific devices (media)

The third link, is one to, what’s considered, a media file. In this case a printable version of lyrics:
<a href=”lyrics.php?print” media=”print” type=”text/html”>They’re Waiting 4 My Beat 2 Drop</a>
I’ve used this link to show both the media- and type-attribute, but you don’t have to use them together. The type-attribute lets you specify the type of content you are linking to. You can use this attribute with any type of link you add to your website. The values you add here can be any of the IANA media types.
The media-attribute is new to HTML5. In this case, I’ve used the media-attribute to let the browser know the linked content is optimized for printing. You use the media-attribute to specify for which device or media the content is intended. This way, you can tell it’s optimised for a smart phone, tv, print or aural, or a combination of devices.
To link a combination of devices you use an operator (“and”, “or” and “not”):
<a href=”lyrics.php?print” media=”print and aural” type=”text/html”>They’re Waiting 4 My Beat 2 Drop</a>

Suppose you link to an image that is optimized for print:

<a href=”photo.jpg” media=”print and (resolution: 300dpi)”>Photo</a>

You have three operators available to use:
and (example: print and aural)
not (example: iphone not iphone 4)
, (means “or” – example: iphone 5, iphone 6)

The values you can set here are split into two sections; devices and values. This is what you can use:

Devices:
all – default setting that applies when you don’t set this at all
aural – speech computers
braille – feedback in braille
handheld – handheld devices with small screens and limited bandwidth
projection – projectors
print – pages formatted for printing
screen – computer screens
tty – teletypes and media using a fixed-pitched characterset
tv – television (with low resolution. limited space to scroll)

Values:
width – width of the targeted space for display. You can set a minimum and maximum: media=”screen and (min-width:600px)”
height – height of the targeted space for display. You can set a minimum and maximum: media=”screen and (min-height:600px)”
device-width – width of the targeted space for display or paper. You can set a minimum and maximum.
device-height – height of the targeted space for display or paper. You can set a minimum and maximum.
orientation – specify the orientation of the targeted display: “landscape” or “portrait”.
aspect-ratio – width/height of the targeted space for display. You can set a minimum and maximum: media=”screen and (aspect-ratio:16/9)”
device-aspect-ratio – width/height of the targeted space for display or paper. You can set a minimum and maximum.
color – specifies the bits per color of the targeted display. You can set a minimum and maximum: media=”screen and (color:3)”
color-index – specifies the number of color of the targeted display. You can set a minimum and maximum: media=”screen and (min-color-index:256)”
monochrome – the bits per pixel in a monochrome frame buffer. You can set a minimum and maximum: media=”screen and (monochrome:2)”
resolution – The density of the pixels (dpi or dpcm) of the target display/paper. You can set a minimum and maximum.
scan – Specifies the scanning method of a tv display: “progressive” and “interlace”.
grid – Specifies if the output device is either a grid or bitmap: “1” for grid, and “0” for bitmap: media=”handheld and (grid:0)”

Link to content in a different language

Link number four has an added hreflang-attribute that tells the browser which language the linked content has been written in:
<a href=”newsitem.html” hreflang=”eng”>Originally released as “Beat 2 Drop” in 2010</a>

Link to related content

The last link adds information about the relation (rel-attribute) between the linked pages. In this case the author:
<a href=”http://www.noratol.com” rel=”author”>Nora Tol</a>
However you have these values that you can use in the rel-attribute:
alternate – to link to an alternative version of the same page (for instance a mobile version, mirror site, other language or a print page)
author – to obviously link the author
bookmark – the link that’s supposed to become a permanent link for bookmarking
help – to link help documents (like a manual)
license – to link copyright information
next – to link to the next page in a group of pages (like the next step of an online course)
nofollow – to stop spiders from Google (or other search engines) to index the linked page
noreferrer – Tells the browser not to send the HTTP referrer (the URL of the current page you are on) if the visitor follows the link
prefetch – The targeted page should be cached
prev –  to link to the previous page in a group of pages (like the previous step of an online course)
search – to link to an onsite search tool (like a search bar on your own site)
tag – a keyword (tag) for the page you are on.

Go to the next step

 

Bookmark the permalink.

Comments are closed