learn2kode.in

Menu

HTML Tutorial

Menu

HTML – Meta Tags

Meta tags provide important information (metadata) about an HTML document.
They are placed inside the <head> section and are not displayed in the browser.

Search engines, browsers, and social media platforms use meta tags to understand your page.

1. Where Meta Tags Are Placed?

Copy Text 
<head>
  <meta>
</head>

All meta tags go inside the <head> tag, before the <body> begins.

2. Common Meta Tags

Meta Charset (Character Encoding)

Copy Text 
<meta charset="UTF-8">

Defines the character encoding of the webpage.

 UTF-8 supports all characters and is recommended.

Meta Description (SEO)

Copy Text 
<meta name="description" content="Learn HTML with simple examples.">

This appears in Google search results.

Meta Keywords (Not used by Google now)

Copy Text 
<meta name="keywords" content="HTML, tutorial, coding">

Most modern search engines ignore this tag.

Meta Author

Copy Text 
<meta name="author" content="Learn2Kode">

Specifies the page creator.

Meta Viewport (Responsive Design)

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

This makes your site mobile-friendly. Very important for modern websites.

Meta Refresh (Auto-Reload or Redirect)

Copy Text 
<meta http-equiv="refresh" content="5">

Reloads the page every 5 seconds.

Redirect example:

Copy Text 
<meta http-equiv="refresh" content="3; url=https://learn2kode.com">

Meta Robots (Search Engine Control)

Copy Text 
<meta name="robots" content="index, follow">

Options

  • noindex → Do not index this page
  • nofollow → Do not follow page links
  • none → Block both

3. Example: Full Meta Tags Setup

Copy Text 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Learn HTML Meta Tags with examples.">
  <meta name="author" content="Learn2Kode">
  <meta name="robots" content="index, follow">
  <title>HTML Meta Tags</title>
</head>
<body>
  <h2>Meta Tags Example</h2>
</body>
</html>

4. Meta Tags Table

Copy Text 
<table border="1" cellpadding="8" cellspacing="0">
  <thead>
    <tr>
      <th>Meta Tag</th>
      <th>Description</th>
      <th>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>charset</code></td>
      <td>Defines character encoding</td>
      <td><code><meta charset="UTF-8"></code></td>
    </tr>
    <tr>
      <td><code>description</code></td>
      <td>Short summary for search engines</td>
      <td><code><meta name="description" content="Learn HTML"></code></td>
    </tr>
    <tr>
      <td><code>keywords</code></td>
      <td>Keywords for search engines (outdated)</td>
      <td><code><meta name="keywords" content="HTML, coding"></code></td>
    </tr>
    <tr>
      <td><code>author</code></td>
      <td>Specifies page author</td>
      <td><code><meta name="author" content="Learn2Kode"></code></td>
    </tr>
    <tr>
      <td><code>viewport</code></td>
      <td>Makes webpage responsive</td>
      <td><code><meta name="viewport" content="width=device-width, initial-scale=1.0"></code></td>
    </tr>
    <tr>
      <td><code>robots</code></td>
      <td>Controls search engine indexing</td>
      <td><code><meta name="robots" content="index, follow"></code></td>
    </tr>
    <tr>
      <td><code>refresh</code></td>
      <td>Auto-reload or redirect page</td>
      <td><code><meta http-equiv="refresh" content="3"></code></td>
    </tr>
  </tbody>
</table>

Summary

Meta tags help with:

  • SEO
  • Page appearance on Google
  • Mobile responsiveness
  • Browser behavior
  • Page author details

They do not appear on the webpage but are crucial for modern websites.

HTML Classes