Brainlag
  1. Web
  2. Foundations
02/38

Attributes, links and images

25 min4 exercises
  1. 1Attributes add details
  2. 2Where a link goes
  3. 3Images need alt text
  4. 4Run it: a band page
  5. 5Link to the lyrics
  6. 6An image people can hear
  7. 7A picture that never appears
  8. 8An album card that links out

Learn

Attributes add details

Tags say what something is. Attributes add the details: where a link goes, which picture to show. They live inside the opening tag, as name="value":

HTML
<a href="https://example.com/tickets">Buy tickets</a>

Here a is the element (a link, short for "anchor"), href is the attribute, and the text between the tags is what people click. Attribute values go in quotes. Forget a closing quote and the browser keeps reading until it finds one, swallowing whatever text sits in between.

Learn

Where a link goes

An href can be:

  • absolute: a full address with https://, for another site
  • relative: a path on this site, like /web/ or about.html
  • #gigs: a jump to the element with id="gigs" on the same page

Link text should make sense on its own. "Buy tickets" tells you where you are going; "click here" does not, and people using a screen reader often jump from link to link hearing only the text.

Learn

Images need alt text

An image is one tag with no closing tag:

HTML
<img src="/assets/noodle/happy.svg" alt="Noodle waving" width="120">

src is where the picture lives. alt is the text read aloud by screen readers and shown if the picture fails to load, so describe what the picture shows or does. width sets the size in pixels; give only one of width or height and the picture keeps its shape.

Try

Run it: a band page

Press Run and the page appears in the preview under the editor. Change some text or a colour and run it again.

example.html to run
<h1>The Paper Planes</h1>
<img src="/assets/noodle/happy.svg" alt="The band's mascot, a blue noodle, waving" width="120">
<p>Indie pop from Leeds. New single out Friday.</p>
<ul>
  <li><a href="https://example.com/tickets">Buy tickets</a></li>
  <li><a href="#gigs">Jump to the gig list</a></li>
</ul>
<h2 id="gigs">Gigs</h2>
<p>12 March, Brudenell Social Club</p>

Practice

Link to the lyrics

Turn the words Read the lyrics into a link that goes to https://example.com/lyrics.

exercise_1.html to run
<h2>Neon Rain</h2>
<p>Read the lyrics</p>

Practice

An image people can hear

Add an image of Noodle under the heading. Its file is /assets/noodle/celebrating.svg. Make it 150 pixels wide and give it alt text that says what it shows (more than one word, and not just "image").

exercise_2.html to run
<h2>We won the school music prize</h2>
<p>Thanks to everyone who voted.</p>

Break/fixFix the bug

A picture that never appears

The gig poster should show Noodle's happy face, but the page shows only the alt text (or nothing). Fix the image tag.

exercise_3.html to run
<h2>Gig poster</h2>
<img scr="/assets/noodle/happy.svg" alt="Noodle smiling" width="120">

Your turn

An album card that links out

Build a card for the album Night Swim from nothing:

  • an h2 with the album name
  • the cover, /assets/noodle/curious.svg, 200 pixels wide, with alt text that describes it
  • a link with the text Listen on the band's site that goes to https://example.com/night-swim
  • a link with the text Skip to the track list that jumps to an h3 further down with the id tracks

On your own. Hints open after your first check.

exercise_4.html to run

  
  

  

  





    
    

    

    
    Step 1 of 8
    

      
      
    

    
  

    
    
  

  

    
HTML, CSS and JavaScript