Hyper Text Markup Language
HTML: Links: Style Target:
This is instruction on how to put links into an HTML page that can target other parts of your page or new window.
Link to a web page:
<a href=”url“>link text</a>
According to the HTML5 Spec:
A valid browsing context name is any string with at least one character that does not start with a U+005F LOW LINE character. (Names starting with an underscore are reserved for special keywords.)
A valid browsing context name or keyword is any string that is either a valid browsing context name or that is an ASCII case-insensitive match for one of: _blank, _self, _parent, or _top.” – Source
That means that there is no such keyword as _new in HTML5, and not in HTML4 (and consequently XHTML) either. Meaning, that there will be no consistent behavior if you use this as a value for the target attribute.
Examples:
The target attribute specifies where to open the linked page or document:
<a href=”http://namref.com/” target=”_blank”>Visit NamRef</a>
The target attribute specifies where to open the linked page or document: (Usually the same window – not to keep opening new windows in browser)
<a href=”http://namref.com/” target=”_new”>Visit NamRef</a>
Display the response received in a new window or tab:
<form action=”/action_page.php” method=”get” target=”_blank”>
First name: <input type=”text” name=”fname”><br>
Last name: <input type=”text” name=”lname”><br>
<input type=”submit” value=”Submit”>
</form>
Values of the target Attribute
| Value Name | Description Notes |
|---|---|
| _blank | Opens the linked document in a new tab or window. |
| _parent | Opens the link in the parent frame. Frames are deprecated in HTML5. |
| _self | Open the link in the current frame. |
| _top | Opens the link in the top-most frame. Frames are deprecated in HTML5. |
| frame name | Opens the link in the named frame. Frames are deprecated in HTML5. |
All Attributes of the anchor Element
| Attribute name | Values | Description Notes |
|---|---|---|
| hreflang | Specifies the language of the linked resource. | |
| download | Directs the browser to download the linked resource rather than opening it. | |
| target | _blank _parent _self _top frame name |
Specifies the context in which the linked resource will open. |
| title | text | Defines the title of a link, which appears to the user as a tooltip. |
| href | url | Specifies the linked document, resource, or location. |
| name |
The Anchor Element (Bookmark)
Anchors point to a place within a page.
The anchor element tag is the letter “a” surrounded by angle brackets like this: <a>. Both the opening and closing attributes are required, and all of the content between the tags makes up the anchor source.
A # in front of a link location specifies that the link is pointing to an anchor on a page. (Anchor meaning a specific place in the middle of your page).
To link to an anchor you need to:
- Create a link pointing to the anchor
- Create the anchor itself.
An anchor is created using the <a> tag.
If you want to create an anchor called part3, you simply add this line where you want the anchor to be:
|
After doing this, you can make a link pointing to the anchor using the normal <a href> tag, like this:
|
Note:
When linking to an anchor on a page you need to put a # in front of the anchor.
When you link to an anchor on the same page, simply enter
|
When you link to anchors on external pages use this syntax:
|
Anchors are generally used when you create pages with considerable amounts of text.
You would typically make an index at the top of the page linking to the anchors that have been added to key places in the text that follows.
HTML Links – Create a Bookmark
HTML bookmarks are used to allow readers to jump to specific parts of a Web page.
Bookmarks can be useful if your webpage is very long.
To make a bookmark, you must first create the bookmark, and then add a link to it.
When the link is clicked, the page will scroll to the location with the bookmark.
Example
| First, create a bookmark with the id attribute: |
| <h2 id=”P3″>Part 3</h2> |
| Then, add a link to the bookmark (“Jump to Chapter 4”), from within the same page: |
| <a href=”#P3″>Jump Over to Part 3</a> |
| Or, add a link to the bookmark (“Jump to Part 3”), from another page: |
| <a href=”html_.html#P3″>Jump Over to Part 3</a> |