HTML Head

29 March 2025 | Category: HTML

The <head> element in an HTML document is a container for metadata and links to external resources. This metadata helps browsers understand your webpage and optimize its functionality.

1. Purpose of the `<head>` Element

The <head> section:

Contains metadata about the document (e.g., title, character encoding, and description).
Links external files like stylesheets, fonts, and scripts.
Sets up information for search engines and social media platforms.

2. Syntax

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Metadata and resources go here -->
</head>
<body>
  <!-- Page content goes here -->
</body>
</html>

3. Common Elements Inside `<head>`

Tag	Purpose
`<title>`	Defines the title of the document, shown in the browser tab.
`<meta>`	Provides metadata about the document (character encoding, viewport, description, etc.).
`<link>`	Links external resources like CSS files or icons.
`<style>`	Embeds internal CSS styles.
`<script>`	Links or embeds JavaScript files.
`<base>`	Sets the base URL for all relative links in the document.

4. Key Tags and Attributes

a. `<title>`

Defines the title of the webpage, which appears in the browser tab and search engine results.

<title>My Awesome Website</title>

b. `<meta>`

Used to define metadata. Common attributes include name, content, and charset.

Charset (Character Encoding):

<meta charset="UTF-8">

Viewport (Responsive Design):

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

Description (SEO):

<meta name="description" content="This is a description of my awesome webpage.">

Keywords (SEO):

<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">

Author:

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

c. `<link>`

Links external resources like stylesheets, icons, and fonts.

Stylesheet:

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

Favicon:

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

d. `<style>`

Embeds internal CSS styles within the <head> section.

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

e. `<script>`

Links or embeds JavaScript. It is recommended to place <script> tags at the end of the <body> section, but they can also be included in <head> with the defer or async attributes.

External JavaScript:

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

Inline JavaScript:

<script>
  console.log('Hello from the head section!');
</script>

f. `<base>`

Sets a base URL for all relative links on the page.

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

5. Example of a Complete `<head>` Section

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Charset -->
  <meta charset="UTF-8">
  
  <!-- Page Title -->
  <title>My Awesome Website</title>
  
  <!-- Viewport for Mobile Devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO Metadata -->
  <meta name="description" content="Learn web development with our amazing tutorials.">
  <meta name="keywords" content="HTML, CSS, JavaScript, Web Development">
  <meta name="author" content="John Doe">
  
  <!-- Stylesheets -->
  <link rel="stylesheet" href="styles.css">
  
  <!-- Favicon -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  
  <!-- External Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
  
  <!-- Inline Styles -->
  <style>
    h1 {
      color: darkblue;
    }
  </style>
  
  <!-- External Script -->
  <script src="script.js" defer></script>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

6. Best Practices

Use the <meta> viewport tag for responsive design.
Always include a <title> tag for SEO and user-friendly browsing.
Keep inline styles and scripts to a minimum; prefer external files for better performance.
Use <link> for external stylesheets and favicons to keep the <head> clean.

Conclusion

The <head> section is essential for defining the metadata and linking resources for your webpage. A well-structured <head> improves page performance, SEO, and user experience.

HTML Head

1. Purpose of the <head> Element

2. Syntax

3. Common Elements Inside <head>

4. Key Tags and Attributes

a. <title>

b. <meta>

c. <link>

d. <style>

e. <script>

f. <base>

5. Example of a Complete <head> Section