Hyperlinks

HTML Hyperlink is a word, phrase or image that a user can click on to jump to a new document or a new section within the current document.

Agenda

HTML Hyperlinks
HTML Link colors
target attribute
Link image
Link Bookmarks
Navigation Menu

HTML Hyperlinks

A hyperlink or link is a word, phrase or image that a user can click on to jump to a new document or a new section within the current document.

Links are found in nearly all web pages. Links allow users to click their way from page to page.

Links are defined with the <a> and </a> tags.

The href attribute is used specify the destination address of the link.

<body>
  <ul>
    <li><a href="lesson1.html">Lesson 1</a></li>
    <li><a href="lesson2.html">Lesson 2</a></li>
    <li><a href="lesson3.html">Lesson 3</a></li>
    <li><a href="lesson4.html">Lesson 4</a></li>
    <li><a href="lesson5.html">Lesson 5</a></li>
  </ul>
</body>

Colors

By default, links will appear as follows in all browsers.

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

`target` attribute

The target attribute specifies where to open the link document.

_blank - opens the link document in a raw window or tab.
_self - opens the link in the same window/tab as it was clicked (default).

Learn more about target attributes in the MDN Web Docs.

<body>
  <ul>
    <li><a href="lesson1.html" target="_blank">Lesson 1</a></li>
    <li><a href="lesson2.html" target="_blank">Lesson 2</a></li>
    <li><a href="lesson3.html" target="_blank">Lesson 3</a></li>
    <li><a href="lesson4.html" target="_blank">Lesson 4</a></li>
    <li><a href="lesson5.html" target="_blank">Lesson 5</a></li>
  </ul>
</body>

Link Image

Use Image as a Links

Images can also be used as links, just put the <img /> element inside the <a> and </a> tags.

The title attribute specifies extra information about an element.

The information is most often shown as a tooltip text when the mouse moves over the element.

Image as a Links

<body>
  <a href="https://www.google.com/">
    <img src="images/googlelogo.png" style="width: 50px; height: 50px;" />
  </a>
</body>

Link Bookmarks

Bookmark Hyperlinks

HTML bookmarks are used to allow readers to jump to specific parts of a web page.

Bookmarks can be useful if a web page is very long.

Bookmarks are created using the id attribute. IDs are called by adding the pound (#) symbol to the ID name.

Enhance the look and functionality of your website by styling your HTML lists into a sleek horizontal or navigation menu. With a few CSS declarations, your website can become more user-friendly and visually appealing.

The padding element is used to create space around an element’s content, inside of any defined borders.

padding property

The padding property is used to create space around an element’s content, inside of any defined borders.

The padding property is a shorthand property for the following individual padding properties:

padding-top
padding-right
padding-bottom
padding-left

<body>
  <h1 style="background-color: hotpink; padding: 25px;">
    Example of Heading with 25 pixels padding
  </h1>
</body>

overflow property

The overflow property specifies what should happen if content overflows an element’s box.

This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

The value for overflow property can be visible, scroll, auto, hidden, clip.

The overflow property only works for block elements with a specified height.

<head>
  <style type="text/css">
    ul {
      list-style-type: none; 
      margin: 0; 
      padding: 0;
      overflow: hidden;
      background-color: #333333;
    }
 
    li {
      display: block; 
      color: white; 
      text-align: center; 
      padding: 16px; 
      text-decoration: none; 
      float: left;
    }
 
    a {
      color: white; 
      text-decoration: none;
    }
  </style>
</head>
<body>
  <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>
</body>

Hyperlinks

On this page