DEV Community

wasifali
wasifali

Posted on

HTML file path and HTML head elements

HTML File Paths

A file path describes the location of a file in a web site's folder structure.
File paths are used when linking to external files, like:
Web pages
Images
Style sheets
JavaScript

Absolute File Paths

An absolute file path is the full URL to a file

Example

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

Relative File Paths

A relative file path points to a file relative to the current page.

Example:

<img src="/images/picture.jpg" alt="Mountain">
Enter fullscreen mode Exit fullscreen mode

This example shows that the file path points to a file in the images folder located in the current folder.

The HTML Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML Element

The <title> element defines the title of the document. The title must be text-only
The <title> element is required in HTML documents
The <title> element:
defines a title in the browser
provides a title for the page
displays a title for the page in search engine-results

Example

<!DOCTYPE html>
<html>
<head>
  <title>A Meaningful Page Title</title>
</head>
<body>

The content of the document

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

The HTML <style> Element

The <style> element is used to define style information for a single HTML page

Example

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>
Enter fullscreen mode Exit fullscreen mode

The HTML <link> Element

The <link> element defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets.

Example

`<link rel="stylesheet" href="mystyle.css">`
Enter fullscreen mode Exit fullscreen mode

The HTML <meta> Element

The <meta> element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.

Examples

Define the character set used:
<meta charset="UTF-8">
Enter fullscreen mode Exit fullscreen mode

Example of <meta> tags:

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
Enter fullscreen mode Exit fullscreen mode

The HTML <script> Element

The <script> element is used to define client-side JavaScript.

Example

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello JavaScript!";
}
</script>
Enter fullscreen mode Exit fullscreen mode

The HTML <base> Element

The <base> element specifies the base URL

Example:

<head>
<base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)