Introduction to

HTML/XHTML
Origins and Evolution of HTML and
XHTML
1. Introduction to HTML
• HTML (Hypertext Markup Language) is a markup
language used to structure web documents.
• Defined using Standard Generalized Markup
Language (SGML), an ISO standard.
• Unlike other formatting languages, HTML focuses on
document structure rather than detailed presentation
(fonts, colors, etc.).
• Early versions of HTML were designed to work across
different browsers and operating systems.
Evolution of HTML and Browser Wars
• Early 1990s: HTML was developed alongside the
World Wide Web at CERN (European Laboratory for
Particle Physics).
• 1993: Web’s popularity grew with the release of
MOSAIC, the first graphical web browser.
• 1995: Microsoft launched Internet Explorer (IE),
competing with Netscape, leading to the Browser
Wars (1995–1999).
• Netscape and Microsoft added their own extensions,
creating incompatibilities in HTML.
Role of W3C in Standardization
• 1994: Tim Berners-Lee founded W3C (World Wide
Web Consortium) to standardize HTML.
• W3C released HTML versions to keep up with browser
innovations:
• HTML 2.0 (1995) – First official standard.
• HTML 3.2 (1997) – Incorporated browser innovations.
• HTML 4.0 (1997) – Major improvements.
• HTML 4.01 (1999) – Last major HTML update before XHTML.
Problems with HTML 4.01
• Loose Syntax Rules – Allowed inconsistent document
structures, leading to compatibility issues across
browsers.
• Error Handling Issues – HTML did not define how
browsers should recover from errors, leading to
inconsistent interpretations.
• Deprecated Features – Some older features were
phased out but still supported in browsers.
Transition to XHTML (2000-2001)
• XML (Extensible Markup Language) introduced strict
syntax rules for data representation.
• XHTML 1.0 (2000) redefined HTML 4.01 using XML,
enforcing stricter syntax rules.
• Three XHTML 1.0 Standards:
• Strict – Follows all syntax rules.
• Transitional – Allows deprecated features.
• Frameset – Allows frame-based layouts.
• XHTML 1.1 (2001) removed frames and enforced strict
syntax rules ("draconian error handling").
• XHTML 2.0 (proposed later) was not backward
compatible, leading to its decline.
Rise of HTML5 and Decline of XHTML
2.0
• 2004: The Web Hypertext Application Technology
(WHAT) Working Group was formed by browser vendors
and developers.
• Goals of WHATWG:
• Maintain backward compatibility with HTML 4.01.
• Define clear error handling in the specification.
• Prevent users from seeing syntax errors in web documents.
• 2006: W3C abandoned XHTML 2.0 and joined WHATWG to
develop a new HTML version.
• 2009: W3C officially dropped XHTML 2.0 and adopted
the new standard, naming it HTML5.
Summary
• HTML was developed as a document structuring
language, not a design tool.
• The Browser Wars led to incompatible HTML
versions.
• W3C standardized HTML to reduce inconsistencies.
• XHTML introduced strict rules but was unpopular
due to its strict error handling.
• HTML5 replaced XHTML as the new standard,
focusing on compatibility, flexibility, and usability.
HTML vs. XHTML
The Shift from XHTML to HTML5
• Until 2010, many developers preferred XHTML for its
strict syntax rules, standardization, and validation.
• However, browsers still processed XHTML documents
using HTML parsers when served as text/html.
• Some developers stuck with HTML, while others were
disappointed that W3C abandoned XHTML’s strict
enforcement.
• HTML5 adoption made XHTML validation impossible
with the W3C XHTML 1.0 Strict validator.
Advantages of XHTML Over HTML
• Standards and Consistency
• XHTML enforces strict syntactic rules, ensuring uniform structure across
documents.
• HTML allows flexibility, leading to inconsistent formatting.
• Error Handling
• XHTML rejects incorrect code, ensuring documents are well-formed.
• HTML tolerates errors, causing inconsistent displays across browsers.
• Quality in Development
• Just as structured programming improves software quality, XHTML
improves document quality.
• Poorly structured HTML is common, but that doesn’t justify creating
more sloppy documents.
Choosing Between HTML and XHTML
• Key Considerations:
• Is the strict discipline of XHTML worth the improved clarity and
uniform display across browsers?
• Is validation worth the extra effort?
• A Compromise Approach:
• Promote HTML5 but follow XHTML 1.0 Strict syntax
rules (since they are valid in HTML5).
• Ensures document consistency while leveraging HTML5’s
new features.
Basic HTML Syntax
1. Tags and Elements
HTML documents use tags to define content categories.
Tag syntax: <tagname> (opening tag) and </tagname>
(closing tag).
Example of an element:
<p>This is simple stuff.</p>
Tags must be in lowercase (<p> not <P>).
2. Attributes
Attributes modify tag behavior.
• Format: attribute="value", enclosed in double
quotes.
Example:
html

