Chapter 4 – HTML

1. Introduction to HTML

HTML stands for HyperText Markup Language. It is the standard language used to create web
pages. Think of HTML as the skeleton or backbone of every website you visit.

What does each word mean?

• HyperText: Text that contains links to other text/pages (like the links you click on websites).
• Markup: The process of adding special codes (tags) to text to give it structure and meaning.
• Language: A set of rules and symbols understood by web browsers.

Key Facts to Remember:

• An HTML file is a plain text file containing small markup tags.
• HTML files must be saved with .htm or .html file extension.
• HTML files can be created using any simple text editor like Notepad (Windows).
• HTML was invented by Tim Berners-Lee at CERN (European Laboratory for Particle Physics)
in Geneva.

💡 TIP: HTML is NOT a programming language. It is a markup language. It describes the

structure of a web page but does not perform calculations or logic.

Programming Language Markup Language

Used to create programs and perform tasks Used to structure and format content
Has logic and instructions Does not perform logical operations
Can make decisions using conditions and loops Cannot make decisions or calculations
Examples: Python, Java, C++ Examples: HTML, XML, Markdown
2. Why use HTML?

Hypertext = Ordinary text + formatting facilities

Markup = Taking ordinary text and adding extra features to it

In simple words: HTML documents are text files made of HTML elements that:
• Define what a document looks like
• Guide how the browser displays the content
• Are platform-independent (work on any device or OS)

Important concept: Different browsers may display the same HTML code slightly differently because
each browser interprets HTML in its own way.

2.1 Advantages of HTML

No. Advantage
1 Easy to use, learn, and implement — a flexible alternative to traditional
presentation software.
2 Contains powerful formatting facilities.
3 Device and platform independent — works on PCs, workstations, mobile
devices, etc.
4 Supports hyperlinking — you can navigate to any HTML document using links.
5 HTML pages can be updated easily without changing the whole document.
6 It is a type of ‘world ware’ software — free to use.
7 Independent work — you don’t need to rely on application or program vendors.
8 No expensive license, software, or hardware required.
9 Ideal for multi-platform compatibility — perfect for web applications.

2.2 Disadvantages of HTML

No. Disadvantage
1 Doesn’t offer programming language features (no logic or calculations).
2 Easy to write bad HTML code with errors.
3 Complex HTML code is hard to read; complex interactive pages are time-
consuming to build.
4 Easy to make small mistakes like missing a “>“ or “/” character.
5 Special scripting languages (VBScript, JavaScript) are needed for
dynamic/interactive features.
6 Cannot detect errors easily — no built-in debugging tool.
3. HTML Documentation (Section 4.2)

HTML documents are plain-text (ASCII) files that can be created using any text editor: Notepad
(Windows), Simple Text (Mac), Emacs or vi (UNIX).

3.1 HTML Editors

HTML Editors are tools used to write HTML code. There are 3 categories:

Type Description
Only edit ASCII text. No special HTML features.
1. Text Editors
Examples: Notepad, Simple Text, Pico. They are
WYSIWYG editors.
May or may not be WYSIWYG. Specifically designed to
2. HTML Code Editors help write HTML code with features like syntax
highlighting.
WYSIWYG tools that let you design pages visually without
writing code.
3. HTML Design Tools
Examples: NetObjects Fusion, Microsoft Office 97.

WYSIWYG = “What You See Is What You Get” — you design the page visually and the tool
generates the HTML code for you.

4. HTML Elements and Tags

4.1 What is an HTML Element?

An element is a fundamental building block of an HTML document. Examples: headings, tables,
paragraphs, lists. Elements can contain plain text, other elements, or both.

4.2 What is an HTML Tag?

HTML elements are defined using HTML tags. Here’s what you need to know about tags:

• Tags are surrounded by < and > (called angle brackets).

• Tags normally come in pairs: an opening tag and a closing tag.
• Example: <b> is the start tag and </b> is the end tag.
• The content between the tags is called element content.
• Tags are NOT case sensitive: <b> and <B> mean the same thing.
Syntax (the format/rules for writing a tag):

<tagname> content </tagname>

\OR with attributes:
<tagname attribute=“value”> content </tagname>

Examples:

<TITLE> WELCOME TO MY WEBSITE </TITLE>

<A HREF=“URL”> CLICK HERE </A>

4.3 Tag Attributes

Attributes provide additional information about an HTML element. They are always placed inside
the start tag and always come in name/value pairs like: name=“value”

Syntax:

<tagname attribute=“value”>
Example: <IMG SRC=“c:\[Link]”>
(Here SRC is the attribute, “c:\[Link]” is its value)

💡 TIP: Attribute values should always be written in quotes. For example: <BODY
BGCOLOR=“#FFFFFF”>

