Metadata means "data about data." In HTML, metadata provides
information about the webpage such as its title, description,
keywords, author, and linked resources (like CSS files).
It is always placed inside the <head> section of an HTML document.
Metadata is not directly visible on the webpage, but it helps browsers, search engines, and social media platforms understand your page better.
💡 Common Metadata Tags
<title>→ Sets the page title (shown in browser tab).<meta>→ Provides extra info like description, keywords, author, charset.<link>→ Connects external files (CSS, icons, etc.).
1. The <title> Tag
The <title> tag defines the title of the webpage.
It appears in the browser tab and is also used by search engines as the clickable headline.
<head>
<title>My Awesome Website</title>
</head>
Always give your webpage a clear, short, and descriptive title.
2. The <meta> Tag
The <meta> tag provides information about the webpage.
It can define the character set, description, keywords, and author details.
<head>
<meta charset="UTF-8">
<meta name="description" content="Learn HTML Metadata tags with examples">
<meta name="keywords" content="HTML, metadata, title, meta, link">
<meta name="author" content="The Coding Journey">
</head>
💡 Popular Uses of <meta>:
charset→ Defines character encoding (UTF-8 is recommended).description→ Short summary for search engines.keywords→ Old SEO practice, not much used today.author→ Shows who created the page.viewport→ Makes site responsive on mobile devices.
3. The <link> Tag
The <link> tag is used to connect the webpage with external resources
like CSS files, icons, or fonts.
<head>
<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
</head>
The <link> tag is self-closing and does not need a closing tag.
⚠️ Avoid stuffing too many
<meta> keywords —
search engines may ignore them and it can harm SEO.
