The Head Element
The <head> element contains metadata about the document - information that isn't displayed directly on the page but is crucial for browsers, search engines, and other services.
What Goes in the Head?
Loading HTML Playground...
Common elements in the <head>:
<title>- The page title (shows in browser tab)<meta>- Metadata about the document<link>- Links to external resources (CSS, icons)<style>- Internal CSS styles<script>- JavaScript code or references
The Title Element
The <title> is required and appears in:
- Browser tab
- Bookmarks
- Search engine results
Loading HTML Playground...
Best practices for titles:
- Keep them under 60 characters
- Include relevant keywords
- Use format: "Page Name | Site Name"
Meta Elements
Meta elements provide metadata about the HTML document:
Loading HTML Playground...
Essential meta tags:
- charset="UTF-8" - Character encoding (supports all characters)
- viewport - Controls how page displays on mobile devices
- description - Summary for search engines (150-160 characters)
Link Element
The <link> element connects external resources:
<head>
<!-- External stylesheet -->
<link rel="stylesheet" href="styles.css">
<!-- Favicon (browser tab icon) -->
<link rel="icon" href="favicon.ico">
<!-- Preload important resources -->
<link rel="preload" href="font.woff2" as="font">
</head>
Exercise: Build a Complete Head
Create a proper <head> section with title, charset, viewport, and description:
Loading HTML Exercise...
A well-structured head section helps with SEO, accessibility, and proper rendering across devices!