3. Meta Tags

Meta tags in HTML are used to provide extra data or information about a web page. Metadata is data about data. These tags don’t display content on the web page but serve various other purposes related to search engines, social sharing, character encoding, and more.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- This is where the meta tags start -->
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="style.css" rel="stylesheet"/>
    <title>Document</title>
    <!-- This is where the meta tags end -->
</head>
<body>
</body>
</html>

Here are some common uses of meta tags:

Character Encoding: <meta charset="UTF-8"> is used to specify the character encoding for the HTML document. UTF-8 is the most commonly used encoding for web pages.

Viewport Configuration: <meta name="viewport" content="width=device-width, initial-scale=1.0”> is often used for responsive web design. It configures the viewport to match the device’s screen width and initial zoom level.

Page Title: <meta name="title" content="Page Title"> provides the title of the web page, which is displayed in the browser’s title bar or tab.

Page Description: <meta name="description" content=”A brief description of the page”> is used to provide a short description of the page’s content. Search engines often display this description in their search results.

Keywords: <meta name="keywords" content="keyword1, keyword2, keyword3"> used to specify a list of keywords or phrases that are relevant to the content of the page. This is less commonly used today as search engines have evolved.

Author: <meta name="author" content="Author Name"> identifies the author of the page’s content.

Robots Meta Tag: <meta name="robots" content="index, follow"> or similar values are used to instruct search engine crawlers on how to index and follow links on the page. This can control whether a page is indexed or not. This will dictate if any pages appear in a search engine.

Open Graph Tags: These <meta> tags, such as <meta property="og:title" content="Title">, are used to provide structured data for social media sharing. They control how the page’s content appears when shared on platforms like Facebook.

These meta tags help search engines understand the content and context of web pages, improve search engine optimization (SEO), and control how pages are presented when shared on social media. They are essential for ensuring that web pages are correctly interpreted and displayed by both browsers and search engines.