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:

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

Add the link to that content area

1
<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:

1
2
3
<div id="myContent">
...
</div>

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

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

View the full article here

Comments