Every HTML document follows a specific structure. Let’s break it down step by step.

Basic Structure of an HTML Document

An HTML document starts with a DOCTYPE declaration and contains different sections. Here’s how it looks:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage</title>
    </head>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Understanding Each Part

  1. <!DOCTYPE html>:
    • This tells the browser that we are using HTML5 (the latest version of HTML).
    • It is not case-sensitive, so <!Doctype HTML> would also work.
  2. <html> (Root Element):
    • It is the root element of an HTML page.
    • The entire HTML document is inside this tag.
    • Everything inside this tag makes up the webpage.
  3. <head> (Document Information):
    • This section contains metadata (information about the webpage).
    • It can include the title of the webpage (<title>), links to CSS and JavaScript files, and other important settings.
  4. <title> (Page Title):
    • The text inside <title> appears in the browser tab.
    • Example: If you write <title>My Blog</title>, the browser tab will show My Blog.
  5. <body> (Visible Content):
    • This section contains everything you see on the webpage, like text, images, and buttons.
    • Anything inside <body> will be displayed in the browser.

Visualization of an HTML Page Structure

Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is visible text.</h1>

</body>

</html>

Interesting Fact 🎉

Did you know? Google’s homepage only had HTML and no CSS in its early days!

❮ Previous
Next ❯