Links, lists and images

Some tags need more than the text inside them. A link needs to know where it goes, and an image needs to know which file to show. That extra information is an attribute, and it lives in the opening tag.

<a href="https://runsnip.com">Go to RunSnip</a>
<img src="cat.png" alt="A cat asleep on a keyboard">

href and src and alt are attributes. <img> has no closing tag, because it has no content to wrap — the file is the content.

alt is not optional in practice. It is what a screen reader says, and what shows when the image does not load.

Lists

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

<ul> is an unordered list, <ol> a numbered one, and <li> is one item. The items go inside the list — that nesting is what makes them a list rather than three unrelated lines.

Try it

Add a second link that opens this page's own site. Then swap <ul> for <ol> and watch the bullets turn into numbers without touching the items.