HTML Basic Structure

HTML

Every HTML page has a basic structure. Think of it as the skeleton of a web page.

The Structure

<!DOCTYPE html> — Tells the browser this is HTML5
<html> — The root element
<head> — Contains meta info (title, CSS links)
<body> — Contains visible content

Example — HTML

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
</head>
<body>
    <h1>Welcome!</h1>
    <p>This is a complete HTML page.</p>
</body>
</html>

Result

Welcome!

This is a complete HTML page.

PreviousHTML Introduction

NextHTML Headings & Paragraphs

Interview Questions — HTML Basic Structure

5 questions commonly asked in interviews

Q1 What is the basic structure of an HTML document? Beginner

The basic HTML structure includes <!DOCTYPE html>, <html>, <head>, <title>, and <body>. The head contains metadata, while the body contains visible page content.

Q2 What is the purpose of the <html> tag? Beginner

The <html> tag is the root element of an HTML document. All other HTML elements are written inside it.

Q3 What is the difference between <head> and <body>? Beginner

The <head> contains metadata, title, styles, and links to external files. The <body> contains the visible content shown on the webpage.

Q4 Why is the <title> tag important? Intermediate

The <title> tag defines the page title shown in the browser tab and is also important for SEO and search engine results.

Q5 What happens if an HTML document does not have a proper structure? Intermediate

Browsers may still display the page, but missing structure can cause rendering issues, SEO problems, accessibility issues, and inconsistent behavior.

Frequently Asked Questions

Common doubts about HTML Basic Structure

Yes, it is recommended to add <!DOCTYPE html> at the top of every HTML5 document so browsers render the page in standards mode.

Browsers may still render the page, but it is not good practice. The <head> tag is important for metadata, page title, CSS, and SEO.

Visible content such as text, images, links, headings, and buttons should be written inside the <body> tag.

No, a valid HTML document should have only one <body> tag.

Indentation is not mandatory for browsers, but it makes code easier to read, debug, and maintain.

Test Your Knowledge

5 questions · Earn 50 XP

0 / 5

Q1 Which declaration is used for HTML5?

Q2 Which tag is the root element of an HTML page?

Q3 Which tag contains visible webpage content?

Q4 Which tag defines the browser tab title?

Q5 Where are meta tags usually placed?

More on HTML Basic Structure

Cheatsheet, tips, resources & what to learn next

Quick Cheatsheet

HTML5 Doctype

<!DOCTYPE html>

Basic Page Structure

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Head Section

<head>
  <title>Page Title</title>
  <meta charset="UTF-8">
</head>

Body Section

<body>
  <h1>Welcome</h1>
  <p>This is my page.</p>
</body>

Page Title

<title>Introduction to HTML</title>

Pro Tips

Always start your HTML document with <!DOCTYPE html>.

Keep metadata, title, CSS links, and scripts inside the <head> when required.

Write all visible page content inside the <body> tag.

Use proper indentation to make your HTML readable.

Use meaningful page titles for better SEO and user experience.

Resources

MDN — HTML Document Structure Docs

W3Schools — HTML Basic Practice

freeCodeCamp — Basic HTML Practice

HTML Validator Tool

HTML Crash Course Video

Up Next

HTML Headings HTML Paragraphs HTML Links HTML Images HTML Lists