HTML Tutorial

HTML Document Structure

Learn the basics of HTML document structure, from the doctype declaration to heading tags.

This tutorial will guide you through the basic structure of an HTML document.

Document Type Declaration (<!DOCTYPE HTML>)

This declaration is at the very beginning of your HTML document. It tells the browser which version of HTML the page is using. For modern web pages, it’s usually <!DOCTYPE html>.

Example:

<!DOCTYPE html>

HTML Element (<HTML>)

The <html> element wraps your entire HTML document. It serves as the root element.

Example:

<!DOCTYPE html>
<html>
<!-- Your content goes here -->
</html>
Try It Yourself

Head Section (<head>)

Inside the <html> element, you have a <head> section. This is where you place meta-information about your document, like the title of the page.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>My First Web Page</title>
</head>
<!-- Your content goes here -->
</html>
Try It Yourself

Body Section (<body>)

The actual content of your webpage goes inside the <body> section. This is where you put text, images, links, and more.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>My First Web Page</title>
</head>
<body>
   <h1>Welcome to My Web Page!</h1>
   <p>This is a simple example of an HTML document structure.</p>
</body>
</html>
Try It Yourself
  • <h1> is a header tag for the main heading.
  • <p> is a paragraph tag for text.

Heading Tags (<h1> to <h6>)

These tags are used to define headings. <h1> is the largest and <h6> is the smallest.

Example:

<h1>Main Heading</h1>
<h2>Subheading 2</h2>
<h3>...</h3>
<h4>...</h4>
<h5>...</h5>
<h6>Subheading 6</h6>
Try It Yourself

Paragraph Tag (<p>)

This tag defines a paragraph.

Example:

<p>This is a paragraph of text. It can be as long as you need it to be.</p>
Try It Yourself

This is a basic structure to get you started. Remember, HTML is all about structuring your content. Feel free to experiment and add more elements as needed for your webpage!