Links, lists and tables

What you will learn

• links: <a href="…">, absolute and relative addresses, target, mailto:
• bulleted lists <ul> and numbered lists <ol> made of <li> items
• tables: <table>, <tr> rows, <th> heading cells and <td> data cells

Understand the idea

A link is made with the <a> tag, short for anchor. The href attribute says where it goes and the words between the tags are what people click: <a href="https://example.com">Visit</a>. A full address is an absolute link. A short one such as about.html is relative to the current page. href="#top" jumps to the element with id top on the same page, and mailto: opens an email. target="_blank" opens a new tab; pair it with rel="noopener" for safety. Write link text that makes sense alone, not just "click here".

Lists group related items. <ul> is an unordered list shown with bullets, <ol> is an ordered list shown with numbers, and every item is an <li>. A list can contain another list inside an item, which creates an indented sub-list.

Tables show data in rows and columns. <table> is the whole table, each <tr> is a row, <th> is a heading cell (bold and centred by default) and <td> is a normal data cell. Every row should have the same number of cells. <caption> gives the table a title, and colspan lets one cell stretch across several columns. Use tables only for data, never to arrange a page layout.

Example

<a href="#top">Back to top</a>

<ol>
  <li>Mix the dough</li>
  <li>Let it rise</li>
  <li>Bake</li>
</ol>

<table>
  <caption>Pizza prices</caption>
  <tr><th>Size</th><th>Price</th></tr>
  <tr><td>Small</td><td>150</td></tr>
  <tr><td>Large</td><td>320</td></tr>
</table>

Your turn: code to type and practise

Build a timetable table with a heading row of three th cells (Day, Subject, Time) and at least two rows of three td cells. Then add an ordered list of three steps and a link to #top.

← Elements, attributes and text formattingImages, audio, video and embeds →