HTML Basic Structure

Every page follows the same HTML basic structure. Once you know this skeleton, you can build any page by filling in the body with content.

The HTML Document Skeleton

The doctype comes first, then the html root with exactly two children: head and body. The two meta tags set the character encoding and make the page display correctly on phones.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Structure</title>
</head>
<body>
  <!-- visible content goes here -->
  <h1>Welcome</h1>
</body>
</html>

Headings and Paragraphs

Headings go from <h1> (most important) to <h6>. Paragraphs use <p>.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text</title></head>
<body>
  <h1>Travel Journal</h1>
  <h2>Day 1: Lahore</h2>
  <p>We visited the Badshahi Mosque and tried local food.</p>
  <h2>Day 2: Islamabad</h2>
  <p>A morning hike up the Margalla Hills.</p>
</body>
</html>

Links and Images

A link uses <a> with an href attribute. An image uses <img> with src and alt attributes. Attributes are covered in detail in a later lesson.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Links and Images</title></head>
<body>
  <a href="https://developer.mozilla.org">Read the MDN docs</a>
  <br>
  <img src="https://picsum.photos/300/150" alt="A random landscape" width="300" height="150">
</body>
</html>

HTML Comments

Comments start with <!-- and end with -->. The browser ignores them, so they are useful for notes or temporarily hiding code. Remember that comments are still visible to anyone who views the page source.

Viewing Page Source

Right-click any web page and choose "View Page Source" to see its HTML, or "Inspect" to open developer tools. Studying real sites is a great way to learn how others structure their markup.

Frequently asked questions

Is <!DOCTYPE html> required?

Yes. Without it, browsers switch to "quirks mode" and may render layout differently. It should be the very first line of every HTML file.

What is the difference between head and body in HTML?

The head contains information about the page (title, metadata, links to CSS) that is mostly not displayed. The body contains the content users actually see.

Is HTML case sensitive?

Tag and attribute names are not case sensitive, but lowercase is the universal convention and is recommended.