Labs ICT

HTML Head

← HTML Layout
HTML Page Title →

The HTML <head> element contains meta-information about the HTML document, such as the title, character set, styles, scripts, and other metadata. The content inside the <head> element is not displayed on the page but is crucial for proper rendering, SEO, and browser behavior.

Basic Head Structure

The <head> element comes immediately after the opening <html> tag and before the <body> tag: 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>
</head>
<body>
  <!-- Page content goes here -->
  <h1>Hello World</h1>
  <p>This is a paragraph.</p>
</body>
</html>
Try it Yourself →

Character Encoding

All character encoding declaration should be the first element in the <head>: 

<head>
  <!-- UTF-8 is the recommended encoding -->
  <meta charset="UTF-8">
  
  <!-- Legacy encodings (not recommended) -->
  <!-- <meta charset="ISO-8859-1"> -->
  <!-- <meta charset="Windows-1252"> -->
</head>

The viewport Meta Tag

The viewport meta tag is essential for responsive design and mobile devices: 

<head>
  <!-- Standard responsive viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- Additional viewport options -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  
  <!-- Prevent zooming on mobile -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</head>

The Page Title

The page title is the text that appears in the browser tab and is used as the title for bookmarks and search engine results. 

<head>
  <title>My Website - Home Page</title>
  <!-- Title should be descriptive and under 60 characters -->
</head>

Basic SEO Meta Tags

Search Engine Optimization (SEO) meta tags help search engines understand and index your web pages better. 

<head>
  <!-- Page description (150-160 characters) -->
  <meta name="description" content="A comprehensive guide to web development with HTML, CSS, and JavaScript tutorials.">
  
  <!-- Keywords (less important now, but still used by some search engines) -->
  <meta name="keywords" content="HTML, CSS, JavaScript, web development, tutorials, programming">
  
  <!-- Author information -->
  <meta name="author" content="John Doe">
  
  <!-- Page language/region -->
  <meta name="language" content="English">
  <meta name="geo.region" content="US-CA">
</head>

Robots Meta Tag

The robots meta tag controls how search engine crawlers interact with your page. 

<head>
  <!-- Allow all search engines to index and follow links -->
  <meta name="robots" content="index, follow">
  
  <!-- Don't index this page -->
  <meta name="robots" content="noindex, nofollow">
  
  <!-- Index but don't follow links -->
  <meta name="robots" content="index, nofollow">
  
  <!-- Don't index but follow links -->
  <meta name="robots" content="noindex, follow">
  
  <!-- Don't archive page -->
  <meta name="robots" content="noarchive">
</head>

Open Graph (Facebook)

Open Graph meta tags are used by social media platforms like Facebook to display rich previews of your content. 

<head>
  <!-- Open Graph protocol for Facebook and other social media -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="Web Development Tutorial">
  <meta property="og:description" content="Learn HTML, CSS, and JavaScript with our comprehensive tutorials">
  <meta property="og:url" content="https://example.com/tutorial">
  <meta property="og:image" content="https://example.com/images/tutorial-preview.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:site_name" content="WebDev Academy">
  <meta property="og:locale" content="en_US">
</head>

Twitter Cards

Twitter Cards are used by Twitter to display rich previews of your content. 

<head>
  <!-- Twitter Card types -->
  <meta name="twitter:card" content="summary_large_image">
  <!-- <meta name="twitter:card" content="summary"> -->
  
  <!-- Twitter Card content -->
  <meta name="twitter:site" content="@webdevacademy">
  <meta name="twitter:creator" content="@johndoe">
  <meta name="twitter:title" content="Web Development Tutorial">
  <meta name="twitter:description" content="Learn HTML, CSS, and JavaScript">
  <meta name="twitter:image" content="https://example.com/images/tutorial-preview.jpg">
  <meta name="twitter:image:alt" content="Web development tutorial preview">
</head>

Favicon Setup

Favicons are small icons that appear in browser tabs and bookmarks. They help users identify your site quickly. 