• <a href="https://example.com">Click here</a>

3. Comments in HTML

• HTML comments improve readability but are

ignored by browsers.
• Format:
<!-- This is a comment -->
• Can span multiple lines:
<!-- PetesHome.html
This document describes Pete's Pickles homepage.
-->
4. HTML Parser Behavior
• Browsers ignore:
• Unrecognized tags
• Extra spaces and line breaks (unless specified with tags
like <br>).
• HTML behaves differently from programming languages:
• Misspelled tags are ignored instead of throwing errors.
• Browsers can ignore certain tags based on user settings.
Conclusion
• XHTML enforces structure and consistency, but its
strict rules were unpopular.
• HTML5 balances flexibility and standardization,
making it the dominant choice.
• Developers should follow HTML5 while maintaining
XHTML’s structured syntax.
Basic his section covers how to format
text in an HTML document using
Text various tags. Formatting includes
layout, structure, and
Markup presentation of text but does not
include images, tables, or other
media.
1. Paragraphs (<p>)
• Text in HTML is usually organized into paragraphs using the
<p> tag.
• The browser automatically wraps text within the width of
the window.
• Multiple spaces and line breaks are ignored unless
explicitly specified.
Example:
<p>Mary had a little lamb, its fleece was white as snow.</p>
Output:
Mary had a little lamb, its fleece was white as snow.
2. Line Breaks (<br />)
• Use the <br /> tag for an explicit line break (without
adding space like <p> does).
• Self-closing tag (no need for </br>).
Example:
p>Mary had a little lamb, <br />its fleece was white as
snow.</p>
Output:
Mary had a little lamb,
its fleece was white as snow.
3.
• The <pre> tag preserves Output:
line breaks, spaces, and
indentation as they appear Mary
Preserving in the code.
• The text inside <pre> is
had a

White displayed in monospace

font (fixed-width).
little
lamb
Space Example:
<pre>
(<pre>) Mary
had a
little
lamb
</pre>
4. • Output:
• HTML provides six levels of
headings for organizing
content. • Main Title (h1)
Headings • <h1> is the largest, <h6> is the
smallest. • Section Title (h2)

(<h1> to • Headings break the current

line and add extra space
• Subsection Title (h3)
• Sub-subsection Title
<h6>)
above and below.
• Example: (h4)
<h1>Main Title (h1)</h1> • Small heading (h5)
<h2>Section Title (h2)</h2>
• Smallest heading
<h3>Subsection Title (h3)</h3>
(h6)
<h4>Sub-subsection Title
(h4)</h4>
<h5>Small heading (h5)</h5>
<h6>Smallest heading (h6)</h6>
5. Block Quotations (<blockquote>)
• Use <blockquote> to • Example:
indent a section of text, <p>Abraham Lincoln's famous
typically for long speech:</p>
quotations. <blockquote>
• Browsers usually display <p>"Fourscore and seven years
blockquotes with extra ago our fathers brought forth
on this continent, a new
margin and nation, conceived in Liberty,
indentation. and dedicated to the
proposition that all men are
created equal."</p>
</blockquote>
Output:
Abraham Lincoln's famous speech:
"Fourscore and seven years ago our fathers brought forth
on this continent, a new nation, conceived in Liberty, and
dedicated to the proposition that all men are created
equal."
6. Font Styles and Content-Based
Tags
Bold and Italics (Deprecated Tags)
• <b> for bold → Use <strong> instead.
• <i> for italics → Use <em> instead.
Modern Content-Based Tags
• <em> → Emphasized text (usually italic).
• <strong> → Strong emphasis (usually bold).
• <code> → Monospace text (used for code snippets).
Example:
<p>This is <em>important</em> and this is
<strong>very important</strong>.</p>
<p>Code example: <code>let x = 10;</code></p>
Output:
This is important and this is very important.
Code example: let x = 10;
7. Subscript & Superscript (<sub> &
<sup>)
• <sub> → Subscript (smaller text below the baseline).
• <sup> → Superscript (smaller text above the baseline).
Example:
<p>Water formula: H₂O</p>
<p>Mathematical power: x² +
y³</p>
Output:
Water formula: H₂O
Mathematical power: x² + y³
 • Some characters have special meanings in
