Challenge: Document Structure

🏁 Goal

Build the correct webpage by creating a basic HTML document structure. This structure is the backbone of every HTML page and consists of essential elements browsers need to render your content correctly.

Note

Don't be misled by the apparent simplicity of the webpage's design. While it might seem straightforward, it remains paramount to maintain the correct document structure. This ensures that the website retains readability and functionality across all browsers.

📋 Task

Create a basic HTML document structure. If you're already confident in your abilities, feel free to proceed without the step-by-step guide. However, if you'd like a bit more guidance, a step-by-step walkthrough is available to help you along the way.

📝 Step-by-Step Guide

Step 1: Start the HTML Document

Begin by typing the HTML doctype declaration, which tells the browser that the document is written in HTML. The declaration should be the first line of your HTML document:

index

Step 2: Add the HTML Opening and Closing Tags

After the doctype declaration, add the opening and closing HTML tags. The entire HTML document structure will be contained within these tags. Additionally, include the lang attribute to specify the language of the document:

index

Step 3: Create the Head Section

Add the opening and closing <head> tags inside the HTML tags. The head section contains meta-information about the HTML document, such as the title and links to external stylesheets:

index

Step 4: Add the Title

Within the <head> tags, add the opening and closing <title> tags. The text we enter between these tags will be displayed as the title of the webpage in the browser's title bar or tab:

index

Step 5: Create the Body Section

After the <head> section, add the opening and closing <body> tags. The body section contains the visible content of the webpage:

index

Step 6: Add Content to the Body

We can add elements within the <body> tags, such as headings, paragraphs, images, links, etc. Here's an example of adding a heading and a paragraph:

index

Try It Yourself

index

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 5