Metadata & Head Elements
Learn about essential <head> tags for SEO, accessibility, and browsers.
Technical Details
The <head> section of an HTML document contains metadata elements that provide information about the page, control browser behavior, and improve SEO and accessibility.
Common metadata and head elements include:
- <meta>Defines metadata such as character encoding, viewport settings, description, keywords, and author.
- <title>Sets the title of the page shown in the browser tab.
- <link>Links external resources like stylesheets or favicons.
- Character encodinge.g., <meta charset="UTF-8">
- Viewport settingsfor responsive design
- Page description and keywordsfor SEO
- Author informatione.g., <meta name="author" content="Jane Doe" >
- Favicon linkse.g., <link rel="icon" href="/favicon.ico" >
Sample <head> Section
A typical <head> with common metadata and favicon setup.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A sample HTML page">
<meta name="keywords" content="HTML, metadata, tutorial">
<meta name="author" content="Jane Doe">
<link rel="icon" href="/favicon.ico">
<title>Metadata Example</title>
</head>
<body>
<h1>Metadata & Head Elements</h1>
</body>
</html><meta charset>(Character Encoding)
Specifies the character encoding for the document. UTF-8 is recommended.
- Placed at the top of <head>.
- Prevents text rendering issues.
<meta name='viewport'>(Responsive Design)
Controls layout behavior on mobile devices.
- Use width=device-width
- Essential for mobile-friendly sites
Knowledge Check
1. Which tag sets the character encoding for an HTML document?
2. What does <meta name='viewport'> do?