8. Special HTML (e.g., <, >, &) or are not available on
Characters keyboards (e.g., ©, €).
(Character Entities)
Example:
<p>The price is &lt; 10 &euro;.</p>
Output:
The price is < 10 €.
9. Horizontal Rule (<hr />)
• Creates a horizontal line to visually separate content.
• It is self-closing (<hr />).
Example:
<p>Section 1</p>
<hr />
<p>Section 2</p>
Output:
Section 1
–––––––––––––––––
Section 2
10. Meta Tags (<meta>)
• Meta tags provide information about a document (used by
search engines).
Example:
<meta name="keywords" content="HTML, CSS, Web Development">
<meta name="author" content="John Doe">
<meta name="description" content="A beginner's guide to HTML
text formatting.">
• keywords → Search keywords.
• author → Document author.
• description → Short document summary.
Final Thoughts
• Use modern tags (<em>, <strong>) instead of <b>
and <i>.
• Preserve white space with <pre>, and force line
breaks with <br />.
• Use headings (<h1>–<h6>) and horizontal rules (<hr
/>) for better structure.
• Use character entities (&lt;, &euro;) to display
special characters.
 Task 1: Create an HTML document
Create an HTML document with the following:
1. A title: "HTML Formatting Practice"

HTML 2.
3.
A heading (<h1>) with your name.
A paragraph (<p>) describing your favorite hobby.
Text 4. Use bold (<strong>) and italic (<em>) text in your
paragraph.
Formatti 5. Insert a line break (<br />) in the paragraph.

ng 6. Add a blockquote (<blockquote>) with a

motivational quote.

Practice 7.
8.
Add a horizontal rule (<hr />) to separate sections.
Include a subscript (<sub>) or superscript (<sup>)
Exercise 9.
in a math or chemical formula.
Use special characters like &copy; or &euro;.
10. Save the file as practice.html and open it in a
browser.
HTML Lists: Unordered, Ordered &
Definition Lists
HTML provides three main types of lists:
• 1️⃣Unordered Lists (<ul>) – Lists with bullet points
• 2️⃣Ordered Lists (<ol>) – Lists with numbers or letters
• 3️⃣Definition Lists (<dl>) – Lists with terms and
definitions
1 Unordered Lists (<ul>)
• Unordered lists are used when the order of items does not matter (e.g., grocery lists).
<!DOCTYPE html>
<html lang="en">
<head>
<title>Unordered List Example</title>
</head>
<body>
<h3>Some Common Single-Engine Aircraft</h3>
<ul>
<li>Cessna Skyhawk</li>
<li>Beechcraft Bonanza</li>
<li>Piper Cherokee</li>
</ul>
</body>
</html>
Output :
✅ Default display:
• Cessna Skyhawk
• Beechcraft Bonanza
• Piper Cherokee
2 Ordered Lists (<ol>)
• Ordered lists are lists in which the order of items is
important. This orderedness of a list is shown in the
display of the list by the implicit attachment of a
sequential value to the beginning of each item. The
default sequential values are Arabic numerals,
beginning with 1. An ordered list is created within the
block tag
• . The items are specified and displayed just as are those
in unordered lists, except that the items in an ordered
list are preceded by sequential values instead of bullets.
Example
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Ordered List Example</title>
</head>
<body>
<h3>Cessna 210 Engine Starting Instructions</h3>
<ol>
<li>Set mixture to rich</li>
<li>Set propeller to high RPM</li>
<li>Set ignition switch to "BOTH"</li>
<li>Set auxiliary fuel pump switch to "LOW PRIME"</li>
<li>When fuel pressure reaches 2 to 2.5 PSI, push starter button</li>
</ol>
</body>
</html>
Output
Nested Lists
<h3>Aircraft Types</h3>
<ol>
<li>General Aviation (Piston-Driven Engines)
<ol>
<li>Single-Engine Aircraft
<ol>
<li>Tail Wheel</li>
<li>Tricycle</li>
</ol>
</li>
<li>Dual-Engine Aircraft
<ol>
<li>Wing-mounted engines</li>
<li>Push-pull fuselage-mounted engines</li>
</ol>
</li>
</ol>
</li>
<li>Commercial Aviation (Jet Engines)
<ol>
<li>Dual-Engine
<ol>
<li>Wing-mounted engines</li>
<li>Fuselage-mounted engines</li>
</ol>
</li>
Continue..

