HTML Fundamentals: Hyperlinks, Lists, and Tables
Hyperlinks
The anchor tag <a> creates navigable links to external resources or internal page sections. The href attribute specifies the destination URL, while the target attribute controls how the linked document opens.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link Examples</title>
</head>
<body>
<!-- Opens in a new browser tab -->
<a href="https://www.example.com" target="_blank">Visit Example Site</a>
<!-- Opens in the current tab, replacing the current page -->
<a href="https://www.documentation.org" target="_self">View Documentation</a>
</body>
</html>
Lists
HTML provides two primary list types: ordered lists <ol> for sequential items and unordered lists <ul> for non-sequential collections. Each list item is wrapped in <li> tags.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>List Examples</title>
</head>
<body>
<!-- Ordered list with default numeric markers -->
<ol>
<li>First Step</li>
<li>Second Step</li>
<li>Third Step</li>
</ol>
<!-- Ordered list with uppercase letter markers -->
<ol type="A">
<li>Phase Alpha</li>
<li>Phase Beta</li>
<li>Phase Gamma</li>
</ol>
<!-- Unordered list with default disc markers -->
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
<!-- Unordered list with circle markers -->
<ul type="circle">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>
</body>
</html>
Tables
Tables organize data into rows and columns. The <table> element contains <tr> rows, with <th> for header cells and <td> for data cells. The border attribute defines border thickness, cellspacing sets spacing between cells, and width controls table dimensions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Examples</title>
</head>
<body>
<!-- Basic table structure -->
<table border="3" cellspacing="0" width="600">
<tr align="center">
<th>ID</th>
<th>Product Image</th>
<th>Product Name</th>
<th>Manufacturer</th>
</tr>
<tr align="center">
<td>A100</td>
<td><img src="product-a.jpg" width="80" height="60"></td>
<td>Widget Alpha</td>
<td>TechCorp</td>
</tr>
<tr align="center">
<td>B200</td>
<td><img src="product-b.jpg" width="80" height="60"></td>
<td>Widget Beta</td>
<td>DataSystems</td>
</tr>
</table>
<hr>
<!-- Table with cell spanning -->
<table border="3" cellspacing="0" width="600">
<tr align="center">
<!-- colspan merges two columns horizontally -->
<th colspan="2">Product Details</th>
<th>Name</th>
<th>Supplier</th>
</tr>
<tr align="center">
<td>X001</td>
<td><img src="item-x.png" width="80" height="60"></td>
<td>Item X</td>
<td>Supplier A</td>
</tr>
<tr align="center">
<!-- rowspan merges two rows vertically -->
<td rowspan="2">Y002</td>
<td><img src="item-y1.png" width="80" height="60"></td>
<td>Item Y1</td>
<td>Supplier B</td>
</tr>
<tr align="center">
<td><img src="item-y2.png" width="80" height="60"></td>
<td>Item Y2</td>
<td>Supplier C</td>
</tr>
</table>
</body>
</html>
The colspan attribute allows a cell to span multiple columns, useful for grouping headers. The rowspan attribute enables a cell to extend across multiple rows, helpful when grouping related data vertically.
