Geeks With Blogs
expression{web.blog} Thoughts on Expression Web and web tools in general

The traditional way to create named anchors (bookmarks) on a page was to use

<a name="top">Top of page</a>

If you are working in HTML5 you'll find that your web editors intellisense (if you have a decent one) highlights this as an error, although it will still work in current browsers.

If this really is a syntax error, what's the valid HTML5 way of doing this?

Well, it's very simple and has been supported by most browsers for several versions, you give the anchor/bookmark an ID and target that in your link.

<h1 id="top">My web page</h1>

with the 'top of page' link being

<a href="#top">Top of page</a>

Posted on Friday, July 12, 2013 2:04 AM HTML5 , Anchor | Back to top


Comments on this post: Named anchors in HTML5

# re: Named anchors in HTML5
Requesting Gravatar...
thanks for this : stupid question... an "id" is typically something that is entered in to your css stylesheet. Seeing no mention of this (above) I presume that for the html5 "name" anchor tag one does not need to do this ?
Left by Mark on Feb 12, 2014 4:16 PM

# re: Named anchors in HTML5
Requesting Gravatar...
An ID can be used as an identifier for several reasons, for CSS, JavaScript and as a location like this. If you wanted to style the anchor ID you could do in CSS but it doesn't need to be. HTH
Left by Ian Haynes on Feb 12, 2014 10:44 PM

# re: Named anchors in HTML5
Requesting Gravatar...
Why is it, that when I click on a link to an anchor/div, that the browser window never stops at the top of the div, but always slightly below? I can't get the browser to display the whole div exactly from the top.
Left by Nick on Apr 24, 2014 9:55 PM

# re: Named anchors in HTML5
Requesting Gravatar...
Nick, try adding this to it:

.namedAnchor:before {
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden;
}

Adjust the height and margin-top as necessary to fit your situation. This is also useful if you have a fixed navigation or header of some kind.
Left by Dave on Oct 20, 2014 1:32 AM

# re: Named anchors in HTML5
Requesting Gravatar...
Yet another example of how "stupid" was incorporated into HTML5. In the hundreds of pages I've authored I have never felt the need to include <Hx> tags but NOW to accommodate the "experts" I have to start, or editors (and eventually browsers) will whine about my "non-standard" code. Here's a thought: <center> that! ;-)
Left by jim on Apr 29, 2015 12:34 AM

# re: Named anchors in HTML5...jim
Requesting Gravatar...
I have some complaints about HTML5 but using headings isn't one of them...c'mon Jim, you have to have some semantics and headings have been around waaaaay before HTML5 regardless of the fact that you "never felt the need to include" them...
Left by Jay on May 14, 2015 6:12 AM

# re: Named anchors in HTML5
Requesting Gravatar...
Does this mean I should replace all my named anchors with <h# id="id_name"> or <p id="id_name">? What is the harm in letting name anchors stay?
Left by Brad on Aug 18, 2015 5:56 AM

# re: Named anchors in HTML5
Requesting Gravatar...
No harm in leaving the named anchors, they're deprecated in HTML5, that's all. If you use an editor with HTML5 intellisense or error checking they'll get flagged up as errors (for HTML5). On newly created HTML5 pages use the ID, it's simpler syntax anyway.
Left by Ian on Aug 18, 2015 6:38 AM

# re: Named anchors in HTML5
Requesting Gravatar...
I am using ID now for the newer stuff creating, but thought while I was there I would change the old named anchors if needed.

What exactly does "depreciated" mean in terms of HTML? I keep seeing it a lot and only know the meaning of the general term.
Left by Brad on Aug 18, 2015 8:11 AM

# re: Named anchors in HTML5
Requesting Gravatar...
Deprecated in software terms means 'will be removed at some point in the future' and therefore to be avoided. In instances like this it's probably a long way in the future.
Left by Ian on Aug 18, 2015 9:36 AM

Your comment:
 (will show your gravatar)


Copyright © ihaynes | Powered by: GeeksWithBlogs.net | Join free