<li>Tri-Engine
<ol>
<li>Third engine in vertical stabilizer</li>
<li>Third engine in fuselage</li>
</ol>
</li>
</ol>
</li>
</ol>
Output
Definition Lists (<dl>)
• Definition lists are used to display terms and their
meanings, like a glossary.
• A definition list is given as the content of a dl element,
which is a block element. Each term to be defined in the
definition list is given as the content of a dt element.
The definitions themselves are specified as the content
of dd elements. The defined terms of a definition list are
usually displayed in the left margin; the definitions are
usually shown indented on the line or lines following the
term, as in the following example:
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Definition List Example</title>
</head>
<body>
<h3>Single-Engine Cessna Airplanes</h3>
<dl>
<dt>152</dt>
<dd>Two-place trainer</dd>
<dt>172</dt>
<dd>Smaller four-place airplane</dd>
Contd..

<dt>182</dt>
<dd>Larger four-place airplane</dd>

<dt>210</dt>
<dd>Six-place airplane - high performance</dd>
</dl>

</body>
</html>
Output
Key Takeaways
🔹 Use <ul> when order does NOT matter.
🔹 Use <ol> when order IS important.
🔹 Use <dl> for term-definition pairs (glossaries).
🔹 Lists can be nested for better structure.
Introduction to Tables
Definition:
• Tables are widely used in printed materials and web
documents to organize and display data efficiently.
• A table consists of a matrix of cells arranged in rows
and columns.
• The first row and first column often contain labels
(headings), while the remaining cells hold the actual
data.
• Table cells can contain text, headings, images,
horizontal rules, or even nested tables.
Basic Table Tags
Structure of a Table
• <table> → Defines the table.
• <tr> (Table Row) → Defines a row.
• <th> (Table Header) → Defines column or row labels
(bold and centered by default).
• <td> (Table Data) → Defines the data cells in a table.
• <caption> → Provides a title for the table.
Example of a Basic Table
<table>
<caption>Fruit Juice Drinks</caption>
<tr>
<th></th> <!-- Empty top-left corner -->
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
Contd..

</tr>
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
</table>
Output
The rowspan and colspan Attributes
🔹 Purpose of rowspan and colspan
• These attributes help structure multi-level table
headers and row labels.
• colspan → Expands a cell across multiple columns.
• rowspan → Expands a cell across multiple rows.
• These attributes improve readability and reduce
redundant code in tables.
Example of colspan (Merging
Columns)
<tr>
<th colspan="3">Fruit Juice Drinks</th>
</tr>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
Explanation:

• "Fruit Juice Drinks" spans across three columns.

