Register Now

Basic HTML Tags-Reference Guide

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.

1. What HTML Is

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

2. Basic Page Structure

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

3. Headings

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.

4. Paragraphs

Paragraphs are used for blocks of text content.

  • Tag used: <p>

  • Purpose: Display readable text sections

Example use:

  • Articles

  • Explanations

  • Descriptions

5. Links

Links connect one webpage to another.

Key concept:

  • href attribute defines the destination URL

Uses:

  • Navigation menus

  • External references

  • Internal page linking

6. Images

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

7. Lists

Lists are used to organize related items.

A. Unordered Lists (Bullets)

Used when order does not matter.

Examples:

  • Fruits

  • Features

  • Items

Structure idea:

  • Each item is a list element

B. Ordered Lists (Numbers)

Used when sequence matters.

Examples:

  • Steps in a process

  • Instructions

  • Rankings

Structure idea:

  • Items follow a numbered order automatically

Key List Rules

  • Unordered list = bullet points

  • Ordered list = numbered steps

  • List items represent each entry in the list

8. Tables

Tables are used to display structured data in rows and columns.

Basic Structure of Tables

A table is made of:

  • Rows

  • Columns

  • Headers

Table Components

  • Table container → Holds everything

  • Row → Each horizontal line of data

  • Header cell → Column titles (bold by default)

  • Data cell → Actual content values

9. Buttons

Buttons are interactive elements used to trigger actions.

Common uses:

  • Submitting forms

  • Clicking actions

  • Navigation triggers (later enhanced with JavaScript)

10. Sections

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

11. Header and Footer

Header

The top section of a webpage.
Commonly contains:

  • Website title

  • Logo

  • Navigation links

Footer

The bottom section of a webpage.
Commonly contains:

  • Copyright information

  • Contact details

  • Secondary links

12. Line Breaks and Divider 

Two simple structural tools:

  • Line break → Moves text to a new line

  • Horizontal line → Separates sections visually