All About meta Tag in HTML

All About meta Tag in HTML

4 mins readComment
Esha
Esha Gupta
Associate Senior Executive
Updated on Apr 8, 2024 13:22 IST

Have you ever wondered how web pages communicate important information to browsers and search engines? HTML <meta> tags play a pivotal role in this process. They reside in the head section of a webpage, providing essential data about the page's content, character encoding, author, viewport settings for mobile devices, and SEO optimization. Let's understand more!

In HTML (Hypertext Markup Language), tags are the basic building blocks to create web pages. They are used to define and structure the content of a webpage. In this blog, we will dive deeper into meta tag in HTML.

Span Tag in HTML
Span Tag in HTML
Have you ever wondered how web developers style or manipulate specific parts of a webpage's text without affecting the whole document? This is where the tag in HTML comes into...read more

All About br Tag in HTML
All About br Tag in HTML
Have you ever wondered how to create a simple line break in your HTML content? The tag is your solution. It's a self-closing element used to insert line breaks,...read more

Learning div Tag in HTML
Learning div Tag in HTML
Have you ever wondered what keeps web pages organized and styled consistently? The HTML tag plays a crucial role in this. It's a versatile, block-level element used primarily as...read more

Learning ul Tag in HTML
Learning ul Tag in HTML
Have you ever wondered how to organize items on a webpage without any specific order neatly? The HTML tag is the solution, designed to create unordered lists with bullet...read more

Table of Content

 

What is a meta Tag in HTML?

A meta tag in HTML is a special type of element that provides metadata about the HTML document. Metadata is information about the data contained in the document. These tags are placed inside the document's <head> section and don't directly display content on the web page itself. However, they play a crucial role in defining the document's properties and behaviour.

Let's first check out a video on the same.

Source : Bro Code

Basic Syntax of meta Tag in HTML

<meta name="name_attribute" content="content_attribute">

1. name: This attribute specifies the type of metadata. (e.g. description, keywords, author, etc.)
2. content: This attribute contains the value of the metadata.

Usage of HTML meta Tag with Examples

Let's see some examples showing the uses of meta tag.

Example 1: Specifying Character Set

Problem Statement: Ensure that the web page correctly displays a wide range of characters, including special and non-English characters.


 
<!DOCTYPE html>
<html>
<head>
<title>Character Set Example</title>
<!-- Specifying UTF-8 character set for universal character encoding -->
<meta charset="UTF-8">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Copy code

Output

The browser will correctly render characters from various languages and special symbols due to the UTF-8 character encoding.

Example 2: Defining Viewport for Responsive Design

Problem Statement: Make the web page render well on mobile devices with varying screen sizes.


   
<!DOCTYPE html>
<html>
<head>
<title>Responsive Design Example</title>
<!-- Setting the viewport to control layout on mobile browsers -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Copy code

Output

The webpage will be properly scaled and displayed on different mobile devices.

Example 3: Page Description for SEO

Problem Statement: Improve how the web page is described in search engine results.


 
<!DOCTYPE html>
<html>
<head>
<title>SEO Example</title>
<!-- Meta description for improving SEO and providing a summary of the page content -->
<meta name="description" content="This is an example page to demonstrate the use of meta tags for SEO.">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Copy code

Output

Search engines will use the provided description in search results, giving users a brief summary of the page's content.

Example 4: Refreshing the Page Automatically

Problem Statement: Automatically refresh the web page every 30 seconds.


 
<!DOCTYPE html>
<html>
<head>
<title>Auto Refresh Example</title>
<!-- Meta tag to refresh the page every 30 seconds -->
<meta http-equiv="refresh" content="30">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Copy code

Output

The web page will automatically refresh every 30 seconds.

Example 5: Social Media Preview Information

Problem Statement: Customize how the web page is previewed when shared on social media.


 
<!DOCTYPE html>
<html>
<head>
<title>Social Media Preview Example</title>
<!-- Open Graph meta tags to define how the content appears when shared on social media -->
<meta property="og:title" content="Social Media Preview Example">
<meta property="og:description" content="This page demonstrates how to use Open Graph tags for social media previews.">
<meta property="og:image" content="path_to_image.jpg">
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Copy code

Output

When the page is shared on social media platforms like Facebook or LinkedIn, the specified title, description, and image will be used to create the content preview.

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

How to Create HTML Forms – Tutorial with Examples
How to Create HTML Forms – Tutorial with Examples
HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

HTML Attributes Explained with Examples
HTML Attributes Explained with Examples
HTML attributes provide additional information about HTML elements. They are used to modify the behavior or appearance of an element. Attributes are specified within the opening tag of an element...read more

Creating HTML Links – Tutorial With Examples

HTML Lists: Ordered and Unordered Lists Explained with Examples
HTML Lists: Ordered and Unordered Lists Explained with Examples
This tutorial explains how to create different types of lists: unordered, ordered, and description lists in HTML. In this blog, you will learn what are HTML lists and understand how...read more

Key Takeaways

  • HTML<meta> tags offer a wide range of functionalities, from setting the character encoding to enhancing SEO and defining viewport settings for responsive design.

  • They are crucial for search engine optimization, providing search engines with metadata like page descriptions and keywords.

  • The <meta> viewport tag is essential for making websites mobile-friendly, ensuring proper scaling and rendering on various devices.

  •  <meta> tags, particularly Open Graph tags, play a key role in how content is displayed when shared on social media platforms.

FAQs

What is the meta tag used for in HTML?

The meta tag in HTML is used to provide metadata about the HTML document. This metadata is not displayed on the webpage but is machine parsable. Common uses include specifying the page description, keywords, author of the document, last modified, and other metadata.

Where should the meta tag be placed in an HTML document?

The meta tag should be placed within the head section of the HTML document. This is because the metadata it contains is typically relevant to the entire page, and placing it in the head ensures it's processed before the page content.

Can meta tags help with search engine optimization (SEO)?

Yes, some meta tags are important for SEO. For example, the description meta tag can provide search engines with a summary of the page's content, and the keywords meta tag, although less relevant today, was historically used to indicate the main keywords of the page.

Are there any required attributes for the meta tag?

The most commonly used attributes for the meta tag are name and content. The name attribute specifies the type of information you're declaring (like description, keywords), and the content attribute provides the actual information. For character set declarations, charset is used.

How does the viewport meta tag enhance mobile web browsing?

The viewport meta tag is essential for responsive web design. It controls the viewport's size and scale on mobile devices. For example, setting the viewport width to device-width and the initial scale to 1 ensures that the page is displayed at the appropriate size and scale on mobile devices.

About the Author
author-image
Esha Gupta
Associate Senior Executive

Hello, world! I'm Esha Gupta, your go-to Technical Content Developer focusing on Java, Data Structures and Algorithms, and Front End Development. Alongside these specialities, I have a zest for immersing myself in v... Read Full Bio