Head
KEYPOINTS
- The head tag is the most important in HTML because all sensitive tags are under the head tag.
- It includes various elements for different purposes i.e. <title>, <style>, <meta>, <link>, <script> & <base>.
KEYPOINTS
- The head tag is the most important in HTML because all sensitive tags are under the head tag.
- It includes various elements for different purposes i.e. <title>, <style>, <meta>, <link>, <script> & <base>.
Example:
<html>
<head>
<title>Head</title>
<meta charset="utf-8">
<link rel="stylesheet">
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>Output:
The basic structure of the <head> element
- <title>: It defines the title of a webpage, appearing in the browser tab and search engine results. This title is what you see displayed in the browser tab when you visit a website, making it a key part of the user experience. Additionally, the content within the
<title>tag is often used by search engines as the clickable headline in search results, making it important for SEO (Search Engine Optimization). A well-crafted title should be concise, descriptive, and relevant, providing a clear indication of what the page is about. It’s typically placed within the<head>section of the HTML document.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<p>Title Example</p>
</body>
</html>Output:
- <style>: It enhances visual presentation by embedding CSS within the HTML document. This tag allows you to define the visual presentation of your webpage, controlling elements like colors, fonts, spacing, and layout. By placing CSS rules inside the
<style>tag, you can apply consistent styling across your entire page or target specific elements with precision.The
<style>tag is typically placed within the<head>section of the HTML document, ensuring that the styles are applied as the page loads.
The
<style>tag is typically placed within the<head>section of the HTML document, ensuring that the styles are applied as the page loads.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Style</title>
<style>
h4 {
background-color: aliceblue;
}
p {
font-size: 12px;
color: blue;
}
</style>
</head>
<body>
<h4>Style Example</h4>
<p>This is how we use style</p>
</body>
</html>Output:
- <meta>: It provides metadata, influencing how search engines interpret your content. The
<meta>tag in HTML is used to provide metadata—information about the webpage—that isn’t displayed directly on the page but is essential for browsers, search engines, and other services. This metadata can include details like the page’s description, keywords, author, and character set. The<meta>tag plays a significant role in SEO (Search Engine Optimization) and accessibility, helping search engines understand your content and users find your page. - Here are some common uses of the
<meta>tag:
- Viewport Settings for Responsive Design: This tag is crucial for ensuring your webpage displays well on mobile devices, adjusting the page’s width and scaling accordingly.<meta name="viewport" content="width=device-width, initial-scale=1.0">
- Character Set Declaration:Keywords: This specifies the character encoding for the document, ensuring that text displays correctly across different browsers and devices.<meta charset="UTF-8">
- Page Description: This description often appears in search engine results, providing a brief summary of the page’s content.
<meta name="description" content="A comprehensive guide to understanding HTML basics and best practices.">
- Author Information: The
<meta>tag, typically placed in the<head>section, is a silent yet powerful tool for enhancing how your webpage is interpreted, displayed, and discovered.
<meta name="author" content="John Doe">
Example:
<!DOCTYPE html>
<html>
<head>
<title>Meta</title>
<meta name="description" content="A guide to HTML tags" />
<meta name="keywords" content="HTML, web development" />
</head>
<body>
<h4>Meta Example</h4>
<p>This is how we provide metadata</p>
</body>
</html>Output:
- <link>: The
<link>tag in HTML is used to establish connections between your webpage and external resources, such as stylesheets, icons, or other files that your page depends on. Unlike other tags, the<link>tag doesn’t directly affect the content of the page but plays a crucial role in its presentation and functionality.A common use of the
<link>tag is to connect your HTML document to an external CSS file, which defines the visual style for your page
Example:
<!DOCTYPE html>
<html>
<head>
<title>Link</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
</head>
<body>
<h4>Link Example</h4>
<p>This is how we link CSS files and other external resources</p>
</body>
</html>
Output:
- <script>: The
<script>tag in HTML is used to embed or reference JavaScript, allowing you to add dynamic and interactive content to your webpage. JavaScript enables functionality like form validation, interactive maps, animations, and more, making your website responsive to user actions.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Script</title>
<script>
function greetUser() {
alert("Hello, welcome to our website!");
}
</script>
</head>
<body>
<h4>Script Example</h4>
<p>This is how we add Javascript to HTML</p>
</body>
</html>
Output:
- <base>: The
<base>tag in HTML is used to define a base URL for all relative URLs within a document. This means that any relative link (like images, stylesheets, or hyperlinks) on the page will be resolved relative to the URL specified in the<base>tag. It’s a handy way to set a consistent reference point for your links, especially when you have multiple relative paths in your document.
The <base> tag must be placed within the <head> section of your HTML document and can include two attributes:
- href: Specifies the base URL.
- target: Sets the default target for all hyperlinks (e.g., opening links in a new tab with
target="_blank").
Example:
<!DOCTYPE html>
<html>
<head>
<title>Base</title>
<base href="https://quipoin.com">
</head>
<body>
<h4>Base Example</h4>
<p>This is how we use Base</p>
</body>
</html>
Output:
