The <head> tag contains metadata about the HTML document. It includes information like the page title, character encoding, links to stylesheets, and meta tags for SEO. The head section is not displayed in the browser window.

<head>

Step 2

The <head> tag wraps metadata elements like <title>, <meta>, <link>, and <style>. It comes after the opening <html> tag and before the <body> tag. Only one head tag per HTML document.

<head>
  <title>My Page</title>
  <meta charset="UTF-8">
</head>

Step 3

Common elements in the head include: <title> for the page title, <meta> for metadata like description and keywords, <link> for external resources like CSS files, and <script> for JavaScript. These help with SEO and page functionality.

<head>
  <title>My Website</title>
  <meta charset="UTF-8">
  <meta name="description" content="Page description">
  <link rel="stylesheet" href="styles.css">
</head>

Step 4

The head section is invisible to users but crucial for browsers and search engines. It provides essential information about the document structure and content.

<head>
  <title>My Page</title>
</head>

Step 5

Checkpoint: Where does the <head> tag go in an HTML document?

<html>
<head>
  <title>Page</title>
</head>
<body></body>
</html>

Step 6

Correct! The <head> tag goes after the opening <html> tag and before the <body> tag. It contains all the metadata and resource links for your HTML document.

<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Content</h1>
</body>
</html>

Step 7

Now it's your turn. The head section is essential for proper HTML document structure, SEO, and linking resources. Complete the challenges below to master the Head tag!

head.html

1 / 7

🧠

Tutor:The <head> tag contains metadata about the HTML document. It includes information like the page title, character encoding, links to stylesheets, and meta tags for SEO. The head section is not displayed in the browser window.

⭐ 0 EXP

Head Mastery

Unlock nodes by learning document metadata and structure.

Concept 1: The Head Tag

The <head> tag contains metadata about the HTML document. It includes information like the page title, character encoding, links to stylesheets, and meta tags for SEO. The head section is not displayed in the browser window.

System Check

Where does the <head> tag go in an HTML document?

After <html>, before <body>Inside <body>After <body>Before <html>

Community Holo-Net

Share Head Structures

Created effective head sections with metadata? Share your code and best practices.

Enjoying this guide?

Codesyllabus is 100% free and open-source. Support our mission, pay for server infrastructure, and fuel new tutorials by buying us a coffee!

HTML Head Tag

Pascual Vila

Frontend Instructor.

The <head> tag contains metadata about the HTML document. It includes information like the page title, character encoding, links to stylesheets, scripts, and meta tags for SEO. The head section is not displayed in the browser window but is essential for document structure and SEO.

Document Metadata Container

The <head> element is a container for metadata elements. It comes after the opening <html> tag and before the <body> tag. Only one head tag per HTML document. It contains elements like <title>, <meta>, <link>, and <script>.

Common Head Elements

Common elements in the head include: <title> for the page title (shown in browser tab), <meta> for metadata like description, keywords, and character encoding, <link> for external resources like CSS files and favicons, and <script> for JavaScript code.

SEO and Document Structure

The head section is crucial for SEO. Meta tags provide descriptions and keywords that search engines use to understand and index your page. The title tag is especially important for search engine rankings and appears in browser tabs and bookmarks.

Best Practices

Always include a <title> tag in your head section. Use <meta charset="UTF-8"> to specify character encoding. Add meta description and keywords for SEO. Link external stylesheets and scripts in the head. Keep the head section organized and include only necessary metadata.

Head Tag Glossary

<head>: HTML element that contains metadata about the HTML document. Includes title, meta tags, links to resources, and scripts. Only one head tag per document.
Metadata: Information about the document that is not displayed on the page but is used by browsers and search engines. Includes title, description, keywords, and character encoding.
Document Structure: The head comes after the opening <html> tag and before the <body> tag. It contains invisible metadata while body contains visible content.
SEO (Search Engine Optimization): The head section is crucial for SEO. Meta tags provide descriptions and keywords that help search engines understand and rank your page content.
Resource Links: The head section contains <link> tags for external resources like CSS stylesheets, favicons, and other assets that the page needs to load.

📖 INDEX