HTMLmarkup~15 mins

HTML document structure - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Build a Basic HTML Document Structure

📖 Scenario: You want to create a simple webpage that shows a welcoming message. To do this, you need to set up the basic structure of an HTML document first.

🎯 Goal: Build a complete HTML document with the correct structure including <!DOCTYPE html>, <html>, <head>, and <body> tags.

📋 What You'll Learn

Use the HTML5 doctype declaration

Include the <html> root element with the lang attribute set to "en"

Add a <head> section with <meta charset="UTF-8"> and a <title> tag

Create a <body> section with a heading that says "Welcome to My Website"

💡 Why This Matters

🌍 Real World

Every webpage on the internet starts with a basic HTML document structure like this. It is the foundation for adding content and styling.

💼 Career

Knowing how to set up a correct HTML document is essential for any web developer or designer. It ensures your pages work well across browsers and devices.

Progress0 / 4 steps

Create the HTML5 doctype and root element

Write the HTML5 doctype declaration <!DOCTYPE html> at the top. Then create the root <html> element with the attribute lang="en".

HTML

Need a hint?

The doctype declaration tells the browser this is an HTML5 document. The lang attribute helps with accessibility and search engines.

Add the head section with meta charset and title

Inside the <html> element, add a <head> section. Inside <head>, add a <meta charset="UTF-8"> tag and a <title> tag with the text "My First Page".

HTML

Need a hint?

The <meta charset="UTF-8"> tag ensures your page can display most characters correctly.

Add the body section with a heading

After the <head> section, add a <body> section. Inside <body>, add an <h1> heading with the text "Welcome to My Website".

HTML




  
  My First Page

Need a hint?

The <h1> tag is used for the main heading on your page.

Complete the HTML document structure

Make sure the <html> element properly wraps the <head> and <body> sections, and that all tags are correctly closed.

HTML




  
  My First Page


  Welcome to My Website

Need a hint?

Double-check that every opening tag has a matching closing tag and the structure is correct.