Meta tags are an essential part of HTML that provide information about a web page. They don’t affect the visual content but serve as valuable metadata, offering instructions to browsers and search engines. Understanding and using meta tags correctly can significantly impact a webpage’s visibility, indexing, and appearance in search engine results.
Basic Structure of Meta Tags:
Meta tags are placed within the <head> section of an HTML document using the <meta> tag. They don’t require a closing tag and are self-closing.
Here’s an example of a basic meta tag:
Table of Contents:
- What is HTML?
- Definition and Purpose
- The Evolution of HTML
- Setting Up Your Workspace
- Text Editors
- Browsers
- Basic Structure of an HTML Document
- The Declaration
- The , , and Elements
- HTML Document Structure
- Headings
- Paragraphs
- Lists (Ordered and Unordered)
- Links
- Text Formatting
- Bold and Italics
- Superscript and Subscript
- Line Breaks
- Images
- Adding Images
- Image Attributes
- Hyperlinks
- Creating Links
- Linking to External Websites
- Tables
- Creating Tables
- Table Headers and Cells
- Forms
- Text Fields
- Radio Buttons and Check boxes
- Submit Buttons
- Divs and Spans
- Grouping Elements with
- Inline Styling with
- HTML Comments
- Adding Comments to Your Code
- Validation and Best Practices
- HTML Validation
- Semantic HTML
- Next Steps
- CSS and Styling
- JavaScript for Interactivity
- Conclusion
- The Power of HTML
- Resources for Further Learning
By the end of this HTML tutorial, you’ll have a solid understanding of the essential HTML elements and how to use them to create basic web pages. HTML is the foundation upon which web development is built, so mastering it is a significant step toward becoming a proficient web developer.
Meta Keywords:-
You can use tag to specify important keywords these keywords are used by the search engines while indexing your webpage for searching purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> First Page For Tags </title>
<meta name=""keywords content="HTML, Meta Tags, Metadata">
</head>
<body>
<p> This is an Example of First Meta Tag. </p>
</body>
</html>Meta Description:-
You can use tag a short description in the web page. This again can be used by various search engines while indexing your webpage for searching purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Description </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="description of meta page">
</head>
<body>
</html>Meta Document Revision:-
tag can use to give information about the last time the document was updated. This information can be used by various web browsers while refreshing your webpage.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Revision </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="revised" content="CodeRepublics">
</head>
<body>
<p> This is an example of Meta Revision. </p>
</body>
</html>Meta Page Redirection:-
This document will explain how to create a META Tag to redirect your site or site content. This will not redirect any emails for your domains.
You should insert the following line in the head section of your HTML page, replacing http:example.com/ with the actual web page to which you want to redirect.
<html>
<head>
<meta http-equiv="refresh" content="2;url=http://example.com" />
<title>Page Moved</title>
</head>
<body>
</html>Meta Name Author:-
There are also Content Management Systems (CMS) that mention the name of the actual person editing the page. If used like this, it is easy to find the right person who is responsible for a web page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Author </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="author" content="Arvind Yadav">
</head>
<body>
<p> You can set an author name in a web page using meta tag. </p>
</body>
</html>
Meta Charset:-
The HTML charset Attribute is used to specify the character encoding for the HTML document. The charset attribute could be overridden by using the lang attribute of any element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Charset </title>
<meta name="keywords" content="HTML, Meta Tags, Metadata">
<meta name="description" content="Learn about Meta Tag">
<meta name="author" content="Arvind Yadav">
<http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<p>The charset attribute specifies the character encoding for the HTML document.</p>
</body>
</html> Meta Equiv Cookie:-
The data is sent from the web server in the form of an HTTP header called “Set-Cookie”. It helps to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Meta Cookie </title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata">
<meta name = "description" content = "Learning about Meta Tags">
<meta name = "author" content = "Arvind Yadav">
<meta http-equiv=”content-type” content=”type; charset=charset” />
</head>
<body>
</body>
</html>