5. The Minimal HTML Document (Section 4.3)

Every HTML document should contain certain standard HTML tags. The basic structure has two
main parts:
• HEAD: Contains the title and other background information about the page.
• BODY: Contains all the visible content (text, images, links, etc.)

A Simple HTML Document:

<HTML>
<HEAD>
<TITLE> HOME PAGE </TITLE>
</HEAD>
<BODY> THIS IS MY FIRST WEB PAGE </BODY>
</HTML>
 💡 TIP: Save your HTML file with the .htm or .html extension. For example:
‘[Link]’. Then open it in your browser to see the result!

6. Basic HTML Tags (Section 4.4)

6.1 The <HTML> Tag

The <HTML> tag identifies a document as an HTML document. All HTML documents must start
with <HTML> and end with </HTML>.

Syntax:

<HTML> ....... </HTML>

Example Program:

<HTML>
<BODY>
This is an HTML file.
</BODY>
</HTML>

Output: The browser will display: This is an HTML file.

6.2 The <HEAD> Tag

The <HEAD> tag contains general information (meta-information) about the document. This
information is NOT displayed on the page — it is for the browser’s use only.

The HEAD tag can contain:

• TITLE — The page title shown in browser tab
• BASE — Base URL for relative links
• META — Extra info about the document
• SCRIPT — JavaScript/VBScript code
• STYLE — CSS styling information

Syntax:

<HEAD> ... </HEAD>

Example Program:

<HTML>
<HEAD>
<TITLE> WELCOME TO FIRST WEBSITE </TITLE>
</HEAD>
</HTML>

6.3 The <TITLE> Tag

The <TITLE> tag specifies the title of the document. It appears in the browser’s title bar or tab.
Important rules:
• Each document can have only ONE title.
• The title should be less than 64 characters.
• The title cannot contain hyperlinks or markup commands — only plain text.

Example Program:

<HTML>
<HEAD>
<TITLE> MY FIRST WEBPAGE </TITLE>
</HEAD>
<BODY>
Welcome to my website!
</BODY>
</HTML>

Output: Browser tab shows: “MY FIRST WEBPAGE”. Page displays: Welcome to my website!

6.4 The <BODY> Tag

The <BODY> tag defines the document’s body — everything that is visible on the web page. This is
where you put headings, paragraphs, images, links, tables, etc.

Body Tag Attributes:

Attribute Syntax Example Purpose

<BODY BACKGROUND=“c:\ Sets an image as the page
BACKGROUND
[Link]”> background
<BODY Sets the background color of the
BGCOLOR
BGCOLOR=“#rrggbb”> page
TEXT <BODY TEXT=“#rrggbb”> Sets the default text color
LINK <BODY LINK=“#rrggbb”> Sets the color of hyperlinks
VLINK <BODY VLINK=“#rrggbb”> Sets the color of visited hyperlinks
Color codes: “#rrggbb” is a hex color code. RR=Red, GG=Green, BB=Blue. Each ranges from 00 to
FF. Examples: #000000 = Black, #FFFFFF = White, #FF0000 = Red.

Example Program:

<HTML>
<HEAD>
<TITLE> Colorful Page </TITLE>
</HEAD>
<BODY BGCOLOR=“#ADD8E6” TEXT=“#000080”>
This page has a light blue background and navy text.
</BODY>
</HTML>

Output: A page with a light blue background and dark navy text appears in the browser.

6.5 The <P> Tag — Paragraph

The <P> tag defines a paragraph. HTML automatically adds a blank line before and after each
paragraph.

• The ALIGN attribute controls paragraph alignment: LEFT, CENTER, RIGHT

• The closing tag </P> can sometimes be omitted, but it’s good practice to include it.

Example Program:

<HTML>
<BODY>
<P ALIGN=“CENTER”> This paragraph is centered. </P>
<P ALIGN=“LEFT”> This paragraph is left-aligned. </P>
<P ALIGN=“RIGHT”> This paragraph is right-aligned. </P>
</BODY>
</HTML>

6.6 The <BR> Tag — Line Break

The <BR> tag inserts a single line break. Use it when you want to go to the next line WITHOUT
starting a new paragraph.

• Important: <BR> is an empty tag — it has NO closing tag.

Example Program:

<HTML>
<BODY>
Line one.<BR>
Line two.<BR>
Line three.
</BODY>
</HTML>

Output:
Line one.
Line two.
Line three.

💡 TIP: <BR> is an empty/void tag — it only has a start tag, no end tag. It is one of the
few tags that works this way.

6.7 The <HR> Tag — Horizontal Rule

