Should I Make HTML Anchors With 'Name' or 'Id'

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

According to the HTML 5 specification, 5.9.8 Navigating to a fragment identifier:

For HTML documents (and the text/html MIME type), the following processing model must be followed to determine what the indicated part of the document is.

1. Parse the URL, and let fragid be the <fragment> component of the URL.
2. If fragid is the empty string, then the indicated part of the document is the top of the document.
3. If there is an element in the DOM that has an ID exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
4. If there is an a element in the DOM that has a name attribute whose value is exactly equal to fragid, then the first such element in tree order is the indicated part of the document; stop the algorithm here.
5. Otherwise, there is no indicated part of the document.

So, it will look for id="foo", and then will follow to name="foo"

Edit: As pointed out by @hsivonen, in HTML5 the a element has no name attribute. However, the above rules still apply to other named elements.

HTML anchor link as name and not id

No, this is not possible. There are some work-arounds:

1. Add id property

Obviously, you could add the id property to the target element:

<h1 name="main" id="main">Main</h1>

2. Add an anchor

If the target needs to be identified by name, add an anchor:

<a name="main"/><h1>Main</h1>

But in HTML5 the name attribute for the a element is obsolete.

3. Use scripting to add the id attribute

You could add a script that will add the missing id attribute on page load:

<script>
    // find first element that has the name attribute set to "main":
    var element = document.querySelector('[name=main]');
    // copy that value into the id attribute
    element.setAttribute('id', element.getAttribute('name')); 
</script>

You should then put this script block at the end of the document, so just before the closing </body> tag.

4. Add script to the source link:

You could replace the href value with a script that will do the action based on the name attribute:

<a id="skiptocontent" 
   href="javascript:document.querySelector('[name=main]').scrollIntoView();" 
   class="">skip to main content</a>

Remark

As you tagged the question with HTML5, it should be noted that in HTML5 there is a clear moving away from using the name attribute as a target. id attributes are preferred in HTML5. That makes sense, because name values do not have to be unique, while id values have to be.

does html anchor work with any tag?

Yes this works with any tags, you can jump to any ID on the page like so:
does html anchor work with any tag? This link jumps to the related sidebar ==>

You're most probably a little confused because you need an a tag to link to the specified ID, but the ID itself can be on any tag you want. :)

<a href="#h-related">Jump to the related sidebar!</a>

Link to a specific part of a web page doesn't work

you just need to give id to an anchor like for example

<a href="#sec" id="exploreBtn">Explore</a> on pressing this you will go to sec id, which should be declared like this: <article id='sec'>...</a>

Should HTML anchors wrap the heading or stand on its own?

It can disrupt assistive technologies. In your example, when a screen reader navigates to the anchor, it has no deterministic way of knowing that it should read aloud the preceding paragraph.

Also, when you open a URL to http://somedomain.com/somepath#anchor the browser will automatically scroll to the element that has id=anchor, so it's important to put the anchor on the element that makes sense.

Any element can have an anchoring id, it does not need to be an <a/>.

Adding a #href anchor to a webpage

If you inspect the HTML on that page you'll see how it's being done.

The # sign in an anchor tag's href will tell the browser to move to the element that has a matching ID (where ID = everything that comes after the # sign).

For Example:

<a href="#MyLocation">My Link</a>

<div id="MyLocation">The anchor destination</div>

You can also include it at the end of your URL and it will take the user directly to the destination on page load.

http://en.wikipedia.org/wiki/Stack_Overflow_(website)#History

---

Related Topics