<a href and <a id coding help

Hi guys,

Where am I going wrong in my code?

<a href="#AINTREE">Aintree</a>
<a href="#ASCOT">Ascot</a>
<a href="#AYR">Ayr</a>

Clicking any of that will you take to the anchor point further down the page.



<a id="AINTREE">Aintree</a>
<a id="ASCOT">Ascot</a>
<a id="AYR">Ayr</a>



How do I style the id parts?


a, a:link, a:active { text-decoration:underline; color:#06C; }
a:hover { color:#06C; }
a:visited { color:#06C;/*#6300CC*/; }
.ainv a, .ainv a:link, .ainv a:visited, .ainv a:active { text-decoration:none; }
.ainv a:hover { text-decoration:underline; }
a.ainv:link, a.ainv:visited, a.ainv:active { text-decoration:none; }
a.ainv:hover { text-decoration:underline; }

a.id {
color:#000;
text-decoration:none; }

http://www.horseracingtipcomparison.com/uk-horse-racing-tracks-number-2/ - the site is indeed under construction.

 

If you are going to use ID, you don't need to use an anchor -- if anything those look like they should be HEADINGS. It used to be to do internal hash-links you did it with the NAME attribute, but unless you need nyetscape 4 support 1990's style, just point at the ID's... which you can put on ANY element, not just anchors. Really in this day and age if you're not putting a href on it, don't use an anchor! Use the proper semantic element -- the proper element depending on the content and document structure around it.

Though I don't see anything on the page you linked to that bears the slightest resemblance to the code in your post; or that would require internal linking.

 

Yeah heading tags with ids look to be the most logical. If you need styling beyond native heading presentation just use a class to apply the properties you need.

 

Or inherit off the parent's selector since you'd think all those like targets would be same-level headings off the same parent. That really depends on the data though since as always, the content should be dictating the markup, NOT the other way around.

 

may be you should try and give a css for it else he will not understand

 

use #AINTREE
{
......
}
#AINTREE:hover
{
......
}

 

I did some Googling about proper semantic element but that went over my head.

I ended up with:

<a href="#AINTREE">Aintree</a>
<a href="#AYR"</a>

Code (markup):

<a id="ASCOT">Ascot</a><br />
<a id="AYR">Ayr</a><br />

Code (markup):

a[id]{ 
     color:#000; 
     text-decoration:none; }

Code (markup):

This does exactly what I wanted it to do, and allows for any change should I need to in coming months.