The <HR> tag draws a horizontal line across the page. It is used to separate sections of a document
visually.
• SIZE attribute — controls the thickness of the line
• WIDTH attribute — controls how wide the line is (as a percentage, e.g., “50%”)

Example Program:

<HTML>
<BODY>
<H1> This is my first web page </H1>
<HR SIZE=5 WIDTH=“20%”>
<P> This text is below the line. </P>
</BODY>
</HTML>

6.8 The <!-- --> Tag — HTML Comments

Comments are notes in the HTML code that the browser ignores. They are useful for explaining
your code.

Syntax:

<!-- This is a comment -->

 • VALID: <!-- This is a valid comment -->
• INVALID: < !-- This is not valid --> (space between < and ! makes it invalid)

Example Program:

<HTML>
<BODY>
<!-- This is the main heading of the page -->
<H1> Welcome! </H1>
<!-- Add more content here later -->
<P> Hello, world! </P>
</BODY>
</HTML>

Output: The browser shows only the heading and paragraph. The comments are invisible.

6.9 Heading Tags <H1> to <H6>

HTML provides 6 levels of headings. <H1> is the largest and <H6> is the smallest. HTML
automatically adds a blank line before and after each heading.

Tag Visual Size Use It For

<H1> Heading Size 1 (Biggest) Main page title
<H2> Heading Size 2 Major sections
<H3> Heading Size 3 Sub-sections
<H4> Heading Size 4 Sub-sub-sections
<H5> Heading Size 5 Minor headings
<H6> Heading Size 6 (Smallest) Smallest heading

Heading tags also support the STYLE attribute:

<H1 STYLE=“COLOR: blue”> Blue Heading </H1>

<H1 STYLE=“FONT-FAMILY: verdana”> Verdana Font </H1>
<H1 STYLE=“FONT-SIZE: 150%”> 150% Size </H1>
Full Example Program:

<HTML>
<BODY>
<H1> This is Heading 1 </H1>
<H2> This is Heading 2 </H2>
<H3> This is Heading 3 </H3>
<H4> This is Heading 4 </H4>
<H5> This is Heading 5 </H5>
<H6> This is Heading 6 </H6>
</BODY>
</HTML>

6.10 The <PRE> Tag — Preformatted Text

The <PRE> tag displays text in a monospace font and preserves ALL spaces, tabs, and line breaks
exactly as you type them.

Why it’s useful: Normally HTML ignores extra spaces and line breaks. The <PRE> tag overrides
this, which makes it great for displaying code or aligned columns.

Example Program:

<HTML>
<BODY>
<PRE>
Employee_name Employee_number Employee_address
John Smith 001 Chennai
Mary Jones 002 Mumbai
</PRE>
</BODY>
</HTML>

Output: The text appears in neat columns with spacing preserved:

Employee_name Employee_number Employee_address

John Smith 001 Chennai
Mary Jones 002 Mumbai

6.11 The <ADDRESS> Tag

The <ADDRESS> tag is used for address information, signatures, or authorship details. Most
browsers display it in italics. It is often placed at the bottom (or top) of a page.
Example Program:
<HTML>
<BODY>
<H2> About This Page </H2>
<P> This website is about learning HTML. </P>
<ADDRESS>
WEB DESIGNER<BR>
Tel: (023) 122 123
</ADDRESS>
</BODY>
</HTML>

Output: The address section appears in italics at the bottom.

7. Complete Practice Program

Here is a full HTML program using all the tags you’ve learned. Try typing this in Notepad and save it
as ‘[Link]’, then open it in your browser!

<HTML>
<HEAD>
<TITLE> My Practice Page </TITLE>
</HEAD>
<BODY BGCOLOR=“#F0F8FF” TEXT=“#000000”>
<!-- This is the main heading -->
<H1> Welcome to My HTML Practice Page </H1>
<HR SIZE=3 WIDTH=“80%”>
<H2> About Me </H2>
<P ALIGN=“LEFT”>
My name is Ravi.<BR>
I am a 12th grade student.<BR>
I am learning HTML.
</P>
<H2> My Favourite Subjects </H2>
<P> I enjoy studying these subjects: </P>
<PRE>
Subject Marks
Maths 95
Computer Sc 98
Physics 90
</PRE>
<HR SIZE=2 WIDTH=“50%”>
<ADDRESS>
Created by: Ravi<BR>
School: Government Higher Secondary School<BR>
Year: 2026
</ADDRESS>
</BODY>
</HTML>

What this program demonstrates:

• Page title in browser tab
• Light blue background color
• H1 and H2 headings
• Horizontal rules (HR) with different sizes
• Paragraphs (P) with line breaks (BR)
• Preformatted text (PRE) for a neat table
• Address element at the bottom
• HTML comments that are invisible in the browser