• The second row defines individual column headers
for "Apple," "Orange," and "Screwdriver."
Example of rowspan (Merging Rows)
<tr>
<td rowspan="2">Beverages</td>
<td>Tea</td>
</tr>
<tr>
<td>Coffee</td>
</tr>
Explanation:
• Beverages" spans two rows, covering both "Tea" and
"Coffee."
Combining rowspan and colspan
(Merging Rows & Columns Together)
<tr>
<td rowspan="2"></td> <!-- Empty top-left corner cell -->
<th colspan="3">Fruit Juice Drinks</th>
</tr>
<tr>
<th>Apple</th>
<th>Orange</th>
<th>Screwdriver</th>
</tr>
<tr>
<th>Breakfast</th>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
Contd..
<tr>
<th>Lunch</th>
<td>1</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<th>Dinner</th>
<td>0</td>
<td>0</td>
<td>1</td>
</tr>
Output:
Table Sections (<thead>, <tbody>,
<tfoot>)
Purpose of Table Sections
Tables are naturally divided into three parts:
• Header (<thead>) → Contains column labels.
• Body (<tbody>) → Holds the actual table data.
• Footer (<tfoot>) → Can repeat column labels or display totals.
Benefits of Using Table Sections:
• Better organization – Clearly separates headers, data, and footers.
• Improved styling – Allows CSS to apply different styles to headers
and footers.
• Faster loading – Browsers can load and scroll large tables more
efficiently.
Uses of Tables in Web Development
Historical Use of Tables for Page Layout (1990s-2000s)
• Before CSS was widely supported, developers used tables
for entire webpage layouts.
Reasons for this trend:
• CSS was not uniformly supported across browsers.
• Many web designers lacked CSS knowledge.
• Dotcom boom (1990s-2000s) led to rapid hiring of new
designers who found tables easier.
• Web design tools at the time promoted table-based
layouts.
Contd..
Problems with Using Tables for Layout
❌ Too many unnecessary tags – <table>, <tr>, <td>
bloated the HTML.
❌ Poor performance – Large HTML files slowed page
loading.
❌ Harder maintenance – Making design changes
required editing nested tables.
❌ Unnecessary complexity – Developers used
invisible single-pixel images for alignment.
Shift to CSS-Based Layouts (Post-
2001)
After the dotcom bubble burst (2001), the industry
evolved:
✅ More skilled developers remained.
✅ CSS knowledge increased.
✅ New trend: "Tableless layout" – Using CSS instead
of tables for design.
Why CSS is Better than Table-Based
Layouts
Faster page load times – Smaller, cleaner HTML files.
✅ More flexibility – Easier to make responsive designs
(adjust for different screen sizes).
✅ Better for accessibility – Screen readers and search
engines understand CSS better.
✅ Easier maintenance – Updating design is simpler with
CSS.
When to Use Tables in Modern Web
Design
For tabular data only, like:
• Reports
• Financial statements
• Schedules
• Product comparisons
❌ Not for page layout, which should be done with:
• CSS Grid
• Flexbox
Summary of Key Points
colspan merges columns, and rowspan merges rows.
✅ Tables should have structure:
• <thead> for headers
• <tbody> for data
• <tfoot> for summaries
✅ CSS is now the standard for layouts – tables
should only be used for actual tabular data.
✅ Using CSS instead of tables for layout improves
performance, accessibility, and maintainability.
<span> and <div> Tags
Introduction to <span> and <div> Tags
• Both <span> and <div> are HTML elements used to
group and apply styles to content.
• They do not have any default appearance but are
primarily used for styling and layout purposes.
• They work in combination with CSS to customize the
presentation of specific parts of a document.
The <span> Tag
• The <span> tag is an inline element used for styling a
portion of text within a line.
• It does not create a new block but applies styles to a selected
section within an existing paragraph or other inline content.
• Useful for changing properties like font size, color, and style
for part of a text.
Example Without Styling:
<p>It sure is fun to be in <span>total</span> control of
text.</p>
• The word "total" will appear the same as the rest of the text
because no styles are applied.
Example With Styling:
<style type="text/css">
.spanred { font-size: 2em; font-family: Arial; color: red; }
</style>

<p>It sure is fun to be in <span

class="spanred">total</span> control of text.</p>
In this example, the <span> tag is assigned a class
"spanred", which makes the word "total" appear in red,
larger, and in Arial font.
The <div> Tag
• The <div> tag is a block-level element used to define
sections in a document.
• It groups multiple elements together to apply common
styles or layout properties.
• <div> does not have a default appearance and is
mainly used for structuring and organizing content.
• It is widely used for styling sections using CSS and is a
fundamental part of webpage layout design.
Example Usage of <div>:
<div class="primary">
<p>This is a paragraph inside a div.</p>
<p>This is another paragraph inside the same div.</p>
</div>
• In this example, all paragraphs inside the <div> will
have the styles applied to the .primary class.
Difference Between <span> and
<div>
Sectioning Elements in HTML5
• HTML5 introduced new semantic elements like
<section>, <article>, <aside>, and <nav>.
• These elements provide more meaningful sectioning
than <div>.
• However, <div> is still widely used for general styling
and layout.
Conclusion
• The <span> tag is useful for styling small portions of
text without affecting the whole paragraph.
• The <div> tag is essential for grouping and
structuring content in a document.
• Both are fundamental in HTML and CSS design and
should be used appropriately based on the content and
styling needs.