Syntax
<meta name="description" content="Page description">Examples
Essential Meta Tags
The meta tags almost every page should include.
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Learn web development with Codectionary.">Social Media Preview (Open Graph)
Meta tags that control how a link looks when shared on social media.
<meta property="og:title" content="Codectionary - Learn to Code">
<meta property="og:description" content="An interactive platform for learning web development.">
<meta property="og:image" content="https://codectionary.com/preview.png">SEO and Robots
Controlling how search engines index the page.
<meta name="robots" content="index, follow">
<meta name="keywords" content="html, css, javascript, learn to code">Attributes
- charset (string): Declares the document's character encoding, typically UTF-8
- name (string): Identifies the type of metadata, e.g. viewport, description, author
- content (string): The value associated with the name or property attribute
- property (string): Used for Open Graph metadata (og:title, og:image, etc.)
Best practices
- Always include charset and viewport meta tags as early as possible in <head>
- Write a unique, concise description for each page (roughly 150-160 characters) to improve search engine snippets
- Add Open Graph meta tags so links look good when shared on social platforms
- Do not overload the description with keywords — write for humans first
At a glance
- Purpose
- Structure and meaning for web content
- File extension
- .html · .htm
- Runs in
- Web browsers
- Usually used with
- CSS and JavaScript
Specifications & further reading
Related HTML documentation
<link>
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.
The <link> element establishes a relationship between the current document and an external resource, most commonly a stylesheet. It lives in the <head> and is a void element. Beyond stylesheets, <link> is also used for favicons, preloading resources, and specifying alternate versions of a page.<base>
The <base> element specifies a base URL and/or target for all relative URLs in a document. It must appear inside <head>, and a document should have no more than one <base> element. Once set, every relative link, image src, and form action on the page resolves against it unless individually overridden.<style>
The <style> element contains embedded CSS rules that apply directly to the current document, as an alternative to linking an external stylesheet with <link>. It normally lives inside <head>, though the scoped nature of modern CSS means it can technically appear in body content too.<title>
The <title> element defines the title of the document, shown in the browser tab, bookmarks, and search engine results. Every HTML document should have exactly one <title>, placed inside <head>. It must contain only text — no nested elements.