HTML Meta Tags

Meta tags provide metadata – information about the web page – that isn’t visible on the page itself but is crucial for browsers and search engines. They are placed inside the <head> tag of an HTML document.

Basic Example

				
					<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"> <!-- Character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!-- IE compatibility -->
  <meta name="description" content="This is a description of the web page"> <!-- Page description -->
  <meta name="keywords" content="HTML, CSS, JavaScript"> <!-- SEO keywords -->
  <meta name="author" content="Your Name"> <!-- Author -->
  <title>Document</title>
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

Explanation of Meta Tags

Character Encoding: <meta charset= “UTF-8”> specifies the character set for the page. UTF-8 is widely used and supports many languages.
Viewport for Responsive Design: <meta name="viewport" content="width=device-width, initial-scale=1.0"> ensures the webpage looks good on all devices by scaling it based on screen width.
Internet Explorer Compatibility: <meta http-equiv="X-UA-Compatible" content="ie=edge"> instructs Internet Explorer to use the latest rendering engine.
Page Description: <meta name="description" content="This is a description of the web page"> provides a summary for search engines. It may appear in search results.
Keywords: <meta name="keywords" content="HTML, CSS, JavaScript"> historically used by search engines for indexing, but now largely ignored by modern SEO.
Author: <meta name="author" content="Your Name"> Identifies the webpage’s author.

How to Add a Favicon in HTML

A favicon is tiny icon shown next to your website title in browser tabs. It helps users recognize your site quickly.

Steps to Add a Favicon

Step 1: Create/Choose a Favicon

Make a square icon. Usually, 16 x 16 or 32 x 32 pixels. Use .ico format.

Step 2: Upload the Favicon

Place the file (e.g., facicon.ico) in the root directory (where your index.html is).

Step 3: Link it in HTML

Put this inside the <head> tag.

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

Step 4: Test It

Open your site in different browsers to confirm the favicon appears.

Conclusion

Meta tags are a powerful way to inform browsers and search engines about your webpage. They don’t affect what users see on the screen, but they are essential for performance, accessibility, and SEO. Don’t forget to add a favicon for a professional and branded appearance!