Anchor Elements

on

 🔗 HTML Anchor Elements & Attributes


🧱 Structure of an Anchor Tag

<a>Link Text</a>

But this alone won’t work as a link. We need to add an attribute.

⚙️ What is an Attribute?

An attribute gives extra information to an HTML element.

✅ Attributes are always added inside the opening tag.

Example:

<a href="https://example.com">Visit Example</a>

Here:

  • href is the attribute name.

  • "https://example.com" is the value.

  • Together, they tell the browser where the link should go.

🌍 Specific vs Global Attributes

  • Specific Attribute (e.g., href): Only works with certain tags like <a>.

  • Global Attribute (e.g., draggable): Can be used with any HTML tag.

Example:

<a href="https://example.com" draggable="true">Drag Me</a>

✅ Challenge Task: Top 5 Favorite Websites

You can create a list of your favorite websites using an ordered list and anchor tags.

Example:

<h1>My Top 5 Favorite Websites</h1>
<ol>
  <li><a href="https://youtube.com">YouTube</a></li>
  <li><a href="https://wikipedia.org">Wikipedia</a></li>
  <li><a href="https://github.com">GitHub</a></li>
  <li><a href="https://stackoverflow.com">Stack Overflow</a></li>
  <li><a href="https://unsplash.com">Unsplash</a></li>
</ol>

This will show a numbered list of clickable links.

🔢 Bonus Tip: Start List From a Specific Number

You can change the starting number of an ordered list using the start attribute:

<ol start="5">
  <li>Website One</li>
  <li>Website Two</li>
</ol>

This will start the list from 5 instead of 1.

✍️ What Did We Learn?

  • Anchor tags (<a>) create links.

  • Attributes like href tell the link where to go.

  • Some attributes are specific, some are global.

  • We can combine anchor tags with lists for fun projects.

  • Always use quotes around attribute values.

Comments

Post a Comment