Understanding HTML File Paths, Charset, and Meta

HTML File path, Charset and Meta

By Emmanuel Chinonso

Web Developer

A file path describes the location of a file in web site’s folder structure. File paths are important when linking to external files such as web pages, images, style sheets, Javascript files.

There are two ways file can be linked they are Absolute file path and relative file path.

Absolute file path

This file path is the full URL to the file.

HTML

<img src= "https://www.google.com/images/picture.jpg" alt="logo">

Relative file path

This file path points to a file relative to the current page. In this example, the file path follows a file in the images folder located at the root of the current web.

HTML

<img src="/images/pictures.jpg" alt="logo">

In the following example, the file path points to a file in the images folder located in the current folder.

HTML

<img src="images/pictures.jpg" alt="logo">

In the following example, the file path points to the file in the images folder located in the folder one level up from the current folder.

HTML

<img src ="../images/pictures.jpg" alt = "logo">

It is always best to use the relative file path when you are working. This is to prevent your web pages from been bound to your current base URL. All links will work on your computer(localhost) as well as on your existing public domain and future public domains.

HTML Charset

For a web page to display an HTML page correctly, a web browser must know which character set to use. This is specified in the <meta> tag

HTML

<meta charset="UTF-8">

HTML Meta

HTML lets you specify metadata- additional information about a document in a variety of ways. The meta element can describe properties of the HTML document, such as author, expiry date, a list of keywords, document author, description of a web page, etc.

The information included in the meta tag is important for search engines because search engines will use that information to ensure the content a user is searching for. The tag is an empty element.

HTML

<!DOCTYPE html>
<html lang = "en">
  <head>
    <meta charset = "UTF-8">
    <title> Meta Tag</title>
  </head>
  <body>
    <p> This is an example of a metatg</p>
  </body>
</html>

Conclusion

In this article, we discussed HTML file paths and how to properly link different file types at different locations to your HTML page.

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Html Editors

All you need to know about Html Elements

Comments

...