HTML File Paths

❮ Prev Next ❯

HTML pathsare used to specify the location of files, images, and other resources in HTML documents. There are three types of paths:

Absolute paths

An absolute path specifies the full URL of a resource, including the protocol, domain, and path. Absolute paths are used to link to resources on external websites or servers. The syntax for an absolute path is:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
      <h1>File Paths</h1>
      <a href="https://www.example.com/images/picture.jpg">Link to picture</a>
    </body>
</html>

Root-relative paths:

A root-relative path specifies the location of a resource relative to the root directory of a website. The syntax for a root-relative path is:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
      <h1>File Paths</h1>
      <img src="../../images/random-images/dog.jpg" alt="Picture Description"/>
    </body>
</html>

Document-relative paths:

A document-relative path specifies the location of a resource relative to the location of the HTML document. Document-relative paths are used to link to resources within the same website or server. The syntax for a document-relative path is:

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title of the Document</title>
    </head>
    <body>
      <h1>File Paths</h1>
      <img src="../../images/random-images/dog.jpg" alt="Picture Description"/>
    </body>
</html>

It's important to use the correct path type when linking to resources in HTML documents, as incorrect paths can lead to broken links and missing resources. Lets us see how to work with Head in the next chapter.

❮ Prev Next ❯