July 17, 2006

Semantic named anchors

bitesizestandards have a nice article on ‘semantic anchors’ which are used to link to different areas of the current page you are viewing.

The usual way we all do this is with a named anchor as follows, ‘Name’ a content area on your page:

<a name="myContent"></a>

Add the link to that content area

<a href="#myContent">Go to myContent</a>

The problem is that this isn’t semantic and it’s not ideal to have empty <a href> elements on your page (<a name=“”>). A nice way around this? Use id’s instead :)

So now you can do this instead:

<div id="myContent">

Much nicer, cleaner and semantic as well! You can link to your content the normal way:

<a href="#myContent">Go to myContent</a>

View the full article here

© Michael Sharman 2017