Quartz 4

Anchor Elements

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🌐 HTML Attributes & The Anchor Element (<a> Tag) – Full Notes

📌 Overview

In this lesson, we dive deeper into HTML elements by learning about:

  • Attributes in HTML

  • The Anchor (<a>) Element used for creating hyperlinks

  • How attributes modify behavior

  • Using global and specific attributes

  • Practical coding challenge using anchor tags in an ordered list

  • Extra: Using attributes like start in the <ol> tag

🧱 1. What are HTML Attributes?

HTML attributes are used to provide additional information about an element. They modify the behavior, appearance, or function of elements.

🧩 Attributes:

  • Are always written in the opening tag of an element.

  • Follow the syntax:

    attributeName="attributeValue"

✅ Example:

<a href="https://example.com">Click here</a>

  • href is the attribute name.

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

  • This tells the browser where the link should go when clicked.

🔗 2. The Anchor Element (<a>)

The anchor element is used to create hyperlinks in HTML.

🧬 Basic Structure:

<a href="URL">Link Text</a>

  • <a> = start of anchor tag

  • href = attribute that tells where the link goes

  • Link Text = what users see and can click

  • </a> = closing tag

🎨 Result on the Webpage:

  • Blue, underlined text by default.

  • Becomes clickable, takes you to the linked URL when clicked.

🚫 Without the href Attribute

If you write:

<a>Click me</a>

  • This will display the text “Click me”

  • BUT it’s not clickable — it’s just plain text.

  • The anchor element alone does not function without the href attribute.

🧠 3. Syntax Breakdown of Attributes

<a href="https://example.com" target="_blank" draggable="true">Visit Site</a>

Let’s break it down:

PartMeaning
href="..."The destination URL
target="_blank"Opens the link in a new tab
draggable="true"Allows the user to drag this element (a global attribute)

✅ Multiple attributes are separated by spaces and all live inside the opening tag.

🧰 4. Types of Attributes

🔹 Specific Attributes

  • These are only valid for certain HTML elements.

  • Example:

    • href ➤ valid for <a>

    • src ➤ valid for <img>

🔸 Global Attributes

  • These are universal, meaning they can be applied to any HTML element.

  • Examples:

    • id

    • class

    • title

    • style

    • draggable (e.g., draggable="true")

📝 5. Practical Coding Challenge

🎯 Task:

Create a webpage that shows your Top 5 Favorite Websites, using:

  • <ol> for ordered list

  • <li> for list items

  • <a href="..."> inside each <li> to create clickable links

💻 Example Code:

<h1>My Top 5 Favorite Websites</h1>
<ol>
  <li><a href="https://producthunt.com">Product Hunt</a></li>
  <li><a href="https://dribbble.com">Dribbble</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>

🔍 Result:

A numbered list with each item being a clickable link to your favorite website.

💡 Notes on href

  • The href value can be:

    • A full URL (https://example.com)

    • A relative path (/about.html)

    • A page fragment (#section1)

    • An email link (mailto:someone@example.com)

    • A phone link (tel:+1234567890)

🧪 Bonus Challenge: Use the start Attribute

The <ol> tag supports a special attribute called start, which tells the browser what number to begin the list from.

🧾 Syntax:

<ol start="5">
  <li>Link 1</li>
  <li>Link 2</li>
  <li>Link 3</li>
</ol>

🔍 Result:

  1. Starts from 5, not 1:

      1. Link 1
      1. Link 2
      1. Link 3

📘 How to Use:

  • Add it to the opening <ol> tag

  • Like this:

<ol start="5">

🧠 Learning Tips

  • Attributes are powerful: They add flexibility and interactivity.

  • Practice nesting: Like placing <a> inside <li>, and <li> inside <ol>.

  • Use MDN Web Docs (developer.mozilla.org) to explore more about tags and their attributes.

  • VS Code helps with auto-completion and suggestions for tags and attributes.

📚 Summary Table

ConceptExplanation
Anchor Tag (<a>)Used to create hyperlinks
hrefAttribute that sets the link destination
Attribute Syntaxname="value" inside the opening tag
Global AttributesWork on all tags (e.g., draggable, id)
Specific AttributesOnly work with certain tags (e.g., href for <a>)
start AttributeSets starting number for <ol>

✅ Practice Exercise

  1. Create an <h1> for the heading

  2. Use <ol> for ordered list

  3. Add five <li> elements

  4. Inside each <li>, include an <a href="...">Website Name</a>

  5. Test by clicking on the links

  6. Add start="5" to <ol> as an extra challenge

🧠 Review Questions

  1. What does href do in an anchor tag?

  2. Can you put an <a> tag inside a list item?

  3. What’s the difference between global and specific attributes?

  4. How do you start an ordered list from number 5?

  5. What happens if you omit href in an anchor tag?

References

Graph View

Backlinks