a href attribute
The href attribute on the a element:
- allows you to add the url of a resource or the value of an id of an element preceded by #
- href is a specific attribute → can be applied ONLY on the next HTML5 elements: a, area, base, link
- can create:
- a hyperlink:
e.g. href="contact.php" or href="http://www.w3-video.com"
- a hypertext anchor:
e.g. href="#idvalue"
- a hyperlink + a hypertext anchor:
e.g. href="contact#idvalue" href="http://www.w3-video.com#idvalue"
Warning: if href attribute is absent, no other specific attribute can be added on a element
Examples
<a | attribute | = | "value(s)" | > | ... | <⁄a> | example |
---|---|---|---|---|---|---|---|
2. | href | = | URL | <href="page1.php"> Go to a new page <⁄ > <href="#idvalue"> Jump to a section within the current page <⁄ > |
Video demonstration a href attribute
HTML5 a href attribute Tutorial
min | video details |
---|---|
00:11 | video tutorial: a element, href attribute objective: understanding href attribute |
00:15 | href attribute is optional |
00:19 | href attribute: absent |
00:20 | if href attribute is absent like in our case, a element does not create a hyperlink or an anchor |
00:25 | simple text, not clickable (no hyperlinks, anchors) |
00:31 | href attribute: present |
00:31 | b1) if href attribute is present, a element creates a hyperlink |
00:32 | adding the href attribute on the first a element, with the value: http://www.w3-video.com |
00:47 | the blue text "Visit w3-video.com" is a hyperlink |
00:56 | b2) if href attribute is present, a element creates an anchor |
01:02 | adding the href attribute to the second a element, with the value: #w3v |
01:18 | the blue text "About w3-video.com" is a hypertext anchor |
01:22 | when clicking on it will be taken to the last paragraph on page because this one has the id="w3v" |
01:25 | test result: ok |
01:38 | index.php#w3v = index.php + #w3v |