The Most Important Tag in HTML

Transcript

Hi. How are you today? How is your energy? 

Last lesson we started building our table of contents.  We have an ordered list and list items with section titles.  To finish it off, we are going to introduce some new tags – the anchor tag and the HREF Tag.

We need to send users to the correct heading, when a link in the table of contents is clicked. To do this, we need to 

1. identify the location of each heading on the page and , 

2. We need to tell the browser where to go when the user clicks my links 

Lets start by identifying the location of my headings on the page. To do this we identify a tags location by giving it an id attribute. I can give my IDs whatever values I want, but this value is just going to name the tags location. So why not make it simple and easy to remember all join each word from the heading, together with the hyphen.

And there we go. I've got my ID values. Next, I'll use the <a> tag for anchor. An anchor holds text that describes the link. When clicked, the anchor tag sends you to a specific location on a web page. To make the text in the list item an anchor, you’ll put the <a> tags around the list item text. 

Next, I'll need to tell the browser where to go when the user clicks my links.  For this, I'll use an attribute called <href> . Ill code the attribute into all of my anchor tags.  Since I've already identified the locations of my headings. I just need to copy and paste the ID values for my headings into the values of my hrs. 

We need one final character in our H read value to make this all work, the pound sign. This was the anchor know that it's looking for an ID.  What's amazing about anchors, is that you can link to more than just sections on your own web page, you can link to other websites. All you have to do is copy the address for a website from the search bar, and paste it into the <href> value. 

Also, make sure to put some text between the <a> tags. This is what shows up in the browser. So, give it any text, it won't show up. 

One last thing. I know this is ridiculous, but it helps me remember the href attribute. It’s like the sound a dog makes when it’s angry: hhhrrrf . Sometimes you have to get creative to remember code that you need to use in your files.

Hey. Nice work. We covered a lot.

See you again soon.