HTML Basic

Learn the basic structure of HTML documents

📝 HTML Document Structure

Every HTML document follows a basic structure. Understanding this structure is essential for creating web pages that work correctly in all browsers. 


<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Output:

This is a Heading

This is a paragraph.

HTML Document Parts

📋

DOCTYPE

Tells browser this is HTML5 

<!DOCTYPE html>
🏠

HTML Element

Root element of the page 

<html lang="en">
</html>
🧠

Head Section

Contains page information 

<head>
  <title>Page Title</title>
</head>
👁️

Body Section

Contains visible content 

<body>
  <h1>Hello World</h1>
</body>

🔹 The DOCTYPE Declaration

The DOCTYPE tells the browser which version of HTML to use: 

<!DOCTYPE html>
  • Must be the very first line
  • Not case sensitive
  • Ensures the page renders correctly
  • HTML5 DOCTYPE is simple and short

🔹 The HTML Element

The <html> element is the root of every HTML page: 

<html lang="en">
    <!-- All other elements go inside here -->
</html>
  • Contains all other HTML elements
  • The lang attribute specifies the language
  • Helps screen readers and search engines

🔹 The Head Section

The <head> contains information about the page: 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>

Common head elements:

  • <title> - Page title (shows in browser tab)
  • <meta> - Page information and settings
  • <link> - Links to CSS files
  • <script> - JavaScript code

🔹 The Body Section

The <body> contains all visible content: 

<body>
    <h1>Welcome to My Website</h1>
    <p>This is the main content area.</p>
    <p>Everything here is visible to users.</p>
</body>

Output:

Welcome to My Website

This is the main content area.

Everything here is visible to users.

🔹 Complete Basic HTML Template

Here's a complete basic HTML template you can use: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My First Web Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to my first web page.</p>
    <p>I'm learning HTML!</p>
</body>
</html>

Output:

Hello, World!

Welcome to my first web page.

I'm learning HTML!

🧠 Test Your Knowledge

Which element contains the visible content of a web page?