Anchors Aweigh! Link to the Beach with HTML
Go on an adventure with Daisy using the anchor tag to make links to all kinds of amazing web pages. Learn how to use the ID attribute to make links to in-page content.
Click here for the full video transcript
>> DAISY: Hey foxy friends, I found something amazing on the beach today. It’s an anchor! I love anchors, because in HTML the “anchor”–or “a”–tag allows you to move from one web page to another. You probably know anchors by their more common name, link. To make something a link, simply wrap it in the “a” tag, and give it the attribute “href”. Attributes provide additional information about an element. In this case, href specifies the page I want to go to. Attributes always go in the opening tag, and usually come in value/pairs. This morning I was in kitchen.html making breakfast, when I opened a new window and saw the sun shining. “What a perfect day to go surfing,” I thought. So I made a link to the beach, but the beach is in another directory, so the href attribute in my a tag looked like this:
On the beach there were several elements with the class crab scuttling through the sand. I stopped to talk to one with the id attribute kamaboko. Kamaboko was a unique crab. He said nothing else on the beach’s index.html page had an id exactly like his, and if I wanted to visit him again, I could simply link to his id, like this:
As a new wave washed on the shore, a flock of seagulls landed on the beach. I asked them where they came from and they said,
>> SEAGULL: We just flew in from afosfanclub.com
>> DAISY: I said, “wow, that’s an absolute url, so if I wanted to link there, the href attribute for my anchor tag would be http://www.afosfanclub.com. That’s so far away! How long did it take you to get here?”
>> SEAGULL: All night and day.
>> DAISY: They said.
>> SEAGULL: We couldn’t get away.
>> DAISY: Next time you should just use an anchor tag. As the seagulls were slowly disappearing from my view… disappearing from my view… I decided to get in the ocean, so I linked to the child directory, ocean. I swam out into the water to surf, but then I realized something… I had been surfing all along! and I was exhausted. So I started swimming back to shore, when I spotted an anchor! I thought kamaboko would like to see it, so I linked directly to him. Kamaboko had already tucked in for an afternoon nap, and I didn’t want to wake him, so I linked back home.
It was quite an adventure, thank you for watching. Now I want to hear all about your adventures!
We used the anchor tag to make links to all kinds of amazing web pages today, and we learned how to use the ID attribute to make links to in-page content.
Next time we’ll find out how to make our web sites pop with images.