Showing off your projects: links

In the previous section, we covered how to embed media from external sites into our portfolio. Now we’re going to talk about one of the most important parts of a web page—really the thing that makes it a “web”—links!

The way you make a link is slightly different than how you’ve made other things in HTML so far. Let’s say I want to link to a website. In this case, it’s the site for a conference called Roguelike Celebration. The address of the web site is https://roguelike.club.

To make a link to this we need to use the anchor tag, which is just given by <a> and </a>. We put the text we want to appear as the link between the two tags, not the text of the address. So I might write something like

<a>The Roguelike Celebration conference</a>

but I’m going to put the address inside the starting tag, so it looks like this:

<a href="https://roguelike.club">the Roguelike Celebration conference</a>

This thing that went inside the start tag is a called an attribute, and this is our first example of an attribute but it won’t be our last! All attributes, though, follow the formula of attributeName="attributeValue" where there’s no quotes around the name of the attribute, but always quotes around the thing you’re putting in the attribute.

Putting this all together with what we’ve seen before with the paragraph tags, my description for this project is going to be

<p>In 2020 I worked on a project that involved procedural generation of poetry forms that I used to write actual poems. By working with the generator, I rediscovered my love of writing poetry and got to think an awful lot about what poetry even is. Linked above is the recording of a talk I gave at <a href="https://roguelike.club">the Roguelike Celebration conference</a> in 2020.</p>

and it’s going to give me a link that I can click on that says “the Roguelike Celebration conference” and will take me to their website.

Before we go onto talking about including images in the next section, I want to say a few words about link text. It’s an important part of accessibility to include descriptive names of links. Don’t say “here”, don’t say “this”, but rather try to include some longer text describing what they’re about to click on and where it will go. It’s helpful for vision impaired people who use screen readers but it’s also just nice for everyone else, too.

Now, let’s learn about embedding images.