Html Tutorial: HTML File path, Charset and Meta
Tags: html, webdev, codenewbie, tutorial
Published: 2021-05-21 16:39:33

---
title: Html Tutorial:  HTML File path, Charset and Meta
published: true
date: 2021-01-10 01:16:04 UTC
tags: [html, webdev, codenewbie, tutorial]
canonical_url: https://www.devwares.com/blog//html-file-path
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1is8f4zs53qgdlkqtry.png
series: Devwares Web development Free Course
---

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41meil9ho9yx2ulb535m.png)

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 fellows a file in the images folder located at the root of the current web.

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

```
  

In the next 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 next 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 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

```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 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.

```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>

```

[![Contrast Bootstrap UI Kit](http://github.com/static/6b149e3d75b230f7e8452ace9e21bb05/587b0/banner-ad-1.png "Contrast Bootstrap UI Kit")](https://www.devwares.com/product/bootstrap-contrast-pro)


###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!](https://www.devwares.com/product/contrast-pro)

![Contrast Design Boostrap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ulsutxnzjpbpaauhvbew.png)

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](https://www.devwares.com/product/contrast-pro)

## Resources 

- [Contrast Design Bootstrap](https://www.devwares.com/docs/contrast/javascript/index/)
- [Accordion](https://www.devwares.com/docs/contrast/javascript/components/accordion/)
- [Alert](https://www.devwares.com/docs/contrast/javascript/components/alert/)
- [Animation](https://www.devwares.com/docs/contrast/javascript/components/animations/)
- [Autocomplete](https://www.devwares.com/docs/contrast/javascript/components/autocomplete/)
- [Badges](https://www.devwares.com/docs/contrast/javascript/components/badge/)
- [Box](https://www.devwares.com/docs/contrast/javascript/components/box/)
- [Breadcrumb](https://www.devwares.com/docs/contrast/javascript/components/breadcrumb/)
- [ButtonGroup](https://www.devwares.com/docs/contrast/javascript/components/buttonGroup/)
- [Button](https://www.devwares.com/docs/contrast/javascript/components/buttons/)
- [ButtonToolbar](https://www.devwares.com/docs/contrast/javascript/components/buttonToolbar/)
- [Card](https://www.devwares.com/docs/contrast/javascript/components/card/)
- [Carousel](https://www.devwares.com/docs/contrast/javascript/components/carousel/)
- [Checkbox](https://www.devwares.com/docs/contrast/javascript/components/checkbox/)
- [Collapse](https://www.devwares.com/docs/contrast/javascript/components/collapse/)
- [DataTable](https://www.devwares.com/docs/contrast/javascript/components/datatables/)
- [DatePicker](https://www.devwares.com/docs/contrast/javascript/components/datepicker/)
- [DropDown](https://www.devwares.com/docs/contrast/javascript/components/dropdown/)
- [Footer](https://www.devwares.com/docs/contrast/javascript/components/footer/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/components/forms/)
- [Icon](https://www.devwares.com/docs/contrast/javascript/components/icon/)
- [Iframe](https://www.devwares.com/docs/contrast/javascript/components/iframe/)
- [Input](https://www.devwares.com/docs/contrast/javascript/components/input/)
- [InputGroup](https://www.devwares.com/docs/contrast/javascript/components/inputgroup/)
- [ListGroup](https://www.devwares.com/docs/contrast/javascript/components/listgroup/)
- [Mask](https://www.devwares.com/docs/contrast/javascript/components/mask/)
- [Modal](https://www.devwares.com/docs/contrast/javascript/components/modal/)
- [Multiselect](https://www.devwares.com/docs/contrast/javascript/components/multiselect/)
- [Notification](https://www.devwares.com/docs/contrast/javascript/components/notification/)
- [Pane](https://www.devwares.com/docs/contrast/javascript/components/pane/)
- [Panel](https://www.devwares.com/docs/contrast/javascript/components/panels/)
- [Pop Over](https://www.devwares.com/docs/contrast/javascript/components/popover/)
- [Progress](https://www.devwares.com/docs/contrast/javascript/components/progress/)
- [Radio](https://www.devwares.com/docs/contrast/javascript/components/radio/)
- [Rating](https://www.devwares.com/docs/contrast/javascript/components/rating/)
- [Select](https://www.devwares.com/docs/contrast/javascript/components/select/)
- [Select 2](https://www.devwares.com/docs/contrast/javascript/components/select2/)
- [Slider](https://www.devwares.com/docs/contrast/javascript/components/slider/)
- [Spinner](https://www.devwares.com/docs/contrast/javascript/components/spinner/)
- [Stepper](https://www.devwares.com/docs/contrast/javascript/components/stepper/)
- [Switch](https://www.devwares.com/docs/contrast/javascript/components/switch/)
- [Table](https://www.devwares.com/docs/contrast/javascript/components/table/)
- [Forms](https://www.devwares.com/docs/contrast/javascript/forms/)
- [Navbar](https://www.devwares.com/docs/contrast/javascript/navigation/navbar/)
- [Pagination](https://www.devwares.com/docs/contrast/javascript/navigation/pagination/)
- [Tab](https://www.devwares.com/docs/contrast/javascript/navigation/tabs/)
- [Sidebar](https://www.devwares.com/docs/contrast/javascript/navigation/sidebar/)
- [Time Picker](https://www.devwares.com/docs/contrast/javascript/sections/timepicker/)
- [Data Table](https://www.devwares.com/docs/contrast/javascript/table/datatables/)
- [Fixed Data Table](https://www.devwares.com/docs/contrast/javascript/table/fixed_datatables/)
- [Table](https://www.devwares.com/docs/contrast/javascript/table/table/)
- [Widgets](https://www.devwares.com/docs/contrast/javascript/widgets/)