AI Reading
Quick summary of this article
This chapter introduces the basic structure of an HTML document by walking through a simple template. It explains the purpose of each essential tag, from the doctype declaration to the body, and shows how they work together to create a web page that a browser can display.
- The first line of every HTML5 page must be
<!DOCTYPE html>to tell the browser it's reading an HTML document. - The
<html>tag wraps all content on the page, while<head>holds meta-information like the page title and links to stylesheets. - Only the
<title>tag is required inside<head>, and its text appears in the browser tab or window title. - All visible content, such as text and images, goes inside the
<body>tag. - HTML is not case-sensitive, but using lowercase tags and proper indentation is recommended for readability.
💻 Chapter 5: Your First HTML Program
Let’s now write our first HTML page. This simple example will help you understand how a basic HTML document is structured and how each tag works.
✅ Basic HTML Template
🔍 Explanation of Each Part
| Code Part | Description |
|---|---|
<!DOCTYPE html> |
Declares the document type. It tells the browser that this is an HTML5 document. This must be the very first line of every HTML page. |
<html> … </html> |
This is the root tag. Everything inside this tag is considered part of the HTML page. |
<head> … </head> |
This section contains meta-information about the document. This includes the page title, links to CSS files, etc. |
<title> … </title> |
This tag defines the title of the web page, which appears in the browser tab or window title. |
<body> … </body> |
Everything you want to display on the web page (text, images, links, etc.) goes inside this tag. |
🧠 Notes
-
Only the
<title>tag is required inside the<head>. -
HTML is not case-sensitive, but it’s best practice to write tags in lowercase.
-
Always use proper indentation to improve readability.
🧪 Try It Yourself
Copy and paste the above code into a text editor (like Notepad or VS Code), save it as index.html, and open it in a browser. You’ll see an empty page, but the browser tab will show:Welcome to My Website.