Many web pages turn out to be lists of links in HTML5 and CSS3 programming. Because lists and links go so well together, it's good to look at an example. Notice this list of links to books written by a certain author.
This example has no new code to figure out, but the page shows some interesting components:
The list: An ordinary unordered list.
Links: Each list item contains a link. The link has a reference (which you can't see immediately) and linkable text (which is marked like an ordinary link).
Descriptive text: After each link is some ordinary text that describes the link. Writing some text to accompany the actual link is very common.
This code shows the way the page is organized:
<!DOCTYPE html> <html lang = "en-US"> <head> <meta charset = "UTF-8"> <title>listLinks.html</title> </head> <body> <h1>Some nice programming books</h1> <ul> <li><a href = "http://www.aharrisbooks.net/haio"> HTML / CSS / JavaScript ALL in One for Dummies</a> A complete resource to web development</li> <li><a href = "http://www.aharrisbooks.net/jad"> JavaScript / AJAX for Dummies</a> Using JavaScript, AJAX, and jQuery</li> <li><a href="http://www.aharrisbooks.net/pythonGame"> Game Programming - the L Line</a> Game development in Python</li> <li><a href="http://www.aharrisbooks.net/h5g"> HTML5 Game Development for Dummies</a> Building web and mobile games in HTML5</li> </ul> </body> </html>
The indentation is interesting here. Each list item contains an anchor and some descriptive text. To keep the code organized, web developers tend to place the anchor inside the list item. The address sometimes goes on a new line if it's long, with the anchor text on a new line and the description on succeeding lines.
Normally, the tag goes at the end of the last line, so the beginning tags look like the bullets of an unordered list. This makes it easier to find your place when editing a list later.