Now if you've never heard of what an Anchor Link is, that's perfectly fine, we're going to do a little demo to see what an Anchor Link does and that may also help explain why you'd want to use them.

Now, we have a menu and imagine that on the link to here from your Facebook page or Twitter, or something, you want to direct your users directly to the mild element. So you want to send them to this section of the page.

What we can do is we can use an Anchor Link, so instead of just sharing the menu link, we can have them directed to this part of this page, and so as you can see when I clicked on the word mild, it auto scrolled right to where we wanted to be.

Now if I open this up in a new window, you can see that the URL is structured a little bit different. https://jordanhudgens.github.io/digital-literacy-html-css/menu.html#mild, so this # gives you the name of the Anchor Link.

If I hit enter here, I'm not just taken to the menu.html page, I'm also auto scrolled down right to the section that I want to be at, so that's what we're going to learn how to do in this tutorial.

Now, I have our starter code here and so we're going to start with the very first one, so if I switch over to menu.html and at the top I'm going to rid of this lorem ipsum text and I'm going to start off and say that this is going to be spicy, which is going to be our first link.

From here I'm going to create an A tag.

menu.html

<div class="square-text-wrapper">
    <a href="#spicy" name="spicy">
        <h1>Spicy</h1>
    </a>

    <ul>
        <li>Lorem ipsum dolor sit amet consectetur, adipisicing elit.</li>
        <li>Cupiditate facilis tempora mollitia, nulla perspiciatis corporis quisquam!</li>
        <li>Quis repellat iusto distinctio quas iure eaque aut?</li>
        <li>Explicabo in omnis quam aliquid molestias optio cumque?</li>
    </ul>
</div>

What we're doing here is we're saying that this is the Anchor tag's name and then here is the link, so if you put both of those there and then wrap up the H1 tag then this should work. So let's go test this out.

If you come back to the menu, hit refresh, you can see we have some style issues but if I click on spicy I am taken exactly to where I want to be.

Let's fix a couple of these style items. If I right-click and click on inspect, you can see that this is going to the square, then the square-text-wrapper and then the H1 tag. So what I can do here is I can either apply this to the H1 tag or I can go one level above it into the A tag here.

I want to say that I want the text decoration to be none, so that's going to remove that ugly blue line, but did you also notice that kind of blue selection? Well, that is called an outline.

If we click on these hover states, you can play around and see when it is on focus that is when that little outline is going to surround the element, so what we want to do is we want to say when this is focused, we want an outline of none and then that's going to remove it.

Now, we're actually going to have to create two different style definitions here, one for the focus state and then one just for the A tag. So let's go into our menu.html and you can see that we don't have any way of selecting this without going into the square-text-wrapper.

I think if I want to use Anchor tags anywhere else in this application, I may just want to have a class dedicated to it. So I'm going to have a class called Anchor Link,

menu.html

<a href="#spicy" name="spicy" class="anchor-link">
    <h1>Spicy</h1>
</a>

We're going to put this into our helper.css, I'm going to have an anchor selector or anchor-link and also the focus state.

helpers.css

.anchor-link {
    text-decoration: none;
}

.anchor-link:focus {
    outline: none;
}

Let's go to menu.html and make sure that we've imported our helper.css, and it looks like we haven't, so add that in.

Hit save, now hit refresh and it's working.

You can see that there's no outline or line underneath it, so this is giving us a behavior that we're looking for. Now let's go and let's populate that in all of the other sections too,

I'm just going to copy everything here and then we're just going to replace it four times. So the first one was spicy, the next one is going to be medium, after that one we'll have mild, and then we'll just make up one for the last one.

We'll say this one is just no flavor, I'm not sure who's going to order it but someone might. Okay, no flavor, hit save and hit refresh and now we have all of those links.

That is working nicely and it looks like each one of these other elements is there as well. That's how you can create an Anchor Link in HTML.