What is contained inside <head>?
Inside the <head> element is metadata and service information that describes the page but is not shown to the user.
This data is needed by the browser, search engines, social networks, and other systems to correctly interpret, index, and display the page.
1. - Page title
Shown on the browser tab and in search results.
<title>Home page - My site</title>Important: the <title> tag is required in every HTML document.
2. - Metadata
Contains page parameters that do not directly affect the content. The most important ones:
<meta charset="UTF-8">
<meta name="description" content="Page description for search engines.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Jane Doe">
<meta name="robots" content="index, follow">What they do:
charset: sets the encoding (usually UTF-8).description: page description (for SEO and snippets).viewport: makes the page responsive on mobile devices.author: specifies the document's author.robots: tells search engines whether to index the page.
3. - Linking external files
Used to connect the page to external resources: styles, icons, fonts.
<link rel="stylesheet" href="style.css">
<link rel="icon" href="favicon.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">Examples:
rel="stylesheet": links a CSS file;rel="icon": adds the site icon (favicon);rel="preconnect": optimizes loading of external resources.
4. - Inline CSS styles
Allows styling to be described directly in HTML (rarely used).
<style>
body { font-family: Arial; background: #f9f9f9; }
</style>5. - Linking JavaScript
You can embed JS code or link an external file.
It is often used with the defer attribute so it does not block the page's loading.
<script src="script.js" defer></script>6. - Base address for all links
Sets the common path for all relative links in the document.
<base href="https://example.com/">7. Open Graph and social networks (optional)
Used so that social networks correctly display a preview when links are shared.
<meta property="og:title" content="My site">
<meta property="og:description" content="Page description">
<meta property="og:image" content="preview.jpg">
<meta property="og:url" content="https://example.com">Summary:
| Tag | Purpose |
|---|---|
<title> | Page title |
<meta> | Metadata (encoding, description, author, SEO, responsiveness) |
<link> | Links CSS, icons, fonts |
<style> | Inline CSS styles |
<script> | Links JavaScript |
<base> | Base path for links |
<meta property="og:*"> | Data for social networks and messengers |
In simple terms:
inside <head> is everything the browser needs to "understand" the page,
not to display it.
This is a technical section: title, description, styles, scripts, icons, and settings.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.