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

Question

When one wants to refer to some part of a webpage with the "`http://example.com/#foo`" method, should one use <h1><a name="foo"/>Foo Title</h1>or <h1 id="foo">Foo Title</h1>They both work, but are they equal, or do they have semantic differences?

Answer 1

Hi there. The "name" attribute is normally used in form elements so the server can identify fields on form submission. If you want to identify your elements, you can use the "id" attribute or the "class" attribute. As a rule of thumb "id" must be unique per page. "Class" on the other hand is normally used for a group of elements that have similar semantic roles on a page and whose style will be the same, such articles in a page that displays a list of articles to choose from.

As far as CSS, the "id" selector has more specificity than a "class" selector. For instance, in the example below the ruleset for the id selector prevails over the ruleset for the class selector (if you run this example on your local environment you will see a 200px by 200px red square).

<div id="article" class="article"></div>

#article {

width: 200px;

height: 200px;

background: red;

}

.article {

width: 100px;

height: 100px;

background: blue;

I hope this helps!