Creating Hyperlinks in HTML with Anchor Elements

You know that feeling when you're reading an article online and a blue, underlined word catches your eye? You click it, and whoosh—you're suddenly on a completely different website, learning something new. That magic trick is the work of a humble but powerful HTML element: the anchor tag. It's the digital doorway that connects the entire web.

Today, we're going to become door-makers. We'll learn all about the anchor element, and in the process, get a solid understanding of HTML attributes. Think of attributes as the settings or instructions you give to an HTML tag. They’re what turn a plain piece of text into an actual, clickable link.

Let's look at the basic skeleton of an anchor element, which uses the <a> tag:

<a>This is just text</a>

See that? We've got our opening tag (<a>) and our closing tag (</a>). But if you wrote this code, nothing special would happen. It would just look like normal text. That's because right now, our anchor tag is empty. It's a door with no destination. To make it a real hyperlink, we need to give it an instruction using an attribute.

Attributes always go inside the opening tag, right after the tag name and before the closing angle bracket >. They add extra information to the element. For a link, the most important information is: where should this go?

The structure of an attribute looks like this: name="value"

We have the attribute name, an equals sign, and then the value wrapped in quotation marks. You can add multiple attributes to a single tag—just separate them with spaces inside that opening tag.

For the anchor element, the special, must-have attribute is href. This stands for "hypertext reference." It's where you put the web address, or URL, that you want to link to.

So, our inactive text becomes an active link like this:

<a href="https://www.example.com">This is NOW a link</a>

Without the href, you just see the text. With it, your browser styles it (usually in that familiar blue with an underline) and makes it clickable. Clicking it will take you straight to the URL you specified.

Now, href is what we call a specific attribute. It's reserved just for the anchor tag. Every HTML element has its own set of these special-purpose attributes. But there's another category: global attributes. These are universal settings you can apply to any HTML element.

An example is the draggable attribute. You can add draggable="true" to your anchor tag:

<a href="https://www.example.com" draggable="true">Draggable Link</a>

Once you set this, you can actually click and drag that link around on your page. Without it, trying to drag would just highlight the text. This shows the power of attributes—they change the element's behavior.

So, to recap quickly:

• Specific attributes (like href for <a>) are unique to certain elements.
• Global attributes (like draggable) can be used on any element.

Got it? Let's put this into practice with a fun exercise. We're going to create a simple webpage that lists your top five favorite websites.

Your Mission: Build a "My Favorites" List

We'll start with an <h1> heading, but the goal is to create an ordered list (that's the <ol> tag you learned earlier) where each item is a clickable link.

Your finished product should look like a neat list numbered 1 through 5, where each website name is a blue, underlined link. Remember, the list numbering comes from the <ol> and <li> tags. The anchor tag inside the list item only provides the clickable link text and destination.

Here’s your task:

1. Create an ordered list (<ol>).
2. Inside it, add five list items (<li>).
3. Inside each list item, place an anchor tag (<a>).
4. For each anchor tag, add the href attribute with the full URL of your favorite website (e.g., href="https://www.producthunt.com").
5. Type the website's name as the clickable text between the opening and closing </a> tags.

Go ahead, pause here and try it! Once you've got your five links working, come on back.

---

How Did You Do?

Let's walk through the solution together. The structure involves nesting: the anchor tag lives inside a list item, which lives inside the ordered list.

<ol>
  <li>
    <a href="https://www.producthunt.com">Product Hunt</a>
  </li>
</ol>

Here’s the step-by-step for that first link:

1. The <ol> and <li> tags create the list structure.
2. We write the opening anchor tag: <a.
3. We add the attribute: href=.
4. We provide the value (the URL) inside quotes: "https://www.producthunt.com".
5. We close the opening tag: >.
6. We add the visible link text: Product Hunt.
7. We close the anchor tag: </a>.

Why the quotes around the URL? In code, we use double quotes to mark a piece of normal text (a "string") and differentiate it from the special reserved words like a or href. The URL is just text for the browser to read, so we wrap it up.

Once you repeat this for all five sites, you'll have your own personalized portal page!

Bonus Challenge: Control Your List

Let's tweak our list using another attribute. Head over to the Mozilla Developer Network (MDN) documentation for the <ol> tag. Look at its attributes. See one called start?

Your new challenge: change the start attribute so your list begins at number 5 instead of 1. Your goal is a list numbered 5, 6, 7, 8, 9.

Remember, attributes go in the opening tag. So, find your <ol> tag and modify it:

<ol start="5">

That's it! The start attribute tells the ordered list which number to begin with. Refresh your page, and your list should now count up from 5. Pretty cool, right?

Your Actionable Takeaway

Before you move on to the next topic (image elements!), take two minutes and do this:

1. Open your code editor.
2. Create a new file and build that ordered list of your five favorite websites with proper anchor tags.
3. Change the start attribute to a different number. This tiny, hands-on practice reinforces everything—nesting elements, using specific attributes (href), and applying global/specific list attributes (start).

The anchor tag is your first real step into making interconnected web pages. You’re no longer just displaying information; you’re building pathways. Keep those links handy, and I’ll see you in the next lesson where we learn to make our pages visual with the image element

Lihat juga