Geeks With Blogs

expression{} 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

Your comment:
 (will show your gravatar)

Copyright © ihaynes | Powered by: | Join free