HTML Tutorial
INTRODUCTION
HTML BASIC TAGS
INLINE & BLOCK ELEMENTS
HTML LISTS
HTML TABLES
HTML FORMS
HEAD ELEMENTS
HTML MEDIA
MISCELLANEOUS TAGS
HTML Page Structure
Every HTML page follows a common structure made up of special tags. These tags act like building blocks, defining where content starts, what kind it is, and how it should be handled by the browser.
Basic Structure of an HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
What Does This Mean?
Let’s break it down step-by-step so it makes perfect sense.
<!DOCTYPE html> – Doctype Declaration
- Tells the browser that you’re writing in HTML5, the latest version of HTML.
- Always goes at the top of the page.
- Helps the browser render your content correctly.
<html> – Root Element
- Everything on your page must be inside the
<html>tag. - It represents the entire HTML document.
<html>
<!-- All HTML content goes here -->
</html>
<head> – Head Section
Contains metadata: information about document (not shown on the page).
Common elements:
<title>– The title shown in the browser tab<meta>– Describes the character set, page description, and responsiveness<link>– Connects external CSS files<script>– Connects JavaScript files
<head>
<title>My First Page</title>
</head>
<body> – Body Section
- The visible part of the web page.
- Anything you want users to see goes here: headings, paragraphs, images, lists, etc.
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
Example: Complete HTML Page
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Summary
Tag | Purpose |
| Declares HTML5 version |
| Root element for the entire document |
| Contains metadata and page title |
| Sets the name shown in the browser tab |
| Displays the content users see in the browser |
| Common tags used for headings and paragraphs (covered soon!) |
Browser Output Preview
Here’s what the above HTML will look like in a browser:
Visualization of an HTML Document Structure
In the next lessons, we’ll explore more tags and elements that make up real-world web pages۔