Document Structure & Head Elements

🌐 HTML Basics Lesson 2 Beginner

The <head> section of an HTML document contains metadata and configurations that are crucial for browser rendering, SEO indexing, and linking external resources.

1 Meta tags, titles, and script links

Key elements inside the HTML head include:

<meta charset="UTF-8">: Tells the browser to interpret characters using standard UTF-8 encoding.
<meta name="viewport" ...>: Configures mobile-responsive scale and scaling constraints on small displays.
<link rel="stylesheet" href="style.css">: Links external CSS styling sheets to compile layout looks.
<script src="main.js"></script>: Links external JavaScript execution files.

2 Head Block Code

Let's look at a complete head tag setup:

HTML — Head Configuration

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium SEO Webpage</title>
    <meta name="description" content="Learn core HTML structure concepts.">
    <link rel="stylesheet" href="/pages.css">
</head>

3 Code Challenge

Challenge: Add a descriptive `<meta name="description" content="...">` tag inside your document head. Explain how search engines like Google utilize this metadata tag.