Hello, in this HTML Crash Course video, we're gonna cover how to use links. A link is just something that you can click on, and you'll perform an action. The most common and basic action in web development for a link is for to take you to a nova page, whether that's a page on your website, so it's on the same server, or it's a page on another website of yours. Or if it's an entirely different website, we're just going to make it go to Google. But you can easily make it go to wherever you want. To do this, you need to use something called the anchor tag to do that you put less than a href.

And the href is the actual link to the file that you want to access. I say file, because even though let me just put the link that we're going to use, I'm going to use Google's own page google.com Even though google.com, they still have file day still accessing probably something like index dot php or index dot HTML, it's still accessing a file, even though you're accessing the URL this when you go into it accessing the file. So that's the reason I'm saying for don't want to just say website because if you go into another file on your own website, then it's technically you're not changing website you're changing file. So to close this and close in time tag, and inside here actually I'm going to save this and show you up and if I refresh my browser, as you can see, nothing's happened. I can't click on anything.

The reason is because there's nothing to click on. If you want to make something clickable, you have to enclose it in a anchor tag blog. So I'm going to put Google PPC Go back refresh, that you can see hello world, I can't click because it's not enclosed within an anchor tag. If I click on this, however, it is enclosed. And as a result, I was able to click on it and go to Google. Another thing you may have noticed it's got some default styling.

So if we just inspect the element in our web browser, as you can see, it's got a color text decoration, we should underline and a cursor as well because as you can see the color blue score on the right and when I hover over it, it shows this hand symbol, which is the general, the universally recognized symbol for being able to click on some text or on some on an object. So we've done this you might be wondering, I said, enclosed does that mean I can put anything inside? Yeah, there's no reason why you call something's gone. Copy and paste this. And inside here, I'm going to put a h1 tag under Hello, go. And obviously, because this is a block level element, this will be on a separate line as you can see bigger, but it still performs the exact same functionality.

Let me show you something else. You can also do it this way around. So if I were to put the h tag outside either page three now just do vary it up a little bit. Save that for a refresh. Oh, sorry, started with the h1, refresh. And there we go.

So if I click on that, it's still open, probably thinking why would I want to choose one or the other? Imagine if I only wanted the Google aspect clickable and I wanted Hello to just be regular text. That is the reason why you would do something along these lines, you can see the difference right there, click on Hello, button, click on the Google part and he takes me to Google. So now let me show you something else. Let's refresh the page. I'm going to click tab.

As you can see, it's gone to a clickable element. That's what to click in tab.on. The web browser for click it again takes me to the next one, and takes me to the next one for click, it takes me to the url blahdy blahdy blah, and this is fine. This is in a very linear fashion. It tabs as the elements are in the code in terms of the order, but you might want the order to be different. To do that.

You just add a simple attribute called index equals just started off at one. And now before actually I just read like today forward to tub in next week. To find the tab index equals three, save that refresh. If I click tab, tab tab, order is the same because we want to free what will happen if I change it to a three and change this to a two, refresh page still looks the same, obviously no reason why you shouldn't want to change the tabbing order picked up because the first one, ah, on the second click is taking me to this one right here because it was next in the tab index, even though this element came before and if I click tab again, it goes up. If I click tab to URL, then takes me to the first tab and the second one down here, and then the third one here.

So that's it for links in HTML. If you have any questions, feel free to post it on my education platform, sonar learning.co.uk. There'll be a link in the description to this code from this video the source code from every other video. If you liked the video please does now if you do, please let us know as well. We're always looking to improve. And as usual, thank you for watching and I hope you have a great day.