Module 2: HTML Document Structure

Every valid HTML page follows a specific structural blueprint. In this module, you will learn the core structural elements, how to configure metadata for SEO and display, and how to utilize global attributes to identify and style your elements.

Core Tags: <html>, <head>, <body>

Before placing text or images on a page, you must define the skeleton. The following elements form the absolute minimum structure of a modern web page.

1. <!DOCTYPE html>

This is the very first line of any HTML5 document. It is not an HTML tag, but a declaration. It tells the browser, "Expect modern HTML5 code." Without this, browsers might switch to "Quirks Mode" and display your page inconsistently.

2. The <html> Tag (The Root)

The <html> element is the root element of the document. Everything else is nested inside it.

<html lang="en">
  <!-- The head and body go here -->
</html>

Note: We always add the lang="en" attribute to specify that the content is in English. This greatly assists screen readers (for visually impaired users) and search engines.

3. The <head> Tag (The Brain)

The <head> tag acts as a container for all the behind-the-scenes configuration of your page. Nothing inside the head tag is visible on the actual webpage. It is used to store metadata, the page title, links to CSS stylesheets, and JavaScript files.

4. The <body> Tag (The Content)

The <body> tag is the container for the visible content of your webpage. Everything you want the user to see—headings, paragraphs, images, videos, and buttons—goes between the opening and closing body tags.

Metadata & Character Encoding

Metadata translates to "data about data." In HTML, we use the <meta> tag inside the <head> to provide metadata about the document.

Character Encoding

<meta charset="UTF-8">

Computers only understand numbers. When they display text, they map numbers to characters using a character encoding system. UTF-8 is the universal standard for the web. It supports almost every character, symbol, and language in the world, including emojis! By including this line, you prevent text from showing up as weird, garbled symbols.

Viewport Settings & Page Title

The Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This is arguably the most important meta tag for modern web development. Without it, mobile browsers will assume your webpage was built for a desktop computer and will shrink the text to fit a tiny screen, making it impossible to read. This tag forces the webpage's width to match the exact physical width of the device screen (width=device-width) and sets the initial zoom level to 100% (initial-scale=1.0).

The Page Title

<title>My Awesome Website</title>

The <title> tag (placed inside the head) defines the title of the document. This text appears in:

The browser tab at the top of your screen.
Google Search result headlines.
The default name when a user saves your site as a bookmark.

Global Attributes: id, class, style, title

HTML attributes provide additional information or configuration for HTML elements. While some attributes belong only to specific tags (like the src attribute for images), Global Attributes can be applied to any HTML element.

1. The id Attribute

The id attribute gives a unique identifier to an element. You cannot have two elements with the same id on a single page.

<h1 id="main-heading">Welcome</h1>

Uses: Used by CSS to style one specific element, or by JavaScript to target a specific element to manipulate.

2. The class Attribute

Unlike an id, a class can be shared by multiple elements. It is the primary way we group elements together to apply the same CSS styling to all of them.

<p class="highlight-text">This is important.</p>
<p class="highlight-text">This is also important.</p>

3. The style Attribute

The style attribute allows you to write inline CSS directly inside an HTML element. While it is useful for quick testing, it is considered bad practice for large applications because it mixes presentation with structure.

<p style="color: red; font-size: 20px;">Warning message!</p>

4. The title Attribute

The title attribute provides a tooltip when a user hovers their mouse over an element. It is excellent for providing additional context.

<button title="Click here to submit your form">Submit</button>