Basic Structure of HTML

What is the Basic Structure of HTML?
The basic structure of HTML is like the skeleton of a webpage. Every website you visit is built on this foundation. It tells the browser how to display content and organizes everything in a clear way. Without the structure, your page would just be a messy block of text.

Why Learn the Basic Structure of HTML?

  • 🏗️ It forms the backbone of all web pages.
  • 🎓 Helps beginners understand how websites are built.
  • 🔗 Works together with CSS (for styling) and JavaScript (for interactivity).
  • 💻 Makes your code neat, clean, and professional.
  • 🚀 Essential for anyone starting a career in web development.

Parts of the Basic Structure

Doctype Declaration
Written as

<!DOCTYPE html>
Tells the browser we are using HTML5 (the latest version).

HTML Tag

<html> … </html>
Wraps all the code on your webpage.

Head Section

<head> … </head>
Contains page information (metadata) like:
– Title of the page
– Character set (UTF-8)
– Links to CSS or JavaScript files

Body Section

<body> … </body>
This is the main visible part of the page.
Contains headings, paragraphs, images, links, videos, etc.

Your First Basic Structure Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My First HTML Structure</title>
</head>
<body>
  <h1>Welcome to HTML!</h1>
  <p>This is the basic structure of an HTML document.</p>
</body>
</html>

Key Points to Remember

  • Always start with <!DOCTYPE html>
  • Use <html>, <head>, and <body> every time
  • Most tags come in pairs (opening + closing)
  • Indent your code properly for better readability
  • HTML is not case-sensitive, but lowercase is the standard

Practice Exercise

👉 Try creating a new file named basic-structure.html. Add the code above inside it, save, and open it in your browser. Now experiment by adding headings, paragraphs, or images inside the <body> tag.

Pro Tip 💡

In VS Code, you can quickly generate the HTML skeleton by typing ! and pressing Enter. It will automatically create the full boilerplate for you.