Structure of HTML

 

Structure of an HTML Document

Every HTML page follows a fixed basic structure that tells the browser how to read and display the webpage.

Basic HTML Document Structure

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <!-- Visible content goes here -->
</body>
</html>

Explanation of Each Part

1. <!DOCTYPE html>

  • Declares the document type

  • Tells the browser this is an HTML5 document

  • Must be the first line in the file

📌 Without it, browsers may behave unpredictably.

2. <html> Tag

  • Root (parent) element of the HTML page

  • All other tags are written inside it

<html>
   ...
</html>

3. <head> Section

Contains information about the webpage, not visible to users.

Common elements inside <head>:

  • <title> – page title

  • <meta> – character set, viewport, SEO

  • <link> – CSS files

  • <style> – internal CSS

  • <script> – JavaScript (sometimes)

Example:

<head>
    <title>My Website</title>
    <meta charset="UTF-8">
</head>

4. <title> Tag

  • Sets the browser tab title

  • Used by search engines

  • Must be inside <head>

5. <body> Section

Contains all visible content of the webpage.

Examples:

  • Headings

  • Paragraphs

  • Images

  • Links

  • Forms

  • Tables

<body>
    <h1>Hello</h1>
    <p>This is my webpage.</p>
</body>

Diagram Representation

<!DOCTYPE html>
   |
<html>
   |
  <head>   → Metadata (not visible)
   |
  <body>   → Visible webpage content

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>HTML Structure</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>HTML Document</h1>
    <p>This shows the basic structure of an HTML page.</p>
</body>
</html>

Important Points (Exam / Interview)

✔ <!DOCTYPE html> defines HTML version
✔ <html> is the root element
✔ <head> contains metadata
✔ <body> contains visible content
✔ <title> appears on browser tab

Comments

Post a Comment

Popular posts from this blog

What is HTML?

  1. What is HTML? HTML (HyperText Markup Language) is the standard language used to create web pages . It defines the structure of a webpage It tells the browser what content is (heading, paragraph, image, link, etc.) HTML is not a programming language — it’s a markup language 👉 Think of HTML as the skeleton of a website . 2. Basic Structure of an HTML Document Every HTML page follows a basic structure: <!DOCTYPE html > < html > < head > < title >My First Web Page </ title > </ head > < body > < h1 >Hello World </ h1 > < p >This is my first HTML page. </ p > </ body > </ html > 3. Explanation of Each Part <!DOCTYPE html> Tells the browser that this document is HTML5 Must be the first line of the document <html> Tag Root element of the HTML page All HTML content is written inside this tag <head> Tag Contains meta-information about the p...
Read more