我应该使用“名称”还是“ID”作为 HTML 锚？

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!

Answer 1

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'?

Answer 2

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:

1. According to the W3C, the name attribute is obsolete . Even so, every modern browser will still allow it.

2. 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.

Answer 3

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
    });
});