anchor tag

In this video tutorial we’ll show you how we can add download attribute and make the UX(User Experience) little better!

Related Read: HTML5 and CSS3 Video Tutorial List

We’ve seen so many times that a PDF file available for download opens up in the browser once the link is clicked. Same way the rar files, zip files, image files etc. We could add download attribute and fix this simple issue.

HTML5: Download Attribute with Value

1
2
3

 <a href="Picture1.jpg" download="book.jpg">
    Download Book Cover
 </a>

Once we add download attribute to the anchor tag, once someone clicks on the link, the linked resource starts to download, instead of opening in the browser.

The value, if present, to download attribute will be used to replace the original name of the resource file linked in the anchor tag.

Download Attribute: HTML5

[youtube https://www.youtube.com/watch?v=Wg6bMQ9leMQ]

YouTube Link: https://www.youtube.com/watch?v=Wg6bMQ9leMQ [Watch the Video In Full Screen.]

Full Free Code: HTML5 Download Attribute with Value

< !doctype html>
<html>
<head>
<title>Download Attribute</title>
</head>
<body>
 
 <a href="Picture1.jpg" download="book.jpg">
    Download Book Cover
 </a>
 
</body>
</html>

Make sure you have the doctype of html5(First line in above code).

Often times we spend a lot of time and end up preparing a lengthy document thinking it will be helpful, but as a matter of fact people can’t scroll up and down to find what they are looking for – instead they will goto Google and search for some other sites.

In this situation “Named Anchors” are very helpful. This simple technique will make your miles long document more usable.

Here is a working example of Named Anchor: Clicking on Take Me To The End Of This Article will take you to the end of this article.

Here is how it works:
Imagine that you have a premium software and you have written a manual for Windows, Apple and Unix users on a single page:

<html>
<head><title>My Software Manual</title>
</head>
<body>
 
<i>Index</i>
<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>
 
 
<i>Content</i>
1. <a name="microsoft">Windows 7</a>:  
Here you may write about the system requirement
for your software to work on Windows 7. 
And the amount of resources that your application 
is going to consume. Some tips and tricks. 
    Imagine its about 50 lines.
 
 
2. <a name="apple">Macintosh OS X</a>:  
Imagine there is about 500 lines of documentation 
about using your application on a Apple Macintosh.
 
3. <a name="unix">Unix/Linux</a>:   
Imagine there is about 1000 lines of documentation 
about using your application on a Apple Macintosh.
 
</body>
</html>

These lines of code(from about spinet) act as index.

1
2
3

<a href="#microsoft">Windows 7 Manual</a>
<a href="#apple">Macintosh OS X Manual</a>
<a href="#unix">Unix/Linux Manual</a>

When people click on Windows 7 Manual link in the index section, it takes them directly to the 1. Windows 7 paragraph(in the content section) without even reloading the page – as all the information present in that page has already been loaded.

Make sure you check this working example:
You can find a link at the top of this article – “Take Me To The End Of This Article”, clicking which you will end up here!

Tag: anchor tag

Download Attribute: HTML5

Named Anchors In HTML – For Internal Linking