Basic Structure of an HTML Document

Doctype Declaration

The very first line of an HTML document should be the <!DOCTYPE html> declaration. It tells the browser to render the page using HTML5 standards.

<!DOCTYPE html>

The <html> Element

This is the root element that wraps the entire document. Everything goes inside <html> ... </html>.

3. The <head> Section

The <head> section contains metadata — information about the page that is not directly shown to the user but is critical for browsers, search engines, and accessibility tools. It appears at the top of the HTML document, before the <body>.

Common elements inside <head> include:

<title> — The text shown in the browser tab and used by search engines as the page title.
<meta charset="UTF-8"> — Declares the character encoding (UTF-8 is recommended for all modern sites).
<meta name="description" content="..."/> — Short summary of the page; used in search engine snippets.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> — Ensures proper scaling on mobile devices.
<link rel="stylesheet" href="styles.css"> — Links external CSS for styling.
<script src="script.js"></script> — Links external JavaScript files.
<meta name="author" content="Your Name"> — Specifies the author of the document.
<meta name="keywords" content="HTML, tutorial, web development"> — Optional keywords for SEO (less important today).

Metadata is also used for:

Search Engine Optimization (SEO)
Social media link previews (og:title, og:image, etc. for Open Graph)
Defining language (<html lang="en">) and accessibility settings

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="A brief description of my page for SEO.">
  <meta name="author" content="John Doe">
  <title>My Web Page</title>
  <link rel="stylesheet" href="styles.css">
  <script src="script.js" defer></script>
</head>

The <body> Section

Everything the user sees on the webpage is written inside the <body> tag: headings, paragraphs, images, forms, links, and more.

<body>
  <h1>Welcome!</h1>
  <p>This is a basic HTML page.</p>
</body>

Putting It All Together

Here is a complete example of a valid HTML5 document:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My First Page</title>
  </head>
  <body>
    <h1>Hello, HTML!</h1>
    <p>This is my first webpage using the basic structure.</p>
  </body>
</html>

Indentation and Readability

Proper indentation makes HTML easier to read and maintain. Typically, each nested tag is indented by two spaces or a tab.

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic

Menu