HTML Doctype and Basic Structure

ADVERTISEMENT

Every HTML page starts with something called a doctype and follows a specific structure — it’s like setting up the foundation before building your website.

Let me walk you through this in the simplest way possible.

📌 What is <!DOCTYPE html>?

The <!DOCTYPE html> declaration tells the browser,
👉 “Hey! This page uses the latest HTML5 standard.”

✅ Why it’s important:

  • Helps the browser render your page correctly
  • Always placed at the very top of the HTML file (first line)
  • It’s not an HTML tag — it’s an instruction to the browser

🛑 Don’t skip it — without it, browsers may enter quirks mode (weird old behavior)

🧱 Basic Structure of an HTML5 Page

Here’s the clean layout that every HTML page should follow:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Page Title</title>
</head>
<body>

  <!-- Your content goes here -->
  <h1>Hello, HTML World!</h1>
  <p>This is my basic HTML page structure.</p>

</body>
</html>

🔍 Let’s break it down line-by-line

PartPurpose
<!DOCTYPE html>Declares HTML5 version
<html lang="en">Root element + language for accessibility/SEO
<head>Meta info, title, links to CSS, fonts, etc.
<meta charset="UTF-8">Supports all characters (including emojis 😄)
<meta name="viewport"...>Makes site responsive (important for mobile)
<title>Text shown in browser tab
<body>The visible content of your website

🔧 Optional but Useful Tags

You can add these in the <head> section:

<meta name="description" content="Short description of your page for SEO">
<link rel="stylesheet" href="style.css">
<script src="main.js" defer></script>

✅ Best Practices

  • Always start with <!DOCTYPE html>
  • Use lang="en" (or your page’s language) in <html>
  • Keep head clean and organized
  • Only one <title> per page
  • Place all visible content inside <body>

🧪 Try This Yourself!

Copy the full structure above and paste it into a text editor:
Save it as index.html and open it in your browser — boom, your first HTML page is live!

📝 Quick Recap

  • <!DOCTYPE html> starts every modern HTML document
  • HTML structure has two main parts: <head> (info) and <body> (content)
  • A clean structure = better SEO, accessibility, and code organization

👉 Coming Up Next:

Let’s move on to creating your first HTML page and see it in action.
📚 Next: HTML First Page

ADVERTISEMENT