RSS

Tag Archives: programming web html

a href to the Current Page

The answer: don’t href, use <a name=”foo”> instead

Today I was making lefthand navigation for my current project. I wanted to make a collapsing side menu (an accordion like this one. The menu is basically a list within a list, structured like so:

Menu

Submenu 1

Page Link

Page Link

Submenu 2

Page Link

It was surprisingly challenging to translate this to HTML though. The trouble was mainly that, in my initial html, I didn’t know what tags to wrap the Submenus in: they aren’t active links. I considered headers, but headers can’t exhibit the behavior of links (<a> tags), at least as far as I know. It’s common to put <a href=”#”> as a placeholder for a link that doesn’t go anywhere, but when I did that the link ended up redirecting to the root directory of my site. Besides, using an <a href> for a link that doesn’t actually go anywhere didn’t seem particularly semantic. So what to do?

My solution was to simply make the Submenu <a href> tags, <a name> tags instead. <a name> tags are meant to provide hooks into the html– a way to link to a location on the same page. They’re often used for indices that appear at the top of a web page. Using an <a name> tag works because the tag is not meant to link to another page. It behaves like an <a href> tag and can be styled as one, but it doesn’t redirect the user to another page.

In the end, my html looked like this:

<div id="sideNav">

	<ul id="sideMenu">

			<!-- first submenu -->
			<li>
				<a name="MenuHeader1">Menu Category 1</a>
				<ul>
					<li>
						<a href = http://site.com/1 >Topic 1</a>
					</li>

					<li>
						<a href = http://site.com/2 >Topic 2</a>
					</li>

					<li>
						<a href = http://site.com/3 >Topic 3</a>
					</li>

				</ul>
			</li>

			<!-- second submenu -->

			<li>
				<a name="MenuHeader2">Menu Category 2</a>
				<ul>
					<li>
						<a href = http://site.com/10 >Topic 10</a>
					</li>

					<li>
						<a href = http://site.com/20 >Topic 20</a>
					</li>

					<li>
						<a href = http://site.com/30 >Topic 30</a>
					</li>

				</ul>
			</li>

		</ul>
</div>
Advertisements
 
Leave a comment

Posted by on July 7, 2011 in Uncategorized

 

Tags: