HTML Meta Tags
Learn how HTML Meta Tags provide important hidden information about webpages to browsers, search engines, mobile devices, and other applications.
Introduction
In the previous lesson, you learned about HTML Canvas and how JavaScript can draw dynamic pixel-based graphics inside the browser.
Throughout this HTML course, you have learned how to create the visible structure and content of webpages.
However, a webpage also contains important information that is not normally displayed directly to visitors.
Browsers, search engines, mobile devices, social platforms, and other software need information about how a page should be interpreted and presented.
This information can include the character encoding, mobile viewport configuration, page description, author information, indexing instructions, and other document metadata.
HTML provides the <meta> element for supplying this information.
Meta tags are usually placed inside the <head> section and provide metadata about the document rather than visible page content.
Visible Page Content
- Headings.
- Paragraphs.
- Images.
- Links.
- Forms.
- Tables.
Page Metadata
- Character encoding.
- Viewport configuration.
- Page description.
- Author information.
- Crawler instructions.
- Document-related metadata.
Meta tags provide information about the HTML document. Most of this information is not displayed directly as visible webpage content.
What are Meta Tags?
Meta tags are HTML elements that provide metadata about a webpage.
Metadata means data that describes other data.
In an HTML document, metadata can describe the document encoding, viewport behavior, page summary, author, crawler instructions, and other information.
Meta tags are normally written using the <meta> element inside the <head> section.
<meta
name="description"
content="Learn HTML from beginner to advanced."
>| Part | Purpose |
|---|---|
| <meta> | Creates a metadata element |
| name | Identifies the type of metadata |
| content | Provides the metadata value |
Encoding Information
Tells the browser how document characters are encoded.
Viewport Information
Controls how the page behaves on mobile screens.
Page Description
Provides a concise summary of the webpage.
Author Information
Can identify the author or creator of the document.
Crawler Instructions
Can provide instructions to compatible search engine crawlers.
Document Behavior
Certain metadata can influence browser or document behavior.
Meta tags provide machine-readable information about an HTML document.
Why Do We Need Meta Tags?
A browser needs more than visible content to process a modern webpage correctly.
It may need to know which character encoding to use and how the page should be sized on a mobile device.
Search engines and other services may also use metadata to understand or present information about a page.
Without Important Metadata
- Character interpretation can be less reliable.
- Mobile pages may use an unsuitable default viewport.
- Search systems have less explicit page information.
- Page summaries may be generated automatically.
- Document information may be incomplete.
With Appropriate Metadata
- Character encoding is declared clearly.
- Mobile viewport behavior is configured.
- A page description can be provided.
- Document authorship can be identified.
- Compatible software receives useful page information.
Character Support
Declare a modern character encoding such as UTF-8.
Responsive Pages
Configure the viewport for mobile devices.
Search Presentation
Provide useful page descriptions and crawler metadata.
Browser Configuration
Give the browser important document information.
Document Description
Describe the purpose or subject of a page.
Machine Readability
Provide structured information for software systems.
Real-World Analogy
Imagine a book stored in a library.
Readers see the title, chapters, images, and written content.
The library also stores information about the book, such as its author, language, subject, publisher, and identification details.
This additional information helps systems organize, identify, and understand the book.
Meta tags perform a similar role for webpages.
| Library Book | Webpage |
|---|---|
| Book Content | Visible HTML content |
| Language Information | Character encoding metadata |
| Book Summary | Description metadata |
| Author Record | Author metadata |
| Catalog Information | Document metadata |
| Library System | Browser or other software |
Library Book Webpage
──────────── ───────
Visible Pages Visible HTML
Language Record Character Encoding
Book Summary Meta Description
Author Record Author Metadata
Catalog Information Document Metadata
Library System Browser / Search SystemMetadata does not replace the webpage content. It describes important characteristics of the document.
Where are Meta Tags Placed?
Document metadata is normally placed inside the <head> section of the HTML document.
The <head> contains information and resources associated with the document rather than the primary visible page content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
name="description"
content="Learn HTML from beginner to advanced."
>
<title>HTML Course</title>
</head>
<body>
<h1>Welcome to HTML</h1>
</body>
</html>The <meta> element is a void element.
A void element does not contain child content and does not use a separate closing tag.
<meta attribute="value">Incorrect Placement
- Placing document metadata inside visible page content.
- Writing meta tags randomly throughout the body.
- Treating <meta> like a normal content container.
Correct Placement
- Place document metadata inside <head>.
- Declare important metadata clearly.
- Keep visible page content inside <body>.
The metadata covered in this lesson belongs in the document <head>, not among normal visible page content.
Common Meta Tags
Different meta tags provide different kinds of information.
charset
Declares the character encoding of the document.
viewport
Configures viewport behavior on mobile devices.
description
Provides a concise summary of the page.
keywords
Historically provided page keywords.
author
Provides author information.
refresh
Can request automatic refresh or delayed navigation.
| Metadata | Typical Purpose |
|---|---|
| charset | Character encoding |
| viewport | Mobile viewport configuration |
| description | Page summary |
| keywords | Historical keyword metadata |
| author | Document author |
| refresh | Timed refresh or navigation |
Use metadata according to the actual requirements of the document. Some metadata is essential, while other metadata is optional or outdated for modern use cases.
1. Character Encoding
The charset declaration specifies the character encoding used by the HTML document.
UTF-8 is the standard choice for modern webpages because it supports a very large range of characters and writing systems.
<meta charset="UTF-8">Latin Characters
Supports common English and European characters.
🇮🇳 Indian Scripts
Supports scripts such as Devanagari and Tamil.
Asian Scripts
Supports Chinese, Japanese, Korean, and many others.
International Text
Supports multilingual webpages.
Symbols
Supports many currency and technical symbols.
Emoji
Supports modern Unicode emoji characters.
English Hello
Hindi नमस्ते
Tamil வணக்கம்
Japanese こんにちは
Korean 안녕하세요
Arabic مرحباً
Currency € ₹ ¥
Emoji 🎉 🌍 💻Encoding Not Declared Clearly
- Character interpretation can be less predictable.
- Special characters may be displayed incorrectly in some situations.
- The document depends more heavily on detection or external configuration.
UTF-8 Declared
- Encoding is communicated explicitly.
- International text is widely supported.
- Modern Unicode characters can be represented.
Place the UTF-8 charset declaration near the beginning of the <head> so the browser can determine the document encoding early.
2. Viewport Meta Tag
The viewport meta tag controls how a webpage is sized and scaled inside a mobile browser viewport.
It is a fundamental part of responsive web design.
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>| Value | Purpose |
|---|---|
| width=device-width | Sets the layout viewport width to the device width |
| initial-scale=1.0 | Sets the initial zoom scale |
Without Viewport Configuration
- Mobile browsers may use a wider virtual layout viewport.
- Responsive layouts may appear unexpectedly zoomed out.
- Text and controls can appear too small.
With Viewport Configuration
- Layout width follows the device width.
- Responsive CSS behaves as expected.
- Mobile layouts can use available screen space.
A responsive CSS layout normally depends on an appropriate viewport configuration to behave correctly on mobile devices.
3. Description Meta Tag
The description meta tag provides a concise summary of the webpage.
<meta
name="description"
content="Learn HTML from beginner to advanced."
>Search engines may use the description when generating a search result snippet, although they can choose different text when another part of the page better matches a search query.
Weak Description
- Welcome to our website.
- Best page online.
- Click here to learn more.
- Same description on every page.
Useful Description
- Describes the actual page.
- Uses clear natural language.
- Matches the page content.
- Is unique when practical.
Search engines can generate their own result snippets depending on the user query and page content.
4. Keywords Meta Tag
The keywords meta tag was historically used to list topics associated with a webpage.
<meta
name="keywords"
content="HTML, CSS, JavaScript, Web Development"
>In modern public web search, this tag is generally not an important ranking tool for major search engines.
Some private, internal, or specialized systems may still choose to process keyword metadata.
Historical Use
- List important page topics.
- Provide keyword information.
- Help early search systems classify pages.
Modern Practice
- Focus on useful page content.
- Write accurate titles and descriptions.
- Use semantic structure.
- Avoid keyword stuffing.
Modern search optimization should focus on useful content, page quality, technical accessibility, clear titles, accurate descriptions, and other current practices.
5. Author Meta Tag
The author meta tag can identify the author or creator associated with a webpage.
<meta
name="author"
content="PrograMinds"
>| Part | Meaning |
|---|---|
| name="author" | Identifies the metadata as author information |
| content="PrograMinds" | Provides the author value |
The author value can contain an individual name, organization name, or another appropriate creator identity.
Use author metadata when it is useful for the document or publishing workflow.
6. Refresh Meta Tag
The refresh mechanism can request that the browser reload the current page or navigate to another URL after a specified delay.
<meta
http-equiv="refresh"
content="5"
>This example requests a page refresh after five seconds.
<meta
http-equiv="refresh"
content="3; url=https://example.com"
>This example requests navigation to another URL after three seconds.
Refresh
- Wait for the specified time.
- Reload the current document.
- Can interrupt users if overused.
Delayed Navigation
- Wait for the specified time.
- Navigate to another address.
- Can create accessibility and usability concerns.
Unexpected refreshes and delayed redirects can disrupt users. Prefer appropriate server-side redirects or explicit application behavior when they better match the requirement.
Complete Meta Tag Example
A typical HTML document can combine several important metadata declarations inside the <head>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
name="description"
content="Learn HTML from beginner to advanced."
>
<meta
name="author"
content="PrograMinds"
>
<title>
HTML Course
</title>
</head>
<body>
<h1>
Learn HTML
</h1>
</body>
</html>| Element | Purpose |
|---|---|
| <!DOCTYPE html> | Declares the HTML document type |
| <meta charset> | Declares character encoding |
| Viewport Metadata | Configures mobile viewport |
| Description Metadata | Provides a page summary |
| Author Metadata | Identifies the author |
| <title> | Defines the document title |
A clear and organized <head> makes document metadata easier to maintain.
Meta Tags and SEO
Search engine optimization involves helping search engines discover, understand, and present useful webpages.
Metadata is one part of this larger process.
A clear description can help communicate what a page contains, while crawler-related metadata can provide instructions to compatible search systems.
However, adding many meta tags does not automatically make a page rank highly.
Metadata Myth
- More keywords guarantee rankings.
- Descriptions directly guarantee high positions.
- Meta tags can replace useful content.
- Every possible tag should be added.
Better Understanding
- Metadata supports page understanding.
- Descriptions can influence result presentation.
- Useful content remains essential.
- Only relevant metadata should be used.
Clear Description
Summarize the actual page content accurately.
Useful Title
Give each important page a clear document title.
Quality Content
Provide useful information that satisfies visitor needs.
Semantic Structure
Organize content using appropriate HTML elements.
Mobile Experience
Ensure the page works well across devices.
Technical Quality
Build pages that are accessible, usable, and maintainable.
Metadata is useful, but search visibility depends on many factors beyond meta tags.
Browser Rendering Flow
The browser encounters document metadata while processing the HTML document.
Request Webpage
│
▼
Receive HTML
│
▼
Begin Parsing
│
▼
Read <head>
│
▼
Process Metadata
│
├──── Character Encoding
│
├──── Viewport Configuration
│
├──── Document Information
│
└──── Other Metadata
│
▼
Process Page
│
▼
Display WebpageMetadata Processing
- Provides document information.
- Can configure browser behavior.
- Usually does not create visible content.
Body Rendering
- Creates visible page content.
- Displays text and media.
- Builds the user-facing interface.
The <head> primarily contains document information and resources, while the <body> contains the page content presented to users.
Real-World Applications
Metadata is used across almost every category of modern website.
Company Websites
Provide page descriptions, viewport configuration, and document information.
Blogs
Describe articles and provide author-related metadata.
E-Commerce
Support product page descriptions and responsive mobile layouts.
Educational Platforms
Describe lessons, tutorials, and course pages.
News Websites
Provide metadata associated with articles and document presentation.
Web Applications
Configure mobile viewport behavior and application-related document information.
Multilingual Sites
Use Unicode encoding to support international text.
Search-Focused Pages
Provide accurate descriptions and crawler-related metadata.
Advantages of Meta Tags
Appropriate metadata improves how browsers and other software understand and process webpages.
Encoding Declaration
Clearly communicates the document character encoding.
International Text
UTF-8 supports a wide range of languages and symbols.
Mobile Configuration
Viewport metadata supports responsive layouts.
Page Description
Provides a concise machine-readable page summary.
Author Information
Can identify the document creator.
Machine Communication
Provides useful information to compatible software.
Search Presentation Support
Descriptions can contribute to how pages are represented in search contexts.
Document Configuration
Certain metadata can influence browser processing behavior.
Browser Benefits
- Known character encoding.
- Configured viewport.
- Clear document information.
- More predictable processing.
Publishing Benefits
- Page summaries.
- Author information.
- Machine-readable metadata.
- Better document organization.
Metadata is most useful when it accurately represents the real document and its requirements.
Common Beginner Mistakes
Document metadata should be placed in the appropriate location inside the <head>.
The document should clearly declare its intended character encoding.
Responsive mobile layouts may not behave as expected without appropriate viewport metadata.
A description such as "Welcome to our website" provides little useful information.
Different pages usually benefit from descriptions that reflect their actual content.
Metadata should accurately represent the webpage.
Repeating large numbers of keywords does not create useful metadata.
Modern SEO requires much more than the historical keywords meta tag.
Only add metadata that serves a real purpose.
Unexpected page refreshes can interrupt reading and interaction.
Unexpected navigation can create usability and accessibility problems.
The <title> element is document metadata, but it is a separate HTML element rather than a <meta> element.
Search engines may choose different text depending on the query and page content.
Useful metadata cannot compensate for poor or irrelevant page content.
<!-- ❌ Incorrect -->
<body>
<meta charset="UTF-8">
<h1>
Welcome
</h1>
</body>
<!-- ✅ Correct -->
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>
Welcome
</h1>
</body>Poor Metadata
- Incorrect placement.
- Generic descriptions.
- Keyword stuffing.
- Misleading information.
- Unnecessary automatic refreshes.
Better Metadata
- Correct placement.
- Accurate descriptions.
- Relevant information.
- Appropriate viewport configuration.
- Only necessary metadata.
Best Practices
- Place document metadata inside the <head> section.
- Declare the document character encoding clearly.
- Use UTF-8 for modern general-purpose webpages.
- Place the charset declaration early in the <head>.
- Use the standard viewport configuration for responsive webpages.
- Understand the purpose of width=device-width.
- Understand the purpose of initial-scale=1.0.
- Do not disable user zoom unnecessarily.
- Write a clear document title for every important page.
- Remember that <title> is not a <meta> element.
- Write descriptions that accurately summarize page content.
- Use natural language in meta descriptions.
- Avoid generic descriptions such as "Welcome to our website".
- Create page-specific descriptions when practical.
- Do not copy the same description across unrelated pages.
- Do not write misleading metadata.
- Do not stuff descriptions with repeated keywords.
- Do not depend on the keywords meta tag for modern public search rankings.
- Focus on useful content rather than keyword repetition.
- Use author metadata only when it serves a real purpose.
- Use crawler-related metadata carefully.
- Understand each crawler directive before using it.
- Do not accidentally prevent important pages from being indexed.
- Do not assume metadata guarantees search rankings.
- Do not assume descriptions always appear exactly as written in search results.
- Remember that search systems may generate different snippets.
- Keep metadata consistent with the visible page content.
- Update metadata when page content changes significantly.
- Remove obsolete metadata that no longer serves a purpose.
- Avoid adding every meta tag found in random templates.
- Use only metadata that is relevant to the document.
- Keep the <head> organized and readable.
- Format long meta elements clearly.
- Use consistent indentation.
- Keep metadata generation maintainable in large projects.
- Generate dynamic page metadata from reliable page data.
- Ensure dynamically generated descriptions match the current page.
- Avoid duplicate titles across important pages when practical.
- Avoid duplicate descriptions across unrelated pages when practical.
- Validate generated metadata values.
- Escape dynamic metadata content correctly.
- Do not place secret information in meta tags.
- Remember that webpage source can be inspected.
- Never store passwords in metadata.
- Never store API keys in metadata.
- Never store private authentication tokens in metadata.
- Do not expose confidential business information through metadata.
- Use the language attribute on the <html> element appropriately.
- Remember that language declaration and character encoding solve different problems.
- Use semantic HTML for visible page structure.
- Do not rely on metadata as a substitute for semantic content.
- Use headings that describe visible page sections.
- Use meaningful link text.
- Provide image alternative text where appropriate.
- Build accessible forms.
- Ensure responsive layouts work with the viewport configuration.
- Test pages on real mobile screen sizes.
- Test zoom behavior.
- Avoid viewport settings that unnecessarily restrict accessibility.
- Test multilingual characters when the page supports multiple languages.
- Save source files using the intended character encoding.
- Ensure the server and document encoding configuration are compatible.
- Use HTTPS for production websites.
- Use appropriate server-side redirects for permanent URL changes.
- Use appropriate server-side redirects for temporary URL changes.
- Avoid meta refresh redirects when a better redirect mechanism is available.
- If timed refresh is required, consider user experience carefully.
- Avoid unexpectedly refreshing forms or interactive pages.
- Avoid refreshing while users are reading important content.
- Provide clear information before delayed navigation when necessary.
- Consider accessibility when using timed behavior.
- Keep page metadata accurate after URL changes.
- Keep metadata accurate after content migrations.
- Update descriptions after major page redesigns.
- Review metadata during content audits.
- Use automated checks for large websites when practical.
- Check for missing titles.
- Check for missing descriptions where descriptions are required.
- Check for accidental duplicate metadata.
- Check for malformed viewport values.
- Check for invalid character encoding declarations.
- Inspect the final rendered HTML in framework-based applications.
- Remember that client-side and server-side rendering can affect metadata delivery.
- Ensure important metadata is available in the final document output.
- Use framework metadata APIs correctly when working with frameworks.
- Do not manually duplicate metadata already generated by the framework.
- Understand inherited metadata behavior in nested layouts.
- Test route-specific metadata.
- Use absolute URLs where a metadata standard specifically requires them.
- Keep canonical URL configuration accurate when using canonical metadata.
- Avoid conflicting metadata directives.
- Avoid multiple contradictory viewport declarations.
- Avoid multiple conflicting description tags.
- Avoid multiple conflicting crawler directives.
- Use social sharing metadata when the project requires rich social previews.
- Remember that social metadata uses its own standards and conventions.
- Test social previews using appropriate platform tools when necessary.
- Use accurate preview images.
- Optimize preview images appropriately.
- Do not misrepresent the destination page in social metadata.
- Monitor metadata after deploying large site changes.
- Test important pages after production deployment.
- Keep metadata simple, accurate, relevant, and maintainable.
- Always prioritize real users and useful content over metadata tricks.
<head>
<meta charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<meta
name="description"
content="A clear and accurate summary of this page."
>
<title>
Clear Page Title
</title>
</head>A small set of correct and relevant metadata is better than a large collection of unnecessary, duplicated, or misleading tags.
Frequently Asked Questions
What are meta tags?
Meta tags are HTML elements that provide metadata about a webpage.
What does metadata mean?
Metadata means information that describes other data or content.
Which HTML element creates meta tags?
The <meta> element.
Where are meta tags placed?
They are normally placed inside the <head> section.
Are meta tags visible on the webpage?
Most meta tags do not create visible page content.
Does the <meta> element need a closing tag?
No. The <meta> element is a void element.
What is character encoding?
Character encoding defines how characters are represented and interpreted as data.
Which character encoding should modern webpages normally use?
UTF-8.
How do I declare UTF-8?
Use <meta charset="UTF-8">.
Why is UTF-8 important?
It supports a very large range of international characters, symbols, and writing systems.
Where should the charset declaration appear?
It should appear early in the document <head>.
What is the viewport meta tag?
It configures how the page viewport behaves, especially on mobile devices.
What is the standard responsive viewport declaration?
Use name="viewport" with content="width=device-width, initial-scale=1.0".
What does width=device-width mean?
It tells the browser to use the device width as the layout viewport width.
What does initial-scale=1.0 mean?
It sets the initial zoom scale when the page loads.
Why is viewport metadata important?
It helps responsive layouts behave correctly on mobile devices.
What is a meta description?
It is metadata that provides a concise summary of a webpage.
Can search engines display the meta description?
Yes, they may use it when creating a search result snippet.
Will a search engine always display my exact meta description?
No. Search systems can generate a different snippet depending on the query and page content.
Does a meta description guarantee higher rankings?
No. Search ranking depends on many factors.
Should every page use the same description?
Important pages should normally have descriptions that accurately represent their individual content.
What is the keywords meta tag?
It is a historical metadata format for listing page keywords.
Is the keywords meta tag important for modern SEO?
It is generally not an important ranking mechanism for major modern public search engines.
Should I stuff keywords into metadata?
No. Metadata should be accurate, natural, and relevant.
What is the author meta tag?
It provides author or creator information associated with the document.
Is author metadata required?
No. It is optional.
What does http-equiv="refresh" do?
It can request a timed page refresh or delayed navigation.
Should automatic refresh be used frequently?
No. Unexpected refreshes can create usability and accessibility problems.
Should meta refresh be used for redirects?
Appropriate server-side redirect mechanisms are often preferable when available.
Is the <title> element a meta tag?
No. It is a separate HTML element, although it is also part of document metadata.
Can meta tags improve mobile responsiveness?
Viewport metadata supports responsive behavior, but responsive CSS is also required.
Can metadata replace good webpage content?
No. Metadata describes or configures a page but does not replace useful content.
Can I put passwords or API keys in meta tags?
No. Metadata in webpage source should not contain secrets.
Can meta tags help search engines understand a page?
Yes. Appropriate metadata can provide useful information, but search systems also analyze the actual page content and many other signals.
Do all webpages need the keywords meta tag?
No.
Do all responsive webpages need viewport metadata?
Modern responsive webpages normally use appropriate viewport configuration.
What should I learn after completing HTML?
CSS is the natural next step because it controls the visual presentation and layout of HTML webpages.
Key Takeaways
- Meta tags provide information about an HTML document.
- Metadata means information that describes other data.
- The <meta> element is used for many kinds of document metadata.
- Meta tags are normally placed inside the <head> section.
- The <meta> element is a void element.
- Meta tags do not normally create visible webpage content.
- The charset declaration specifies the document character encoding.
- UTF-8 is the standard choice for modern general-purpose webpages.
- UTF-8 supports a large range of languages and symbols.
- The charset declaration should appear early in the <head>.
- Viewport metadata configures mobile viewport behavior.
- width=device-width connects the layout viewport width to the device width.
- initial-scale=1.0 defines the initial scale.
- Responsive layouts normally require appropriate viewport configuration.
- The description meta tag provides a page summary.
- Search engines may use descriptions when creating result snippets.
- Search engines do not always display the exact provided description.
- Descriptions should accurately represent page content.
- Descriptions should use clear natural language.
- Different pages should use relevant page-specific metadata.
- The keywords meta tag has limited importance for major modern search ranking systems.
- Keyword stuffing should be avoided.
- The author meta tag can identify a document creator.
- Author metadata is optional.
- The refresh mechanism can request timed refresh or delayed navigation.
- Automatic refreshes should be used carefully.
- Server-side redirects are often preferable for URL redirection.
- The <title> element is separate from the <meta> element.
- Metadata can help browsers configure document behavior.
- Metadata can help software understand page information.
- Metadata does not replace useful visible content.
- Metadata does not guarantee high search rankings.
- The <head> should remain organized and maintainable.
- Metadata should remain accurate when page content changes.
- Duplicate or contradictory metadata should be avoided.
- Secrets must never be placed in webpage metadata.
- Responsive behavior requires both viewport configuration and responsive CSS.
- Semantic HTML remains important even when metadata is complete.
- Only relevant metadata should be added.
- Accurate metadata is more valuable than large quantities of unnecessary tags.
- Meta tags complete the hidden information layer of a well-structured HTML document.
Summary
Meta tags provide important information about an HTML document to browsers, search engines, mobile devices, and other software.
Unlike headings, paragraphs, images, and forms, most metadata is not displayed directly as visible webpage content.
The <meta> element is normally placed inside the document <head> and is written as a void element without a separate closing tag.
The charset declaration tells the browser which character encoding the document uses.
UTF-8 is the standard choice for modern webpages because it supports a very large range of international characters, symbols, and writing systems.
The viewport meta tag configures how a page is sized and scaled on mobile devices.
The common width=device-width and initial-scale=1.0 configuration allows responsive layouts to use the device width appropriately.
The description meta tag provides a concise summary of a webpage.
Search engines may use this description when generating result snippets, although they can choose other text when appropriate.
The historical keywords meta tag should not be treated as an important modern search ranking technique.
The author meta tag can provide information about the creator of a document.
The refresh mechanism can request automatic page refreshes or delayed navigation, but timed behavior should be used carefully because it can disrupt users.
Good metadata should be accurate, relevant, concise, and consistent with the actual page content.
Metadata supports browsers and other software, but it does not replace semantic HTML, useful content, responsive design, accessibility, or overall technical quality.
With Meta Tags complete, you have now reached the end of the HTML course.
You have progressed from understanding how websites work and creating your first HTML document to working with text, links, images, lists, tables, forms, semantic elements, multimedia, iframes, SVG, Canvas, and document metadata.
The next major step is CSS, where you will learn how to control colors, fonts, spacing, layouts, responsive design, animations, and the complete visual appearance of your webpages.