TutorialsHTMLHead Elements
Share:

Head Elements

advanced

Part of HTML Forms & Media

Theory

The <head> section is one of the most important yet often overlooked parts of an HTML document. While the <body> contains everything visible to users, the <head> contains critical metadata that affects how the page appears in search results, how it behaves on different devices, and how browsers interpret it.

The <title> Element

The <title> sets the page title displayed in the browser tab and is the first thing search engines display in results:

<title>Introduction to HTML | CodeWithMishu</title>

A good title should be descriptive (50–60 characters), include keywords, and be unique per page.

Meta Tags: <meta>

Meta tags provide structured metadata about the page. They use name and content attributes (or charset and http-equiv).

Character Encoding

<meta charset="UTF-8">

This declares the character encoding. UTF-8 supports virtually all characters from all languages. Always include this as the first meta tag.

Viewport (Responsive Design)

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

This is essential for responsive design on mobile devices. width=device-width sets the page width to the device screen width, and initial-scale=1.0 sets the initial zoom level.

Description

<meta name="description" content="Learn HTML from scratch with interactive tutorials and examples.">

Search engines often display this description in search results. Keep it between 150–160 characters.

Keywords (Less Important Now)

<meta name="keywords" content="HTML, web development, tutorials">

Most search engines no longer use the keywords meta tag for ranking due to historical keyword stuffing abuse.

Author

<meta name="author" content="CodeWithMishu">

HTTP-Equiv Meta Tags

These simulate HTTP headers:

<meta http-equiv="refresh" content="30">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

The refresh meta tag refreshes the page every 30 seconds. Use content="5; url=https://example.com" to redirect after 5 seconds.

Open Graph (OG) Meta Tags

OG tags control how your page appears when shared on social media (Facebook, LinkedIn, Twitter):

<meta property="og:title" content="Introduction to HTML">
<meta property="og:description" content="A beginner-friendly HTML tutorial.">
<meta property="og:image" content="https://example.com/html-preview.png">
<meta property="og:url" content="https://example.com/html-intro">
<meta property="og:type" content="article">

Twitter has its own variant using name="twitter:card", name="twitter:title", etc.

The <link> element connects external resources to the document:

Stylesheets

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

Favicon

<link rel="icon" type="image/x-icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">

Preconnect (Performance)

<link rel="preconnect" href="https://fonts.googleapis.com">

The <script> Element

The <script> element embeds or links to JavaScript:

<!-- External script -->
<script src="script.js"></script>
 
<!-- Inline script -->
<script>
  console.log("Hello, world!");
</script>

The defer attribute tells the browser to download the script in parallel and execute it after parsing:

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

The <style> Element

For internal CSS (not recommended for large projects):

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

The <base> Element

The <base> element sets the base URL for all relative URLs in the document:

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

Now <a href="about.html"> would link to https://example.com/about.html.

Practical Examples

Example: Complete Head Section
html
Example: SEO-Optimized Head with OG Tags
html

Exercises

Optimize a Head Section

easy

Given the following incomplete head section, add the missing elements: appropriate title, description meta tag, viewport meta tag, charset declaration, and a favicon link.

Starter Code:

<head>\n  <title></title>\n\n</head>

Expected Output:

A complete head section with charset (UTF-8), viewport (width=device-width, initial-scale=1.0), a descriptive title (50-60 chars), a meta description (150-160 chars), a favicon link, and a stylesheet link.

Add Social Media Meta Tags

medium

Take a blog post page and add comprehensive Open Graph and Twitter Card meta tags. Include og:title, og:description, og:image, og:url, og:type, twitter:card, and twitter:image.

Starter Code:

<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>My Blog Post</title>\n  <meta name="description" content="An interesting blog post about web development.">\n</head>\n<body>\n  <article>\n    <h1>My Blog Post</h1>\n    <p>This is the content of my blog post.</p>\n  </article>\n</body>\n</html>

Expected Output:

The same page with OG and Twitter Card meta tags added in the head section. Use plausible values for image URL, site name, etc.

Mini Quiz

Mini Quiz

Mini Project

Mini Project: Complete HTML Page with Optimized Head

Create a complete HTML page for a fictional article or product page with a fully optimized head section including SEO meta tags, Open Graph tags, Twitter Cards, favicons, and proper resource linking.

Requirements:

    Previous
    HTML Media
    Next
    Miscellaneous Tags