HTML Links Elements
HTML Links – Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links – Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body> <h3>HTML Links</h3> <p><a href="https://www.w3schools.com/">Visit Codenbytes.com!</a></p> </body> </html> |
Result
HTML Links
HTML Links – The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self– Default. Opens the document in the same window/tab as it was clicked_blank– Opens the document in a new window or tab_parent– Opens the document in the parent frame_top– Opens the document in the full body of the window
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h3>The target Attribute</h3> <a href="https://www.w3schools.com/" target="_blank">Visit Codenbytes!</a> <p>If target="_blank", the link will open in a new browser window or tab.</p> </body> </html> |
Result
The target Attribute
If target=”_blank”, the link will open in a new browser window or tab.
HTML Links – Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body> <h3>Image as a Link</h3> <p>The image below is a link. Try to click on it.</p> <a href="default.asp"><img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;"></a> </body> </html> |
Result
Image as a Link
The image below is a link. Try to click on it.
The HTML <link> Element
The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html> |
HTML NavigationElements
HTML Lists
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <h3>An Unordered HTML List</h3> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <h3>An Ordered HTML List</h3> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> |
Result
An Unordered HTML List
- Coffee
- Tea
- Milk
An Ordered HTML List
- Coffee
- Tea
- Milk
HTML <li> Tag
Definition and Usage
The <li> tag defines a list item.
The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists (<menu>).
In <ul> and <menu>, the list items will usually be displayed with bullet points.
In <ol>, the list items will usually be displayed with numbers or letters.
Example Navigation Bar
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body> <h3>Basic HTML code for Navbar</h3> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> <p>Note: We use href="#" for links. In a real website this would be URLs.</p> </body> </html> |
Result
Basic HTML code for Navbar
Note: We use href=”#” for links. In a real website this would be URLs.