W3-Video WEB Tutorials

w3-video.com is a Free eLearning Website with over 500 video tutorials on HTML5, XAMPP, .htaccess, Firefox, Notepad++

HTML5 Tutorial

Home HTML5 XAMPP .htaccess Firefox Notepad++

a ... ⁄a

Share it

a intro a browser display a parents - childrena content model: transparenta warninga syntaxa download attributea href attributea hreflang attributea rel attributea target attributea type attributea itemprop attribute

HTML5 a element

The a element allows you to create a hyperlink, a hypertext anchor, or represents simply a placeholder. »video

About a

Display & support a

Firefox iconChrome iconIE iconOpera iconSafari icon

Parents, children a

Attributes a

- if href attribute is not present → a placeholder; a element has no attribute
- if href attribute is present → a hyperlink or a hyper anchor
- if href attribute is present → all other specific attributes can be specified on a element


Within the a element (between the start tag and the end tag), interactive content is not allowed »details

Syntax a

1<a> ... </a> »video

Attributes and Values a (comma separated)

<aattribute="attribute_value(s)"> Video Examples
1. specific attributes
1.download=resource name»video<a href="getinfo/cours.pdf" download> ... <⁄a>
2.href=URL»video<a href="file.php"> ... <⁄a>
3.hreflang =language code»video<a href="file.php" hreflang="en"> ... <⁄a>
4.ping=URL-<a href="#demo" ping="test.php/demo"> ... <⁄a>
5.rel=alternate, author, bookmark, help
license, next, nofollow, noreferrer
prefetch, prev, search, sidebar, tag
»video<a href="http://..." rel="nofollow"> ... <⁄a>
6.target=_blank, _self, _parent, _top,
a valid browsing-context name
»video<a href="file.php" target="_blank"> ... <⁄a>
7.type= MIME type»video<a href="file.php" type="text/html"> ... <⁄a>
All Specific Attributes
2. global attributes
1.accesskey=keyboard key»img<a accesskey="h"> ... </a>
2.class=class name»html »img<a class="class_name"> ... </a>
3.contenteditable="",  , true, false »html<a contenteditable="true"> ... </a>
4.contextmenu=menu id value»html<a contextmenu="menu_id_value"> ... </a>
5.data-*= value -<a data-http-error="404"> ... </a>
6.dir=ltr, rtl, auto»html<a dir="ltr"> ... </a>
7.draggable= true,  , false»img<a draggable="false"> ... </a>
8.dropzone= copy, move, link, string:, file: -<a dropzone="copy"> ... </a>
9.hidden= "",  , hidden»html »img<a hidden="hidden"> ... </a>
10.id=id name»html »img<a id="unique_id_name"> ... </a>
11.itemid= URL --
12.itemprop= string »link »a<a href="http://..." itemprop="url"> ... </a>
13.itemref= string --
14.itemscope= "",  , itemscope--
15.itemtype= absolute URL --
16.lang=language code »html »head»title »img<a lang="en"> ... </a>
17.spellcheck="",  , true, false»html<a spellcheck="true"> ... </a>
18.style=CSS property:value»html »img<a style="color:red"> ... </a>
19.tabindex= integer »img<a tabindex="3"> ... </a>
20.title=text»html »link»style »abbr»dfn
»img »meter
<a title="html page"> ... </a>
21.translate="", yes, no»html »img<a translate="yes"> ... </a>
All Global Attributes
3. global event attributes
1.onclick=script» list<element onclick="script" > ...
2.ondblclick=script» list<element ondblclick="script" > ...
All Event Attributes

Video demonstration a element

HTML5 a tag: hyperlink, hypertext anchor, placeholder

min video details
00:06 video tutorial: a element
objective: understanding the a element
00:10 a element allows you to:
1. create a hyperlink
2. create a hypertext anchor
3. when href attribute is absent, represents nothing but a placeholder
00:21 create a hyperlink using a element
00:24 linking the 'a hyperlink' text to w3-video.com:
- adding the a start tag and end tag
- adding href attribute on a start tag
- adding a value (a valid URL) to the href attribute
00:37 saving the modifications in Notepad++
00:38 refreshing the page in browser
00:40 the text 'a hyperlink' became blue
00:41 text: clicking the blue text
00:43 test result: OK , the linked resource, w3-video.com, displays
00:50 create a hypertext anchor using a element
00:53 - adding the a start tag and end tag
- adding href attribute on a start tag
- see 01:26
01:08 adding some random text on page, for example purpose
01:20 adding an id to this last text, value="last"
01:26 - adding the value of the id - the value is: last - to a element, as value of the href attribute, preceded by #
01:35 the hypertext anchor is created
01:36 saving the modifications in Notepad++
01:37 refreshing the html page in browser
01:38 the text: 'a hypertext anchor' became blue
01:39 test: clicking the blue text
01:41 test result: ok , we were taken to the element that has the id="last"
01:47 a represents just a placeholder
01:47when href attribute is absent, a element represents nothing but a placeholder

it means that in the future we could add the href attribute on this a element and make the text contained by the a element:
- a hyperlink,
- a hypertext anchor or
- a hyperlink with a hypertext anchor
01:50 adding just the start tag and the end tag of the a element
01:54 saving the modification in Notepad++ and refreshing the page in browser
00:58 note: the text: 'or represents just a placeholder' did not turn to blue; that text is not clickable, that text does not represent a hyperlink or an anchor, it's simply a placeholder
02:05 "a hyperlink": this text links to w3-video.com
02:07 "a hypertext anchor": this text links to an element from the same page, having the id="last"
02:12 "or represents just a placeholder": this text links to nothing
02:15 a element allows you to create a:
- hyperlink
- hypertext anchor
- hyperlink with a hypertext anchor

For more information about the a element, please see the specs: W3CWHATWG