Should I make HTML Anchors with 'name' or 'id'?

html

best-practices

responsive-design

accessibility

byAnton Shumikhin·Dec 17, 2024

In a nutshell, you should favor the attribute id over name when making HTML anchors. The id attribute offers a unique formula to identify page elements, an ability vital for CSS styling and JavaScript manipulation. HTML5 specifically advocates id for anchor creation:

<!-- Creating a walkway for the 'Jump to Tips' -->
<a href="#tips">Jump to Tips</a>

<!-- Creating a docking station for the walkway -->
<div id="tips">Newsflash - You've arrived at the Tips section!</div>

The name attribute is dated for anchors, and in the name of clean and HTML5-compliant coding, it's id all the way!

Best practices: Anchoring with 'id'

When creating HTML anchors, it pays to adhere to the most recent standards, optimizing your coding happiness and future-proofing your work:

Single and ready to mingle IDs: Be sure each id is unique within a page as duplicate ids are more attention-seeking than your average toddler.
CSS and id - a love story: The :target pseudo-class gives ability to style an element based on if it is activated by a fragment identifier (our friend the id present in the URL).
Minimalism is key: Keep your code lean by not wrapping elements in extra <a> tags simply for anchoring purpose. Remember, we're not wrapping presents here!
Structured living: Using id directly on elements like <h1> or <section> results in a streamlined, organized HTML that any OCD dev would be proud of.

Expert advice: 'id' Pro Tips

arn to utilize the id attribute to its full potential:

IDs ruling the world: Browser creates global variables for elements with id, offering quick access like a backstage pass in a JavaScript concert.
No identity crisis: Just choose one — either name or id on the same element to prevent a case of mistaken DOM identity.
The future is now: Use id for anchor making and stay on the bleeding edge of HTML evolution.

Decoding compatibility: 'id' vs 'name'

When comparing id and name, it is important to consider compatibility factors:

Browser Time Machine: Browsers from the middle ages (think Netscape 4) may not support id. But like a good whiskey, id has only gained popularity and is your best bet for full compatibility.
Accessibility Matters: Screen readers and assisted technologies are best buddies with proper ID referencing, making it essential for accessibility.
SEO Delight: Correctly used id attributes create a beautiful structure and meaning to your content, letting search engines appreciate your website's structure and sophistication.