Created by Turbolearn AI
Head Tag Deep Dive
The <head> tag is where you put metadata about your HTML document. This
information isn't displayed on the webpage itself, but it's used by the browser, search
engines, and other services.
Visibility of Head Tag Data
Data within the <head> tag is NOT visible on the webpage. What you see
on a website comes from the <body> tag.
Common Uses of the Head Tag
The <head> tag is generally used to insert search engine optimization (SEO) related
data.
Boilerplate Code Breakdown
Let's break down the boilerplate code typically found in the <head> section:
<meta charset="UTF-8">: Specifies the character encoding for the document.
UTF-8 is a widely used character encoding that supports a broad range of
characters.
<meta http-equiv="X-UA-Compatible" content="IE=edge">: Ensures that Internet
Explorer uses the latest rendering engine.
<meta name="viewport" content="width=device-width, initial-scale=1.0">:
Configures the viewport for responsive design, ensuring the page scales
properly on different devices.
Title Tag
The <title> tag defines the title of the HTML document, which is displayed in the
browser's title bar or tab.
Page 1
Created by Turbolearn AI
<title>My Webpage Title</title>
Favicon
A favicon is a small icon associated with a particular website or webpage. It's
displayed in the browser tab, bookmark bar, and other places.
To add a favicon, use the <link> tag with the rel="icon" attribute:
<link rel="icon" href="image.png">
Make sure the image is in the root directory.
Linking CSS Files
CSS (Cascading Style Sheets) is used to style HTML elements. To link an external
CSS file, use the <link> tag:
<link rel="stylesheet" href="style.css">
Here's an example of changing the color of an <h1> element using CSS:
h1 {
color: aqua;
}
Remember to link the CSS file to your HTML to see the changes.
Linking JavaScript Files
Page 2
Created by Turbolearn AI
JavaScript is used to add interactivity to your webpage. To link an external JavaScript
file, use the <script> tag:
<script src="script.js"></script>
For example, to display an alert when the page loads, you can use the following
JavaScript code:
window.onload = function() {
alert("Hello, how are you all?");
};
Just like with CSS files, you need to link the JavaScript file to your HTML to make it
work.
SEO - Search Engine Optimization
Search Engine Optimization (SEO): The process of improving the visibility
of a website or a web page in a search engine's unpaid results.
Search Engine Optimization (SEO)
When developing a website, the goal is to rank high in search engine results. SEO
involves optimizing your website so it appears at the top when relevant keywords are
searched. Meta tags in the <head> element can assist in this process.
Meta Tags and SEO
Meta tags contribute to SEO by providing search engines with information about your
webpage. Here are some examples of meta tags:
Page 3
Created by Turbolearn AI
Title: Specifies a title for the webpage.
Description: Provides a brief summary of the page content.
Keywords: Lists relevant keywords for search engines.
Author: Specifies the author of the page.
Copyright: Declares copyright information.
Robots: Instructs search engine crawlers on how to index the page.
Boilerplate Meta Tags
When generating boilerplate code, certain meta tags are automatically included.
Let's explore some of these:
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Character Set: UTF-8
<meta charset="UTF-8">
This meta tag specifies the character encoding for the HTML document.
Character encoding is a method of mapping characters to numeric values,
allowing them to be represented in digital format. UTF-8 is a popular
character encoding that supports multiple languages and a wide range of
characters.
Using UTF-8 allows for multilingual support.
HTTP Equiv: X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=edge">
This tag addresses compatibility issues with older versions of Internet Explorer.
Page 4
Created by Turbolearn AI
In the past, different versions of Internet Explorer would render websites
differently due to variations in their rendering engines.
This tag ensures that the latest rendering engine is used to render the
webpage, promoting uniformity across different browsers.
Name Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tag configures the viewport settings for the webpage.
The viewport is the visible area of the webpage in the browser window.
width=device-width: Sets the width of the viewport to match the
device width.
initial-scale=1.0: Sets the initial zoom level to 100%.
The viewport settings ensure that the webpage is displayed correctly on different
devices with the appropriate zoom level.
Adding Custom Meta Tags
You can add your own meta tags to further enhance SEO. For example, to add a
description:
<meta name="description" content="This website aims to create India's best
The meta tag will look like this in the page source:
<meta name="description" content="This website aims to create India's best
Page 5
Created by Turbolearn AI
Meta tags like the description tag aren't directly visible on the webpage, but they are
used by search engines to display relevant information in search results. For example,
in Google search results, the text below the link often comes from the meta
description tag.
Meta Tags
Meta tags provide metadata about the HTML document. This data is used by search
engines and other web services.
Metadata: data about data.
Meta tags always go inside the <head> element.
Keywords
Keywords can be added to the meta tags to help search engines rank the website.
When users search for these keywords, the website has a higher chance of appearing
in the search results.
<meta name="keywords" content="code help, operating system">
Description
The description meta tag provides a brief summary of the page's content, which is
often displayed in search engine results.
<meta name="description" content="A brief description of the webpage.">
```<script type="text/javascript">
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<script type="text/javascript" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>
Page 6
