home bytes tutorials html head tag in html

Course Outline

HTML5 Document Structure

HTML5 Elements and Attributes

HTML Head Tag

Body Tag in HTML

HTML Elements: Inline vs Block

HTML Head Tag

Last Updated: 22nd June, 2023

Introduction

Let's say you are creating a new website for a client and you want to ensure that it is optimized for search engines. Your client is a small business that sells handmade jewelry. They want their website to rank high in search results when people search for "handmade jewelry" or related keywords. To achieve this, you would need to make sure that the <head> section of your HTML document includes relevant information about the website's content.

For example, you might include the following elements in the <head> section:

The title of the page: This should accurately describe the content of the page and include relevant keywords. For example, "Handmade Jewelry - Unique and Affordable Pieces"
Meta description: A brief description of the page that appears in search results. This should also include relevant keywords and entice users to click through to the website. For example, "Discover our collection of unique and affordable handmade jewelry. Shop now for one-of-a-kind pieces that will make you stand out from the crowd."
Meta keywords: A list of relevant keywords that describe the content of the page. For example, "handmade jewelry, unique jewelry, affordable jewelry, artisan jewelry"

By including these elements in the <head> section of your HTML document, you are providing important information to search engines about the content of your website. This helps search engines understand what your website is about and makes it more likely that your website will appear in search results when people search for relevant keywords.

In this lesson, we will explore the head section in HTML and its various components.

Subtopics:

Overview of the Head Section in HTML
The title tag
Meta tags
Link tags
Style tags
Script tags
Base tags

Overview of the Head Section in HTML:

The head section is located between the opening and closing HTML tags and contains information about the web page that is not visible on the page itself. It is a container for metadata, which provides information about the page that is used by browsers and search engines. The head section also includes links to external resources such as stylesheets and scripts. The head section is enclosed by the <head>and </head>tags.

Example of head element:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="description" content="A brief description of the page">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<!-- content of the page goes here -->
</body>
</html>

In this example, the head element contains several metadata elements, including:

The title element, which specifies the title of the page.
The meta element with the charset attribute, which specifies the character encoding used on the page.
The meta element with the description attribute, which provides a brief description of the page.
The meta element with the viewport attribute, which specifies the viewport settings for mobile devices.
The link element with the rel attribute set to "stylesheet", which links to an external CSS stylesheet.
The script element, which links to an external JavaScript file.

These elements are all placed within the head element, which is located before the body element. The body element contains the actual content of the page, such as headings, paragraphs, images, and other HTML elements.

The Title Tag

The title tag is one of the most critical components of the head section, and it defines the title of the web page. The text within the title tag is displayed on the browser's title bar and in search engine results. The title tag should be descriptive and contain relevant keywords that accurately reflect the content of the web page.

For example, suppose you are creating a web page about healthy recipes. In that case, the title tag could be:

<title>Healthy Recipes - Delicious and Nutritious</title>.

Meta Tags

Meta tags are HTML elements that provide metadata about a web page. They are included in the head section of an HTML document and are not visible to the user. Meta tags can be used to provide information about the author of the page, the description of the page, keywords related to the content, the character set used on the page, and other information that can be useful for search engines and other web tools.

Some common types of meta tags include:

The "description" tag, which provides a brief summary of the page's content and is often used by search engines to display a snippet of text in search results. For example,

<meta name="description" content="Find healthy and delicious recipes for your family with our collection of healthy recipes.">

The "keywords" tag, which lists the keywords or phrases that are relevant to the content on the page. For example,

<meta name="keywords" content="healthy, recipes, family, nutritious, delicious">

The "viewport" tag, which specifies the viewport settings for mobile devices.
The "charset" tag, which specifies the character encoding used on the page.

Meta tags are important for several reasons:

Search engines use meta tags to understand what a web page is about and to index it properly in their search results.
Meta tags can influence the way a web page appears in search engine results pages (SERPs) and can improve click-through rates.
Meta tags can also provide important information to social media platforms when a web page is shared, helping to ensure that the correct title, description, and image are displayed.

Overall, meta tags are an important aspect of on-page SEO (search engine optimization) and can help to improve the visibility and ranking of a web page in search results.

Link Tags

Link tags are used to link the web page to external resources such as stylesheets, scripts, and icons. There are several types of link tags, including:

<link rel="stylesheet" href="style.css">

Stylesheet Link Tag: This tag is used to link the web page to an external stylesheet that defines the page's style and layout. For example,

Script Link Tag: This tag is used to link the web page to an external JavaScript file that contains code used to manipulate the page's content or behavior. For example,

<link rel="script" href="script.js">

Style Tags

Style tags are used to define the web page's style and layout. They can be used to change the font, color, and layout of the page's content.

For example,

<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
</style>

Script Tags

Script tags are used to define and execute JavaScript code on the web page. They can be used to manipulate the page's content or behavior.

For example,

<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>

Base tag

The HTML <base> element is used to specify the base URL for all relative URLs in a document. It must be placed in the <head> section of the document and can have two attributes:

href: Specifies the base URL for all relative URLs in the document.
target: Specifies the default target for all hyperlinks and forms in the document.

Here is an example of how to use the <base> element in the <head> section of an HTML document:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <base href="<https://example.com/>" target="_blank">
</head>
<body>
  <a href="page.html">Page</a>
</body>
</html>

In this example, the <base> element specifies that all relative URLs in the document should be resolved against the URL https://example.com/. The target attribute specifies that all hyperlinks and forms should open in a new window or tab.

When a hyperlink is clicked or a form is submitted, the browser will use the base URL to resolve the relative URL in the href attribute of the hyperlink or the action attribute of the form. In this example, clicking the "Page" link will take the user to https://example.com/page.html.

Using the <base> element can be useful when working with a website that has a complex URL structure or when migrating a website to a new domain.

Conclusion

In conclusion, the head section in HTML is an essential component of any web page as it contains information about the page that is not visible to the user. It includes metadata, links to external resources, and scripts used to define the page's style and behavior. Understanding and properly utilizing the head section is crucial to creating effective and accessible web pages.

Module 2: HTML5 Basics