HTMLmarkup~15 mins

DOCTYPE declaration in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Understanding the DOCTYPE Declaration in HTML

📖 Scenario: You are creating a simple webpage that needs to start with the correct HTML declaration so browsers know how to display it properly.

🎯 Goal: Build a basic HTML page that includes the correct <!DOCTYPE html> declaration at the top.

📋 What You'll Learn

Include the exact DOCTYPE declaration <!DOCTYPE html> at the very top of the file

Create the basic HTML structure with <html>, <head>, and <body> tags

Add a <title> inside the <head> with the text 'My First Page'

Add a heading <h1> inside the <body> with the text 'Welcome to My Page'

💡 Why This Matters

🌍 Real World

Every webpage on the internet starts with a DOCTYPE declaration so browsers know how to display the page correctly.

💼 Career

Web developers must always include the correct DOCTYPE and basic HTML structure to ensure their pages work well across all browsers and devices.

Progress0 / 4 steps

Create the basic HTML skeleton

Write the basic HTML structure starting with the <html> tag, including <head> and <body> sections. Inside the <head>, add a <title> tag with the text My First Page. Inside the <body>, add an <h1> tag with the text Welcome to My Page.

HTML


  
    My First Page
  
  
    Welcome to My Page

Need a hint?

Remember to open and close the <html>, <head>, and <body> tags properly.

Add the DOCTYPE declaration

Add the exact DOCTYPE declaration <!DOCTYPE html> at the very top of your HTML code, before the <html> tag.

HTML



  
    My First Page
  
  
    Welcome to My Page

Need a hint?

The DOCTYPE declaration must be the very first line in your HTML file.

Add language attribute to the <html> tag

Add the attribute lang="en" to the opening <html> tag to specify the language as English.

HTML



  
    My First Page
  
  
    Welcome to My Page

Need a hint?

Adding lang="en" helps browsers and screen readers understand the language of your page.

Add meta charset for character encoding

Inside the <head> section, add the meta tag <meta charset="UTF-8"> to specify the character encoding.

HTML



  
    
    My First Page
  
  
    Welcome to My Page

Need a hint?

This meta tag ensures your page displays characters correctly in all browsers.