HTML Meta Tags – Solved Practice Questions

By /

Introduction

HTML meta tags provide information about a webpage to browsers and search engines. They help define the page’s character encoding, description, keywords, author, and viewport settings. Meta tags are placed inside the <head> section and improve SEO, responsiveness, and browser compatibility. In this chapter, you’ll practice the most commonly used HTML meta tags with beginner-friendly solved examples.

Question 1

Problem Statement

Create a webpage with the UTF-8 character encoding meta tag.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">

    <title>Character Encoding</title>

</head>
<body>

    <h1>HTML Meta Tags</h1>

</body>
</html>

Output

HTML Meta Tags

Step-by-Step Explanation

  • <meta charset="UTF-8"> defines the character encoding.
  • UTF-8 supports most languages and symbols.
  • It should be placed near the top of the <head> section.

Question 2

Problem Statement

Create a responsive webpage using the viewport meta tag.

HTML Code

<!DOCTYPE html>
<html>
<head>

    <meta charset="UTF-8">

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

    <title>Viewport Meta Tag</title>

</head>
<body>

    <h1>Responsive Webpage</h1>

</body>
</html>

Output

Responsive Webpage

Step-by-Step Explanation

  • The viewport tag makes webpages mobile-friendly.
  • width=device-width matches the screen width.
  • initial-scale=1.0 sets the initial zoom level.

Question 3

Problem Statement

Add a meta description to a webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Meta Description</title>

</head>
<body>

<h1>HTML Tutorial</h1>

</body>
</html>

Output

HTML Tutorial

Step-by-Step Explanation

  • The description meta tag summarizes the webpage.
  • Search engines may display it in search results.
  • A clear description can improve click-through rates.

Question 4

Problem Statement

Add meta keywords to a webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<meta
name="keywords"
content="HTML, HTML Tutorial, Web Development">

<title>Meta Keywords</title>

</head>
<body>

<h1>HTML Keywords</h1>

</body>
</html>

Output

HTML Keywords

Step-by-Step Explanation

  • The keywords meta tag lists important page topics.
  • Modern search engines place little or no ranking weight on it.
  • It may still be used by some tools and internal search systems.

Question 5

Problem Statement

Add the author meta tag to a webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

<meta
name="author"
content="John Smith">

<title>Author Meta Tag</title>

</head>
<body>

<h1>HTML Meta Tags</h1>

</body>
</html>

Output

HTML Meta Tags

Step-by-Step Explanation

  • The author meta tag identifies the content creator.
  • It is placed inside the <head> section.
  • It provides information about the webpage author.

Question 6

Problem Statement

Automatically refresh a webpage after 5 seconds using a meta tag.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Refresh Meta Tag</title>

</head>
<body>

<h1>Page Refresh Example</h1>

<p>This page refreshes every 5 seconds.</p>

</body>
</html>

Output

Page Refresh Example

This page refreshes every 5 seconds.

Step-by-Step Explanation

  • http-equiv="refresh" refreshes the webpage automatically.
  • content="5" refreshes the page after 5 seconds.
  • This feature should be used only when necessary because frequent refreshes can affect the user experience.

Question 7

Problem Statement

Add a robots meta tag to control search engine crawling.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<title>Robots Meta Tag</title>

</head>
<body>

<h1>Robots Example</h1>

</body>
</html>

Output

Robots Example

Step-by-Step Explanation

  • name="robots" provides instructions for search engines.
  • index allows the page to appear in search results.
  • follow allows search engines to follow links on the page.

Question 8

Problem Statement

Use multiple meta tags in a webpage.

HTML Code

<!DOCTYPE html>
<html>
<head>

<meta charset="UTF-8">

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

<meta
name="description"
content="HTML Meta Tag Practice">

<meta
name="author"
content="John Smith">

<title>Multiple Meta Tags</title>

</head>
<body>

<h1>Multiple Meta Tags Example</h1>

</body>
</html>

Output

Multiple Meta Tags Example

Step-by-Step Explanation

  • Multiple meta tags can be added inside the <head> section.
  • Each tag provides different information.
  • Browsers and search engines read these tags automatically.

Question 9

Problem Statement

Create a webpage with commonly used SEO meta tags.

HTML Code

<!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="keywords"
content="HTML, Meta Tags, SEO">

<meta
name="author"
content="John Smith">

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

<title>SEO Meta Tags</title>

</head>
<body>

<h1>SEO Meta Tags</h1>

</body>
</html>

Output

SEO Meta Tags

Step-by-Step Explanation

  • UTF-8 supports multiple languages.
  • The viewport tag improves mobile responsiveness.
  • The description summarizes the webpage.
  • The author tag identifies the content creator.
  • The robots tag controls search engine crawling.
  • These meta tags help improve webpage usability and SEO.

Question 10

Problem Statement

Create a complete HTML webpage using common meta tags.

HTML Code

<!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 beginner-friendly examples.">

<meta
name="author"
content="John Smith">

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

<title>HTML Meta Tags Example</title>

</head>
<body>

<h1>HTML Meta Tags</h1>

<p>Meta tags provide important information about a webpage.</p>

</body>
</html>

Output

HTML Meta Tags

Meta tags provide important information about a webpage.

Step-by-Step Explanation

  • Meta tags are placed inside the <head> section.
  • They provide information to browsers and search engines.
  • Common meta tags include charset, viewport, description, author, and robots.
  • Using these tags improves SEO, accessibility, and mobile compatibility.

Key Takeaways

  • Meta tags provide information about a webpage.
  • Most meta tags are placed inside the <head> section.
  • charset="UTF-8" supports multiple languages and symbols.
  • The viewport meta tag makes webpages mobile-friendly.
  • The description meta tag summarizes page content.
  • The author meta tag identifies the page creator.
  • The robots meta tag controls search engine crawling.
  • The refresh meta tag reloads the page after a specified time.
  • Well-written meta tags improve SEO and user experience.
  • Modern websites should always include essential meta tags.

Frequently Asked Questions (FAQs)

1. What are HTML meta tags?

HTML meta tags provide information about a webpage to browsers and search engines.

2. Where are meta tags placed?

They are placed inside the <head> section of an HTML document.

3. Which meta tag defines the character encoding?

<meta charset="UTF-8">

4. Which meta tag makes a webpage responsive?

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

5. What is the purpose of the description meta tag?

It provides a summary of the webpage and may appear in search engine results.

6. What does the robots meta tag do?

It tells search engines whether to index the page and follow its links.

7. Is the keywords meta tag still important for SEO?

Most major search engines no longer use it as a ranking factor, but some tools may still reference it.

8. What does the refresh meta tag do?

It automatically refreshes or redirects a webpage after a specified time.

9. Can a webpage contain multiple meta tags?

Yes. A webpage can include several meta tags inside the <head> section.

10. Why are meta tags important?

They improve SEO, browser compatibility, accessibility, and the overall user experience.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top