HTML (HyperText Markup Language) is the foundation of all webpages. It defines the structure and organization of content such as text, images, lists, tables, and sections. HTML does not handle styling (CSS) or behavior (JavaScript); it only provides structure.
HTML is used to build the structure of a webpage. It tells the browser how content should be arranged.
Common content types in HTML:
Text content
Images
Lists
Tables
Page sections
Every HTML document follows a standard layout:
<!DOCTYPE html> declares the document type
<html> wraps the entire page
<head> contains metadata (like title)
<body> contains visible content
Headings define titles and hierarchy within a page.
Levels of headings:
H1 → Main title (largest, most important)
H2 → Section title
H3 → Sub-section title
H4 → Smaller headings
Headings are used to organize content clearly for both users and search engines.
Paragraphs are used for blocks of text content.
Tag used: <p>
Purpose: Display readable text sections
Example use:
Articles
Explanations
Descriptions
Links connect one webpage to another.
Key concept:
href attribute defines the destination URL
Uses:
Navigation menus
External references
Internal page linking
Images are added using the image tag.
Key attributes:
src → Image location or file path
alt → Text shown if image fails to load
Importance of alt text:
Improves accessibility
Helps SEO
Provides fallback description
Lists are used to organize related items.
Used when order does not matter.
Examples:
Fruits
Features
Items
Structure idea:
Each item is a list element
Used when sequence matters.
Examples:
Steps in a process
Instructions
Rankings
Structure idea:
Items follow a numbered order automatically
Unordered list = bullet points
Ordered list = numbered steps
List items represent each entry in the list
Tables are used to display structured data in rows and columns.
A table is made of:
Rows
Columns
Headers
Table container → Holds everything
Row → Each horizontal line of data
Header cell → Column titles (bold by default)
Data cell → Actual content values
Buttons are interactive elements used to trigger actions.
Common uses:
Submitting forms
Clicking actions
Navigation triggers (later enhanced with JavaScript)
Sections group related content into meaningful blocks.
Purpose:
Organize page content
Improve readability
Improve structure for SEO
Example uses:
About section
Services section
Contact section
The top section of a webpage.
Commonly contains:
Website title
Logo
Navigation links
The bottom section of a webpage.
Commonly contains:
Copyright information
Contact details
Secondary links
Two simple structural tools:
Line break → Moves text to a new line
Horizontal line → Separates sections visually
