HTML Head & Meta Tags
The <head> Element
The <head> element is a container for metadata — information about the document that is not displayed on the page. It sits between <html> and <body>.
The <head> can contain: <title>, <meta>, <link>, <style>, <script>, and <base>.
Essential Head Tags
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Page title (shown in browser tab) -->
<title>My Website | Home</title>
<!-- SEO meta tags -->
<meta name="description" content="A short description of this page (150-160 chars).">
<meta name="keywords" content="html, tutorial, web development">
<meta name="author" content="John Doe">
<!-- Prevent caching -->
<meta http-equiv="Cache-Control" content="no-cache">
<!-- Link external CSS -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<!-- Open Graph (social media sharing) -->
<meta property="og:title" content="My Website">
<meta property="og:description" content="Page description for social sharing.">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com">
</head>
<body>
<!-- Page content here -->
</body>
</html>
Meta Tags Reference
| Tag | Purpose |
|---|---|
<meta charset="UTF-8"> | Sets character encoding — always include this first |
<meta name="viewport"> | Controls layout on mobile devices — essential for responsive design |
<meta name="description"> | Page summary shown in search engine results |
<meta name="robots"> | Controls search engine indexing (index, noindex, nofollow) |
<meta http-equiv="refresh"> | Auto-redirects after N seconds |
<link rel="canonical"> | Tells search engines the preferred URL for this page |
<link rel="stylesheet"> | Links an external CSS file |
<link rel="icon"> | Sets the browser tab favicon |
<base href="..."> | Sets the base URL for all relative links on the page |
Linking CSS and JavaScript
<head>
<!-- External CSS (in <head>) -->
<link rel="stylesheet" href="css/styles.css">
<!-- Inline CSS -->
<style>
body { font-family: Arial, sans-serif; }
h1 { color: #333; }
</style>
</head>
<body>
<h1>Hello</h1>
<!-- External JS (before </body> for performance) -->
<script src="js/app.js"></script>
<!-- Inline JS -->
<script>
console.log('Page loaded!');
</script>
</body>