Should I use 'Name' or 'ID' as an HTML Anchor?

Question

I'm a little confused, I want to create a link in my HTML page that will jump to a specific section in another page. I saw examples with 'Name' as an anchor and I saw examples with 'ID'.

As I understood 'Name' is an old style and 'ID' is the new style that supported by a new browsers. But what if I want to be sure that my link will work BOTH in old and new browsers? Can I somehow combine 'Name' and 'ID' together so that my link will work in any browser no matter if it's old or new?

A simple example code will be nice.

Thanks!

Use ID. It is unique,`name` is not and you can't link to 2 different elements from the one link. Any browser that is too old to not support `id` is too old to worry about supporting. We're talking "Browser War" era browsers. — Jon P, Feb 07 '20 at 05:08

score 1 · Answer 1 · edited Sep 18 '22 at 17:37

To answer your question directly, yes, you can use both name and id to refer to named anchors.

However, there are two caveats that you must be aware of:

According to the W3C, the name attribute is obsolete. Even so, every modern browser will still allow it.
In the context of linking, the name attribute is tied to the a element rather than a div or span, so it must be used in that context. If you try to use it in a div, it will not work for linking. It may appear to work if you also include the id attribute, but the browser is using id to locate your link, not the name attribute.

So the following will work in all modern and ancient browsers:

<a name="footnote1" id="footnote1"></a>

But practically speaking, there is no longer any reason to use <a name="???"> in any document. Linking with <span id="???"> is very widely supported and unless you plan on supporting 1990's era AOL browsers, there is really no point.

score 0 · Answer 2 · answered Feb 07 '20 at 06:32

0

As far as I know, name attribute cannot be used as anchor reference in a URL. Also, name cannot be used on all kinds of HTML elements. For example, <a> elements have no valid name attribute.

The name attribute is used for form fields and is not unique like the id attribute. See here: Difference between id and name attributes in HTML

Use id attribute for for anchor, it should work as expected in any browser. Have a look at this answer for implementation details: Should I make HTML Anchors with 'name' or 'id'?

answered Feb 07 '20 at 06:32

Gaurish

1
3

I see many examples using 'Name', for example: https://www.coffeecup.com/help/articles/how-do-i-link-to-different-sections-on-the-same-page-html-editor, so my question still wasn't answer, can I combine both "Name" and "Id" together? Can it be a problem? – Daniel Jones Feb 07 '20 at 10:04
HTML5 does not support name attribute for `` tag (I mentioned tag because that is used in the example you have attached). There is no point in using `name` and `id` together since your link can have only one target. Please see the following page, under "Definition and Usage" and "Browser Support" section: https://www.w3schools.com/tags/att_a_name.asp It is standard practice to use `id` for links and `name` tags for form elements. There should not be any problem since all modern browsers support the HTML5 standard. – Gaurish Feb 07 '20 at 10:34
But still there are people who are using old browsers, and I want my site to support them also. So what I'm trying to understand is what will happen if I'll use both "Name" and "Id" as an anchor? Will it not work in both old and new browsers? What problem can it make? If the browser support HTML5 then it will use the "Id" anchor, if it's an older browser then it will use the "Name" anchor, so were is the problem? – Daniel Jones Feb 07 '20 at 11:05
1

My question is, how old of a browser are you trying to support? HTML 4 spec was first released around 1998 (don't quote me on that, though) and it had support for `` tags. It should work in **both old and new browsers** (although old is a relative term, anything before the year 2000 could be considered ancient). Sure, you could put both `name` and `id` tags in your target element and set them to the same value, reference that value in your anchor and things should work fine. This barely makes any difference than if you had just used id. – Gaurish Feb 07 '20 at 13:04
OK, That's what I wanted to know, that it's not a problem to use them both. I know that there are still people who are using Windows-XP and probably their browser is very old. So if I can support them also, then why not? Thanks! – Daniel Jones Feb 07 '20 at 19:04

score -1 · Answer 3 · answered Feb 07 '20 at 06:26

Id is better way to do. Please see the below -

<ul class="tabs_list_block">
  <li><a href="#menu1">Menu1</a></li>
  <li><a href="#menu2">Menu2</a></li>
  <li><a href="#menu3">Menu3</a></li>
  <li><a href="#menu4">Menu4</a></li>
</ul>

<div class="tab_content">
  <div id="menu1" class="tab_content_row tab_content_row01">Menu1</div>
  <div id="menu2" class="tab_content_row tab_content_row02">Menu2</div>
  <div id="menu3" class="tab_content_row tab_content_row03">Menu3</div>
  <div id="menu4" class="tab_content_row tab_content_row04">Menu4</div>
</div>

.tabs_list_block {
    width: 100%;
    min-height: 50px; 
    display: flex;
    align-items: center;
    border-bottom: solid 1px #ccc;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
  } 
  .tabs_list_block li {
    border-right: solid 1px #ccc;
    flex: 1 1 auto;
    height: 100%;
    text-align: center;
  }
  .tabs_list_block li:last-child {
    border-right: 0;
  }
  .tabs_list_block li a {
    width: 100%;
    height: 100%;
    padding: 16px;
    color: #ccc;
  }
  .tab_content {
    margin-top: 50px;
  }
  .tab_content_row {
      min-height: calc(100vh - 50px);
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .tab_content_row01 {
    background-color: #ffbf73;
  }
  .tab_content_row02 {
    background-color: #eaff73;
  }
  .tab_content_row03 {
    background-color: #8cf9f0;
  }
  .tab_content_row04 {
    background-color: #ddc4ff;
  }

<script type="text/javascript">
$(".tabs_list_block").find("a").click(function(e) {
    e.preventDefault();
    var section = $(this).attr("href");
    $("html, body").animate({
        scrollTop: $(section).offset().top - 0
    });
});

Thanks, but you did not answer my question. – Daniel Jones Feb 07 '20 at 10:08 — Daniel Jones, Feb 07 '20 at 10:08

Should I use 'Name' or 'ID' as an HTML Anchor?

3 Answers3