DEV Community

Cover image for Html Tutorial: HTML File path, Charset and Meta
Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Html Tutorial: HTML File path, Charset and Meta

#html #webdev #codenewbie #tutorial

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 sheet, Javascripts files.

AD-BANNER

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.

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

Relative file path

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

<img src="/images/pictures.jpg" alt="logo">
Enter fullscreen mode Exit fullscreen mode

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

<img src="images/pictures.jpg" alt="logo">
Enter fullscreen mode Exit fullscreen mode

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

<img src ="../images/pictures.jpg" alt = "logo">
Enter fullscreen mode Exit fullscreen mode

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 current public domain and future public domains.

HTML Charset

In order 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

<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

HTML Meta

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

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

<!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>
Enter fullscreen mode Exit fullscreen mode

Contrast Bootstrap UI Kit

Create Stunning Websites and Web Apps

Building different custom components in react for your web apps or websites can get very stressful. That's why we decided to build contrast. We have put together a UI kit with over 10000+ components, 5 admin dashboards and 23 additional different pages template for building almost any type of web app or webpage into a single product called Contrast Pro. Try contrast pro!

Contrast Design Boostrap

Contrast React Bootstrap PRO is a Multipurpose pro template, UI kit to build your next landing, admin, SAAS, prelaunch, etc. project with a clean, well documented, well crafted template and UI components. Learn more about Contrast Pro

Resources

Latest comments (0)

Read next

pbouillon profile image

Efficient Patterns for Effects

Pierre Bouillon -

rounit08 profile image

Web Performance Optimization Techniques

Rounit Ranjan Sinha -

paulbratslavsky profile image

Epic Next.js 14 Tutorial Part 3: Building Out Our Home Page

Paul Bratslavsky -

mayankvishwakarmadev profile image

Simplifying React Router Query Parameter Management with Custom Hooks

Mayank vishwakarma -