Tutorials Courses Interview Prep (100 Q&A) AI Tools (50) Developer Tools (50) Tracks Pricing Plans Blog & Articles Contact Us
HTML5 Fundamentals & Document Anatomy 10 mins read Free Lesson

HTML Introduction & Page Anatomy

Understand what HTML is, the role of DOCTYPE, html, head, body tags, and how web browsers parse markup.

What is HTML?

HTML stands for HyperText Markup Language. It is the standard authoring language used worldwide to structure web pages and their content.

The Standard HTML5 Document Skeleton

Every modern HTML document begins with a <!DOCTYPE html> declaration that informs the browser rendering engine to parse the file using standard HTML5 mode:

<!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>Welcome to E-Tutorial</h1>
    <p>This is your first step into modern web engineering.</p>
</body>
</html>

Core Elements Explained:

  1. <!DOCTYPE html>: Declares document type as HTML5.
  2. <html lang="en">: The root container element for the entire page.
  3. <head>: Holds machine-readable metadata, character encoding, viewport configuration, and document <title>.
  4. <body>: Contains all visible markup rendered in the browser viewport (text, images, links, tables, videos).

Practice Exercises

Exercise 1: Construct an HTML5 Skeleton

Easy

Write a valid HTML5 document containing the DOCTYPE declaration, html root element with lang="en", head with charset UTF-8, title "Developer Academy", and a body with an h1 heading.

Starter Code:
<!-- Write your HTML5 boilerplate below -->
💡 Hint: Remember to start with <!DOCTYPE html> and wrap everything inside <html>...</html>.
Solution:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Developer Academy</title>
</head>
<body>
    <h1>Developer Academy</h1>
</body>
</html>