HTML Head

❮ Prev Next ❯

The headelement is an important part of an HTML document.

It is a container for metadata about the HTML document and includes information such as the document title, stylesheets, scripts, and other types of data that aren't directly displayed on the page.

In this section, we'll explore the head element in more detail, including its various components and how to use them.

The HTML <head> Element

The <head>element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.

HTML metadata is data about the HTML document. Metadata is not displayed.

Metadata typically define the document title, character set, styles, scripts, and other meta information.

The HTML <title> Element

The <title>element is one of the most important components of the head element. It is used to define the title of the HTML document, which is typically displayed in the browser's titlebaror tab.The syntax for the title element is as follows: 

<head>
  <title>Title of the Document</title>
</head>

The HTML <meta> Element

The <title>element is used to include various types of metadata in an HTML document, such as Keywords, Description, and authoship information.

One of the most common uses of the meta element is to include a description of the page, which is often displayed in search engine results. The syntax for the meta element is as follows:

Define the character set used: 

<meta charset="UTF-8">

Define a description of your web page: 

<meta name="description" content="Free Web tutorials">

Define keywords for search engines: 

<meta name="kaywords" content="HTML, CSS, JavaScript">

Define the author of a page: 

<meta name="author" content="John Doe">

Refresh document every 30 seconds: 

<meta http-equiv="refresh" content="30">

Setting the viewport to make your website look good on all devices: 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <meta charset="UTF-8">
    <meta name="author" content="John Doe">
    <meta http-equiv="refresh" content="30">
    <meta name="kaywords" content="HTML, CSS, JavaScript">
    <meta name="description" content="Free Web tutorials">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the Document</title>
    </head>
    <body>
      <h1>Welcome to Codingkoleji</h1>
      <p>All meta information goes inside the head section.</p>
    </body>
</html>

The HTML <link> Element

The link element is used to link an HTML document to an external resource, such as astylesheetsor an icon.

This element is typically used to include CSS stylesheetsin an HTML document. The syntax for the link element is as follows: 

<head>
  <link rel="stylesheet"  href="style.css"/>
  <link rel="icon"  href="favicon.ico"/>
</head>

In this example, the first link element is used to link the HTML document to a stylesheet called "styles.css", while the second link element is used to link the document to a faviconimage. stylesheetsin an HTML document. The syntax for the link element is as follows:

The HTML <script> Element

The scriptelement is used to include JavaScript code in an HTML document. This element can be used to define inline scripts, or to link to external JavaScript files. The syntax for the script element is as follows. 

<head>
  <script>
    .... some JavaScript
  </script>
  <script src="script.js"></script>
</head>

In this example, the first script element is used to define inline JavaScript code, while the second script element is used to link the document to an external JavaScript file called"script.js".

The HTML <base> Element

The baseelement specifies the base URL for all relative URLs within the document. It is useful when working with multiple pages within the same website. 

<base href="https://www.example.com">

Setting The Viewport

The Viewportis an important aspect of web design, as it defines the visible area of a web page on a device's screen. Setting the viewport correctly is essential for ensuring that a web page displays correctly across different devices and screen sizes.

To set the viewport in HTML, we can use the viewport meta tag within the head element of our web page. Here's an example: 

<head>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <h1>Hello, World!</h1>
</body>

In the above example, we've set the viewport to the width of the device screen, and set the initial scale to 1.0.This ensures that the web page is displayed at the correct size on any device.

Setting the viewport correctly is essential for ensuring that a web page is displayed correctly across different devices and screen sizes.

The <style>Element:

The <style> element is used to define CSS styles for the document. CSS rules specified within the <style> element apply to the entire document or to specific elements on the page.

Example 

<!DOCTYPE HTML>
  <html>
    <head>
    <style>
    .city{
      background-color :totmato;
      padding :10px;
      color :white;
    }
    .main{
      text-align :center;
    }
    </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>Title of the Document</title>
    </head>
    <body>
      <h3 class="city main">Abuja</h3>
      <h3 class="city">Kaduna</h3>
      <h3 class="city">Kano</h3>
    </body>
</html>

Now that we have learn the most valubale tag in HTML and It's important to the search engine and the users. Lets us see how to arrange the Layout of your website in the next chapter.

❮ Prev Next ❯