is it possible to add skip to content to link to name and not for id?
<a id="skiptocontent" href="#main" class="">skip to main content</a>
<h1 name="main">Main</h1>
No, this is not possible. There are some work-arounds:
id
property Obviously, you could add the id
property to the target element:
<h1 name="main" id="main">Main</h1>
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 .
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.
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>
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.