In this XHTML tutorial, we’ll explore how to use ordered lists, unordered lists, definition lists, and horizontal rulers effectively. Lists help organize content neatly, while horizontal rulers (<hr />) visually divide sections in a web page.
We’ll also look into special characters, subscript/superscript tags, and text formatting tags like <u>, <i>, and <em> — all using valid XHTML syntax.
See the working example of HTML Unordered lists, ordered lists, definition lists and horizontal rulers.
You may also need to check basic HTM tutorial? And in case you need website hosting for html websites.
🧱 1. Creating a New XHTML Document
Start by creating a new XHTML file named chapter2.html.
In this file, we’ll include lists, horizontal rulers, special characters, and text formatting elements.
✅ Example XHTML Structure:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Lists Chapter 2</title>
</head>
<body>
<h1><font color="blue">How Lists Work in HTML</font></h1>
<hr width="50%" align="left" size="5px" color="blue" />
<p>We have two types of lists in HTML.<br />
1st type is ordered lists defined by <ol></p>
</body>
</html>🔢 2. XHTML Ordered Lists (<ol>)
Ordered lists display list items in a numbered or alphabetic sequence.
The <ol> tag defines the list, and each list item is wrapped in <li> tags.
Example – Default Numeric Ordered List:
<strong>Ordered Lists</strong>
<ol>
Web development languages we will learn.
<li>HTML - HyperText Markup Language</li>
<li>CSS - Cascading Style Sheets</li>
<li>JavaScript</li>
<li>JQuery</li>
<li>Ajax</li>
<li>PHP
<ol>
<li>PHP 4.0</li>
<li>PHP 5.0</li>
</ol>
</li>
<li>MySQL Database</li>
<li>XML</li>
</ol>💡 Explanation:
<ol>creates an ordered list.- Nested
<ol>tags create sub-lists. - Default numbering uses 1, 2, 3… format.
🔠 3. Changing Ordered List Types
XHTML allows you to change the list numbering style using the type attribute of the <ol> tag.
Example – Ordered List Type “A”:
<h2>Ordered List Type A</h2>
<ol type="A">
<li>Pakistan</li>
<li>India</li>
<li>United States</li>
<li>Saudi Arabia</li>
</ol>
Common list types:
type="1"→ 1, 2, 3, 4type="A"→ A, B, C, Dtype="a"→ a, b, c, dtype="I"→ I, II, III, IVtype="i"→ i, ii, iii, iv
🔘 4. XHTML Unordered Lists (<ul>)
Unordered lists are used when the order of items doesn’t matter.
They typically use bullet points instead of numbers.
Example:
<strong>Unordered Lists</strong>
<hr />
<ul>
<li>Ateeq</li>
<li>Somia</li>
<li>Saira</li>
</ul>
Tip: You can customize bullet style using CSS with list-style-type (e.g., circle, square, or disc).
📖 5. XHTML Definition Lists (<dl>, <dt>, <dd>)
Definition lists are used to present terms and their definitions.
They are ideal for glossaries, technical documentation, or structured information.
Example – Web Languages:
<h2>Definition Lists</h2>
<dl>
<dt>Web Languages</dt>
<dd>HTML</dd>
<dd>PHP</dd>
<dd>JavaScript</dd>
<dd>ASP.Net</dd>
</dl>Example – Programming Languages:
<dl>
<dt>Programming Languages</dt>
<dd>C++</dd>
<dd>Java</dd>
<dd>Python</dd>
<dd>C#</dd>
</dl>Explanation:
<dl>→ Starts a definition list<dt>→ Defines a term<dd>→ Provides the definition
🧭 6. Horizontal Rulers in XHTML (<hr />)
The <hr /> tag creates a horizontal line (or rule) to visually separate sections.
It’s a self-closing tag in XHTML.
Example:
<hr width="100%" size="10px" color="#FF00FF" />Common Attributes:
| Attribute | Description | Example |
|---|---|---|
width | Sets line width | width="50%" |
size | Defines line thickness | size="5px" |
color | Sets color | color="blue" |
align | Aligns line (left, right, center) | align="left" |
💎 7. Special Characters in XHTML
Certain characters like <, >, and " cannot be written directly in XHTML.
We use character entities to display them properly.
| Character | Entity Code | Display |
|---|---|---|
< | < | < |
> | > | > |
" | " | “ |
© | © | © |
® | ® | ® |
Example:
<<br />
><br />
"<br />
©<br />
®<br />We have a complete guide about What is UTF-8 in HTML?
²⁴ 8. Subscript and Superscript Tags
The <sub> and <sup> tags display text below or above the baseline — useful in scientific or mathematical notations.
Example:
2<sub>3</sub> <!-- Subscript -->
2<sup>4</sup> <!-- Superscript -->
Result:
2₃ and 2⁴
🖋️ 9. Text Formatting Tags in XHTML
Example:
<p>This is <em>really!</em> easy to learn!</p>
<p>You will soon ♥ using XHTML!</p>
<u>This is <i>underline and italic</i></u>
Common Formatting Tags:
| Tag | Description |
|---|---|
<b> | Bold text |
<i> | Italic text |
<u> | Underlined text |
<em> | Emphasized text (semantic italic) |
<strong> | Important text (semantic bold) |
🧩 10. The <foo> Tag in XHTML (Non-Standard)
<foo>This is also context foo</foo>
⚠️ Note: <foo> is not a standard XHTML tag — it behaves like <span> and only occupies as much width as its content.
It’s typically used for educational or experimental purposes.
🎯 Conclusion
In this tutorial, you learned how to use XHTML lists and horizontal rulers with examples:
- Ordered Lists for numbered content
- Unordered Lists for bulleted items
- Definition Lists for structured data
- Horizontal Rules for section separation
- Plus, special characters, sub/superscripts, and text formatting tags
With these tags, you can structure clean, valid, and visually balanced XHTML documents that enhance both readability and presentation.
❓ FAQs about XHTML Lists and Rulers
Q1. Can I nest lists in XHTML?
Yes, you can nest ordered or unordered lists by placing one list inside another <li> element.
Q2. Is <hr> self-closing in XHTML?
Yes, it should be written as <hr /> to comply with XHTML syntax.
Q3. What’s the difference between <ol> and <ul>?<ol> shows ordered (numbered) items, while <ul> displays unordered (bulleted) items.
Q4. What are <dl>, <dt>, and <dd> used for?
They create definition lists, ideal for displaying terms and their definitions.
