• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

HTML Head

← Previous Next →

The <head> element in HTML is an essential part of every webpage. It is a container for metadata and links to external resources that are not displayed directly on the page but help the browser, search engines, and users understand and interact with your website. Understanding the <head> section is important for improving SEO, controlling page behavior, linking stylesheets, adding scripts, and defining the document’s information. In this tutorial, you will learn everything about the HTML <head> tag, its components, and best practices.

What is the HTML Head

The <head> element is placed at the top of an HTML document, right after the <html> tag and before the <body> tag. It does not display content on the webpage itself but contains metadata, styles, scripts, and links to resources that influence how the page works and how it is displayed.

Basic Syntax

<!DOCTYPE html>
<html>
<head>
    <!-- Head content goes here -->
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

The <head> section is essential for every web page and acts as the “brain” of the document, providing instructions and information to browsers and search engines.

Common Elements Inside the Head

The <head> tag can contain several types of elements. The most common include:

  1. Title (<title>)
    Defines the title of the page shown in browser tabs and search engine results.

  2. Meta Tags (<meta>)
    Provide information about the document, such as character encoding, description, keywords, and viewport settings.

  3. Link Tags (<link>)
    Connect external stylesheets or resources like fonts.

  4. Style Tags (<style>)
    Include internal CSS for the webpage.

  5. Script Tags (<script>)
    Include JavaScript that runs on the page.

  6. Base Tag (<base>)
    Sets a base URL for relative links on the page.

The Title Tag

The <title> tag defines the name of your webpage as displayed in the browser tab. It also plays a crucial role in SEO.

Example

<head>
    <title>My Awesome Website</title>
</head>

Search engines use the title tag to understand the page topic. Keep it concise, clear, and descriptive, ideally under 60 characters.

Meta Tags

Meta tags provide metadata about the page. These do not display on the webpage but help browsers and search engines.

Common Meta Tags

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Learn HTML from basics to advanced with examples.">
    <meta name="keywords" content="HTML, tutorial, web development, beginner guide">
    <meta name="author" content="Vicky">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

  • charset specifies character encoding (UTF-8 is recommended).

  • description gives a brief summary of the page for search engines.

  • keywords list relevant keywords (though less important in modern SEO).

  • author names the creator of the page.

  • viewport controls responsive design on mobile devices.

Link Tags

The <link> tag connects external resources like CSS stylesheets, fonts, or icons.

Example: Linking a CSS File

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

  • rel="stylesheet" indicates it’s a CSS file.

  • href provides the path to the file.

Example: Linking a Favicon

<head>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Favicons appear in browser tabs, bookmarks, and history, helping users recognize your site.

Style Tags

You can also include CSS directly inside the <head> using the <style> tag. This is useful for small projects or page-specific styles.

Example: Internal CSS

<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9;
        }
        h1 {
            color: #333;
        }
    </style>
</head>

Although this works, it’s generally better to use external CSS for maintainability.

Script Tags

JavaScript can be included in the <head> using <script>. Scripts in the head can run before the page content loads, so sometimes defer or async attributes are used to avoid blocking rendering.

Example: JavaScript in Head

<head>
    <script src="script.js" defer></script>
</head>

  • defer ensures the script runs after the HTML is parsed.

  • async allows the script to load independently without blocking rendering.

Base Tag

The <base> tag sets a base URL for all relative links on the page. Only one <base> tag should be used.

Example

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

All relative URLs will now be resolved relative to https://www.example.com/.

Best Practices for HTML Head

  1. Always include a <title> tag.

  2. Use UTF-8 character encoding for compatibility.

  3. Include a responsive viewport meta tag.

  4. Minimize inline styles and scripts; prefer external files.

  5. Keep the head organized and structured for readability.

  6. Include SEO-friendly meta descriptions and keywords.

  7. Add a favicon for branding and recognition.

  8. Avoid duplicate or unnecessary meta tags.

Summary of HTML Head

The <head> element is a crucial part of every HTML document. It contains metadata, links to CSS, scripts, and information that helps browsers, search engines, and users understand your page. Key components include <title> for the page name, <meta> for metadata, <link> for stylesheets and favicons, <style> for internal CSS, <script> for JavaScript, and <base> for setting relative URLs. Following best practices ensures that your webpage is SEO-friendly, responsive, and well-structured.

Practice Questions

Q1. Add a <title> tag to your HTML document.

Q2. Include a <meta> tag to set UTF-8 character encoding.

Q3. Write a <meta> tag with a page description.

Q4. Link a CSS file called main.css using <link>.

Q5. Use <style> inside the <head> to change body text color.

Q6. Insert JavaScript code using <script> to display an alert.

Q7. Set a favicon with <link rel="icon">.

Q8. Use <meta name="viewport"> for responsive design.

Q9. Create a <head> section with all standard tags.

Q10. Add a <base> tag to set the base URL for your links.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

HTML

online coding class codepractice

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

codepractice logo
Login
Go Back Top