<head>
  <!-- Standard favicon -->
  <link rel="icon" href="favicon.ico" sizes="any">
  
  <!-- PNG favicons for different sizes -->
  <link rel="icon" href="favicon-16x16.png" sizes="16x16" type="image/png">
  <link rel="icon" href="favicon-32x32.png" sizes="32x32" type="image/png">
  
  <!-- Apple touch icons -->
  <link rel="apple-touch-icon" href="apple-touch-icon.png">
  <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png">
  
  <!-- Android icons -->
  <link rel="icon" href="android-chrome-192x192.png" sizes="192x192">
  <link rel="icon" href="android-chrome-512x512.png" sizes="512x512">
</head>

Web App Manifest

The web app manifest is a JSON file that provides information about a web application. It's used by browsers to install your app on the user's device. 

<head>
  <!-- Progressive Web App manifest -->
  <link rel="manifest" href="site.webmanifest">
  
  <!-- Theme color for mobile browsers -->
  <meta name="theme-color" content="#000000">
  
  <!-- Windows tile color -->
  <meta name="msapplication-TileColor" content="#000000">
</head>

Resource Hints

Resource hints help browsers optimize resource loading by providing information about resources that will be needed soon. 

<head>
  <!-- Preload critical resources -->
  <link rel="preload" href="critical.css" as="style">
  <link rel="preload" href="hero-image.jpg" as="image">
  <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>
  
  <!-- Prefetch likely next pages -->
  <link rel="prefetch" href="about.html">
  <link rel="prefetch" href="next-page.js" as="script">
  
  <!-- Preconnect to external domains -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://api.example.com">
  
  <!-- DNS prefetch for external resources -->
  <link rel="dns-prefetch" href="//example.com">
</head>

Content Security Policy

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. 

<head>
  <!-- Content Security Policy header -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trusted.cdn.com; style-src 'self' 'unsafe-inline';">
  
  <!-- X-Frame-Options to prevent clickjacking -->
  <meta http-equiv="X-Frame-Options" content="DENY">
  
  <!-- X-Content-Type-Options -->
  <meta http-equiv="X-Content-Type-Options" content="nosniff">
  
  <!-- Referrer Policy -->
  <meta name="referrer" content="no-referrer-when-downgrade">
</head>

HTTP Equivalents

HTTP equivalents are meta tags that provide information about the HTTP headers that should be sent with the page. 

<head>
  <!-- Refresh page after 5 seconds -->
  <meta http-equiv="refresh" content="5">
  
  <!-- Redirect to another page after 3 seconds -->
  <meta http-equiv="refresh" content="3;url=https://example.com">
  
  <!-- Set content type (usually not needed with HTML5) -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <!-- Set expiration date -->
  <meta http-equiv="expires" content="0">
</head>

Application-specific Meta Tags

Application-specific meta tags provide information about the application or platform that the page is associated with. 

<head>
  <!-- Generator information -->
  <meta name="generator" content="WordPress 5.8">
  
  <!-- Application name -->
  <meta name="application-name" content="MyApp">
  
  <!-- Mobile web app capable -->
  <meta name="mobile-web-app-capable" content="yes">
  
  <!-- Apple-specific meta tags -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="MyApp">
  
  <!-- Microsoft specific -->
  <meta name="msapplication-TileImage" content="mstile-144x144.png">
  <meta name="msapplication-config" content="/browserconfig.xml">
</head>

Best Practices

✓ Do:

  • Always include <meta charset="UTF-8"> as the first element
  • Include viewport meta tag for responsive design
  • Add descriptive title and meta description for SEO
  • Use social media meta tags for better sharing
  • Optimize resource loading with preload and preconnect
  • Implement security headers with Content Security Policy
  • Use appropriate favicon sizes for different devices

✗ Don't:

  • Forget character encoding declaration
  • Use deprecated meta tags
  • Stuff keywords in meta description
  • Ignore mobile viewport settings
  • Load unnecessary resources in the head
  • Skip security meta tags
  • Use overly long titles or descriptions

🧪 Quick Quiz

Which tag is used to define the character encoding?

← HTML Layout
HTML Page Title →