Suggest an editImprove this articleRefine the answer for “What is contained inside <head>?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)Inside the **`<head>`** element is metadata and service information that describes the page but is not shown to the user: the title, encoding, linked styles, scripts, icons, and settings for search engines and social networks. **Key point:** This data is needed by the browser, search engines, social networks, and other systems to correctly interpret, index, and display the page.Shown above the full answer for quick recall.Answer (EN)ImageInside 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. ```html <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: ```html <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. ```html <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). ```html <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. ```html <script src="script.js" defer></script> ``` --- ### 6. - Base address for all links Sets the common path for all relative links in the document. ```html <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. ```html <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*.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.