HTML Notes — Grade XII Computer Science Page
HTML
HyperText Markup Language
Comprehensive Study Notes — Grade XII
Topics Covered: ADDRESS • BR • HR • HTML Comments • Headings • PRE • FONT • Character Formatting
• URLs & Anchors • Lists
1. The <ADDRESS> Element
The <ADDRESS> element is used to provide contact information,
Definition authorship details, signatures, or document-specific address
information. It is typically placed at the top or bottom of a web page.
Syntax
<ADDRESS>
Contact information or authorship details here
</ADDRESS>
Key Characteristics
• Rendering: Most browsers display the content of <ADDRESS> in italic style.
• Placement: Typically placed at the bottom or top of a document.
• Block-level element: It is a block-level HTML element (like <P>, <PRE>, <HR>).
• Cannot contain: <P>, <BLOCKQUOTE>, <FORM>, or other block elements inside it.
• Can contain: Text, text markup (emphasis, etc.), anchor elements, and images.
Example Program
HTML Code
<ADDRESS>
<A HREF="c:/[Link]">X.Y.Z.</A>
</ADDRESS>
<P><ADDRESS>
WEB DESIGNER<BR>
Tel (023) 122 123.
</ADDRESS></P>
Browser Output
X.Y.Z
WEB DESIGNER
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
Tel (023) 122 123.
📌 Note: The rendering of <ADDRESS> content is left up to the browser — most render it in
italics. It may also be right-justified or indented depending on the browser.
2. The <BR> Tag — Line Break
The <BR> tag inserts a single line break without starting a new
Definition
paragraph. It forces text to continue on the next line.
Syntax
<BR>
Key Characteristics
• Empty tag: The <BR> tag has no closing tag.
• Line break only: Unlike <P>, it does not add extra blank lines before or after.
• Use case: Used when you want to end a line without starting a new paragraph (e.g., in
addresses or poetry).
Example Program
HTML Code
This <BR> is a line break.
Browser Output
This
is a line break.
Practical Use — Inside ADDRESS
<ADDRESS>
WEB DESIGNER<BR>
Tel (023) 122 123.
</ADDRESS>
📌 Note: The <BR> tag is an empty (void) element — it does not wrap content between opening
and closing tags. It simply inserts a line break at that position in the document.
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
3. The <HR> Tag — Horizontal Rule
The <HR> tag produces a horizontal line across the width of the
Definition browser window. It is used to visually separate sections of a
document.
Syntax
<HR SIZE="number" WIDTH="percentage%">
Attributes
Attribute Example Purpose
SIZE SIZE=5 Controls thickness of the line
WIDTH WIDTH="20%" Sets the percentage of window width
covered
Example Program
HTML Code
<BODY>
<H1>This is my first web page</H1>
<HR SIZE=5 WIDTH="20%">
</BODY>
4. HTML Comments — <!-- -->
HTML comments are used to insert explanatory notes into the source
Definition code that are completely ignored by the browser. They help document
the code for future reference.
Syntax
<!-- This is a comment -->
Rules for Comments
1. An exclamation point must be placed after the opening angle bracket: <!--
2. Comments do not nest — you cannot place a comment inside another comment.
3. The double-dash sequence "--" must not appear inside a comment (except as the closing "-->"
sequence).
4. There must be no spaces before the closing bracket: -->
5. The browser ignores all content between <!-- and -->.
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
Valid vs Invalid Comments
Valid Comment
<!-- This is a valid comment -->
Invalid Comment (space after <!)
<! - This is not valid comment -->
📌 Note: Comments are extremely useful when editing source code at a later date — they
remind you what each part of the page does.
5. Headings — <H1> to <H6>
HTML headings are used to define the structure and hierarchy of a
web page. There are six levels of headings from <H1> (largest) to
Definition
<H6> (smallest). Browsers automatically add an extra blank line
before and after each heading.
Syntax
<H1>Heading Level 1 (Largest)</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6 (Smallest)</H6>
Heading Hierarchy Table
Tag Font Size Usage Importance
<H1> Largest Page Title / Main Highest
Heading
<H2> Very Large Section Heading High
<H3> Large Sub-section Heading Medium-High
<H4> Medium Minor Heading Medium
<H5> Small Sub-minor Heading Low
<H6> Smallest Least Important Heading Lowest
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
Heading Attributes — Examples
HTML Code
<H1 STYLE="COLOR: blue">Displayed in large font with blue color</H1>
<H1 STYLE="FONT-FAMILY: verdana">Displayed in Verdana font style</H1>
<H1 STYLE="FONT-SIZE: 150%">Size defined as percentage</H1>
📌 Note: HTML automatically adds an extra blank line before and after each heading. Headings
are important for page structure and SEO (Search Engine Optimization).
6. The <PRE> Tag — Preformatted Text
The <PRE> tag preformats text. Text inside <PRE> and </PRE> is
Definition displayed exactly as written in the HTML source — preserving
spaces, tabs, and line breaks — in monospace (fixed-width) font.
Syntax
<PRE>
Text displayed exactly as formatted here
</PRE>
Key Features
• Monospace font: Text is displayed in a fixed-width font (like Courier).
• Preserves whitespace: Spaces, tabs, and line breaks are preserved exactly.
• Columnar data: Can be used to display columnar lists or tables without using <TABLE>.
• No text wrapping: Text is not automatically wrapped unless you insert line breaks.
Example Program
HTML Code
<PRE>
Employee_name Employee_number Employee_address
</PRE>
Browser Output (Monospace, Aligned)
Employee_name Employee_number Employee_address
7. Font Tags in HTML — <FONT>
Definition The <FONT> tag is used to define the size, color, and typeface (font
family) of text. Note: The <FONT> tag has been deprecated in
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
modern HTML and is supposed to be removed in future versions —
CSS is preferred instead.
Syntax
<FONT SIZE="value" FACE="font-name" COLOR="color-value">
Your text here
</FONT>
Font Attributes Table
Attribute Example Purpose
size="number" size="2" Defines the absolute font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times New Defines the font typeface/family
Roman"
color="color-value" color="#eeff00" Defines font color using HEX code
color="color-name" color="red" Defines font color using color name
Example Program
HTML Code
<P>
<FONT SIZE="5" FACE="VERDANA" COLOR="#AA00FF">
This is an example of demonstrating fonts.
</FONT>
</P>
⚠️Deprecated: The <FONT> tag is deprecated in HTML 4 and removed in HTML5. Use CSS
(Cascading Style Sheets) for font styling in modern web development.
8. Character Formatting Tags
HTML character formatting tags are used to apply styles to individual
words or sentences. HTML has two types: Logical Styles (based on
Definition
meaning/purpose) and Physical Styles (based on specific visual
appearance).
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
8A. Logical Style Tags
Logical styles tag text according to its semantic meaning or purpose.
Tag Rendered As Purpose / Meaning
<EM> Italics Text for emphasis
<STRONG> Bold Strong (important) emphasis
<CODE> Fixed-width font Computer code or programming text
<VAR> Italics Variables in expressions or commands
8B. Physical Style Tags
Physical styles specify the exact visual appearance of text.
<B> — Bold Text
<B>In Bold</B>
Output
In Bold
<I> — Italic Text
<I>In Italics</I>
Output
In Italics
<U> — Underlined Text
<U>Underlined</U>
Output
Underlined
<SUB> — Subscript Text
Displays text in subscript (below the normal line). Useful for chemical
Definition
formulae and mathematical expressions.
H<SUB>2</SUB>SO<SUB>4</SUB>
Output
H₂SO₄
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
<SUP> — Superscript Text
Displays text in superscript (above the normal line). Useful for
Definition
exponents and mathematical formulae.
Volume of sphere = (4/3)(3.14)r<SUP>3</SUP>
Output
Volume of sphere = (4/3)(3.14)r³
<MARQUEE> — Scrolling Text (IE Only)
The <MARQUEE> tag creates a scrolling text marquee. Supported
Definition only by Microsoft Internet Explorer — not supported by other browsers
like Netscape Navigator.
<MARQUEE ALIGN="top">Scrolling text</MARQUEE>
<MARQUEE DIRECTION="RIGHT">WELCOME</MARQUEE>
⚠️Warning: The <MARQUEE> tag is not a standard HTML element and is not supported by all
browsers. It is deprecated and should be avoided in modern web development.
9. URLs and Hypertext Anchors — <A> Tag
URL stands for Uniform Resource Locator. It represents the address
URL of a document on the web or Internet, or simply a path to a file in a
specific directory.
URL Syntax
scheme://[Link][:port]/path/filename
The <A> (Anchor) tag is used to create hypertext links. It allows you to
<A> Anchor Tag jump from one document (or location within a document) to another —
whether local or on the Web.
Syntax of Anchor Tag
<A HREF="URL">Link text or image</A>
Anchor Attributes
• HREF: Specifies the URL (destination) of the link — the address of the resource to link to.
• NAME: Creates a named anchor (destination bookmark) within a document.
• TITLE: Specifies the title of the linked document.
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
Types of Links — Example Programs
1. Link to a Website
<A HREF="[Link] your email-id</A>
The text "Enter your email-id" becomes a clickable link that opens [Link].
2. Link to an Image (Image as Link)
<A HREF="[Link]"><IMG SRC="[Link]"></A>
The image "[Link]" becomes a clickable link to "[Link]".
3. Link to Document in Different Directory
<A HREF="d:/soft/[Link]">Click Here.</A>
Clicking "Click Here" opens the file "[Link]" from the specified path.
4. Link to Same Page (Named Anchor)
<!-- Create the link -->
<P><A HREF="#samepage">This is a link to the same page.</A></P>
<!-- Create the named anchor destination -->
<A NAME="samepage"><H2>Yes, you are on the same page.</H2></A>
5. Link Between Sections of Different Documents
<!-- In [Link]: -->
<A HREF="[Link]#differentlink">Link to a specific section</A>
<!-- In [Link]: -->
<H2><A NAME="differentlink">To a specific section</A></H2>
6. Mailto Link
<A HREF="[Link] me</A>
Creates a clickable email link that opens the user's email client.
📌 Note: You cannot create links to specific sections within a different document unless you
have write permission to that document's source code, or it already contains named anchors.
10. Lists in HTML
HTML supports three main types of lists: Ordered Lists (numbered),
Unordered Lists (bulleted), and Definition Lists (term-description
Definition
pairs). Lists help organize and present information in a structured
format.
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
HTML List Tags — Quick Reference
Tag Full Name Purpose
<OL> Ordered List Numbered list
<UL> Unordered List Bulleted list
<LI> List Item Individual item in OL or UL
<DL> Definition List Term-definition pair list
<DT> Definition Term Term in a definition list
<DD> Definition Description Description of the term
<DIR> Directory List Deprecated — use <UL> instead
<MENU> Menu List Deprecated — use <UL> instead
10.1 Unordered Lists — <UL>
An unordered list is a list of items marked with bullets (typically small
Definition filled circles). Each item is preceded by a bullet symbol. Created using
<UL> with <LI> for each item.
Syntax
<UL type="circle/disc/square">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</UL>
Bullet Type Attribute Values
type= Bullet Shape Description
"disc" ● Filled Circle Default bullet type (solid circle)
"circle" ○ Open Circle Open/hollow circle
"square" ■ Filled Square Solid square bullet
Complete Example Program
HTML Code
<HTML>
<BODY>
<H4>This is Unordered List</H4>
<UL type="circle">
<LI>Sunday</LI>
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
<LI>Monday</LI>
<LI>Tuesday</LI>
</UL>
</BODY>
</HTML>
Browser Output
This is Unordered List:
o Sunday
o Monday
o Tuesday
10.2 Ordered Lists — <OL>
An ordered list is a numbered list of items. Each item is preceded by a
Definition number or letter. Created using <OL> with <LI> for each item. Also
called a "numbered list".
Syntax
<OL type="1/A/a/I/i" start="number">
<LI>Item 1</LI>
<LI>Item 2</LI>
<LI>Item 3</LI>
</OL>
Type Attribute Values
type= Numbering Style Example Output
"1" Decimal numbers (Default) 1. 2. 3. 4.
"A" Uppercase alphabetic letters A. B. C. D.
"a" Lowercase alphabetic letters a. b. c. d.
"I" Uppercase Roman numerals I. II. III. IV.
"i" Lowercase Roman numerals i. ii. iii. iv.
Complete Example Program — Ordered List with Roman Numerals
HTML Code
<HTML>
<BODY>
<H4><B>This is an Ordered List</B></H4>
<OL type="i">
<LI>Sunday</LI>
<LI>Monday</LI>
<LI>Tuesday</LI>
</OL>
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
</BODY>
</HTML>
Browser Output
This is an Ordered List:
i) Sunday
ii) Monday
iii) Tuesday
📌 start attribute: Use the start="n" attribute to begin numbering from any value. E.g., <OL
start="6"> starts the list from 6.
10.3 Definition Lists — <DL>
A definition list is a list of terms and their explanations/descriptions. It
is NOT a list of items — it is a list of terms paired with their definitions.
Definition
Web browsers generally format the definition on a new line and indent
it.
Syntax
<DL>
<DT>Term 1</DT>
<DD>Description of Term 1</DD>
<DT>Term 2</DT>
<DD>Description of Term 2</DD>
</DL>
Tags Used in Definition Lists
• <DL>: Defines the Definition List container.
• <DT>: Definition Term — the word or phrase being defined.
• <DD>: Definition Description — the explanation or meaning of the term.
Complete Example Program
HTML Code
<HTML>
<BODY>
<H4>This is a Definition List</H4>
<DL>
<DT>VB</DT>
<DD>Programming Language</DD>
<DT>VB SCRIPT</DT>
<DD>Scripting Language</DD>
</DL>
</BODY>
</HTML>
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
Browser Output
This is a Definition List:
VB
Programming Language
VB SCRIPT
Scripting Language
10.4 Nested Lists
Lists can be nested — meaning a list can be placed inside another
Definition list. You can also have multiple paragraphs within a single list item,
each containing further nested lists.
Complete Nested List Example Program
HTML Code
<HTML>
<BODY>
<H4>This example of Nested List</H4>
<UL>
<LI>Scripted Programming</LI>
<LI>Structured Programming
<UL>
<LI>Basic</LI>
<LI>Pascal</LI>
</UL>
</LI>
<LI>Object Oriented Languages</LI>
</UL>
</BODY>
</HTML>
Browser Output
• Scripted Programming
• Structured Programming
○ Basic
○ Pascal
• Object Oriented Languages
📌 Nesting Tip: Inside a list item (<LI>), you can place paragraphs, line breaks, images, links,
and even other lists. This makes nested lists very powerful for hierarchical content.
Summary — All HTML Tags Covered
Tag Purpose Key Points
<ADDRESS> Contact/authorship info Rendered in italics; block-level; placed at
top/bottom of page
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists
HTML Notes — Grade XII Computer Science Page
<BR> Line break Empty tag; no closing tag; no extra spacing
<HR> Horizontal rule Separates sections; SIZE and WIDTH attributes
<!-- --> HTML Comment Ignored by browser; no nesting; no spaces in <!--
<H1>–<H6> Headings H1 largest, H6 smallest; adds blank line
before/after
<PRE> Preformatted text Monospace font; preserves spaces, tabs, line
breaks
<FONT> Font styling Deprecated; SIZE, FACE, COLOR attributes
<B> Bold text Physical style; makes text bold
<I> Italic text Physical style; makes text italic
<U> Underline Physical style; underlines text
<SUB> Subscript Text below baseline; for chemical formulae
<SUP> Superscript Text above baseline; for exponents/powers
<A> Anchor/Hyperlink HREF for links; NAME for named anchors;
supports mailto:
<UL> Unordered list Bulleted; type: disc/circle/square
<OL> Ordered list Numbered; type: 1/A/a/I/i; start attribute
<LI> List item Used inside UL and OL; can nest other lists
<DL> Definition list Term-description pairs; uses DT and DD
<DT> Definition term The term being defined inside DL
<DD> Definition description The explanation/meaning of the DT term
These notes cover HTML topics from the <ADDRESS> element through all major List types as
per the Bifocal Grade XII Computer Science textbook. All examples are exam-ready with syntax,
definitions, programs, and browser output.
Topics: ADDRESS • BR • HR • Comments • Headings • PRE • FONT • Character Formatting • URLs • Lists