How to specify the location of the linked document in HTML5?

Last Updated : 07 Apr, 2021

In this article, we will learn how to specify the location of the linked document in HTML5. This can be done by using a href attribute in the <link> element. This has various uses. Most commonly it is used to link stylesheets or favicons to the document.

Syntax:

<link rel="stylesheet" type="text/css" href="style.css">

The below examples illustrate the use of the href attribute.

Example 1: In this example, an external stylesheet’s location is specified using the href attribute.

HTML

<html> 
<head> 
  
  <!-- Bootstrap CSS from CDN -->
  <link rel="stylesheet"
        href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
  
  <!-- Custom styling -->
  <style> 
    h1 { 
      color: green; 
    } 
  
    h1, h2 { 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h1>GeeksforGeeks</h1> 
  <h2> 
    How to specify the location of the 
    linked document in HTML5? 
  </h2> 
</body> 
</html>

Output:

Example 2: In this example, the <a> tag is used to link the document using the href attribute.

HTML

<html> 
<head> 
  <style> 
    h1 { 
      color: green; 
    } 
  
    body { 
      text-align: center; 
    } 
  </style> 
</head> 
<body> 
  <h1>GeeksforGeeks</h1> 
  <h2> 
    How to specify the location of 
    the linked document in HTML5? 
  </h2> 
  <a href="https://ide.geeksforgeeks.org/"> 
    Click to open in the same tab 
  </a> 
</body> 
</html>