Destination anchor

Hi everyone,
When trying to link to a particular spot on a web page with anchor, i saw in the examples given that it was only rapped around the div(s). is it possible for me just to wrap it round any other sub heading like h3 that has no div?

https://www.codecademy.com/courses/learn-html/lessons/html-document-standards/exercises/linking-same-page-html

eg;

Features

Features

Notice the "fea
" which is my identifier name. How do i choose or make an id name?

Hey @teejaysmart :slight_smile:

If I’m understanding your question correctly, your asking if you can wrap something like a header in anchor tags:

<a href="#">
  <h1> Header</h3>
</a>

In short, yes you can. According to MDN:

Permitted content includes:

Transparent, containing either flow content (excluding interactive content) or phrasing content.

Flow content includes elements such as <h1> through <h6>, <p>, and <div>. For the most part, the only things you can’t wrap in <a> tags are the interactive contents (as stated on MDN) which includes tags like the anchor tag <a>. This makes sense, as things like this shouldn’t work out well:

<a href="2">
    <a href="1"> 
        text 
    </a>
</a>

I’m uncertain the usual process for rendering HTML when it is written in a way like this, but out of curiosity I tried running the above in Chrome. The result was that only the innermost anchor tag will have a working link, but you can still style the outer one with CSS.

1 Like

Thanks for the reply.
I have noticed both “id” and “href” can be used. Is this a choice or each has to be used accordingly?
Also how do we come up with the value given the the “id” or “href” attributes, do we just make it up ?

1 Like

Id and href are stricter in their usage. An id is used to give a unique name to a specific element that can be used in several ways. First thing to note is that only ONE element in an entire HTML page can have a specific id, so this is correct and works:

<div id="one">
    <!--content-->
</div>

<div id="two">
    <!--content-->
</div>

but this is incorrect:

<div id="one">
    <!--content-->
</div>

<div id="one">
    <!--content-->
</div>

I believe most browsers usually handle this scenario by only allowing the first id to be valid.

Ids can be used to select a specific element so that you can link to it by making it the href of an <a> and stating you are using an id by proceeding the name with a #:

<div id="unique"> </div>
<a href="#unique"> link </a>

You can pick any word to use as an id, but the best practice would be to pick something that describes the element and to use ids only when needed. Eg. a class won’t work.


Moving on to the href.
I probably didn’t help much by making the elements in my original post have hrefs of "one" and "two".
The href is used to supply a file location to an element such as the <a>. This can take on the form of a file path:

<a href="./profile_page.html"> Profile </a>
<!-- 
This would link to a html file, named profile_page, 
which is located in the folder holding whatever html file 
is currently active.
--> 

It could also point to a web location:

<a href="https://www.random_web_location.com> random_link </a>

Finally it could point to an element in the current webpage, based on its id:

<div id="element_to_link_to"> <!--content--> </div>
<a href="#element_to_link_to"> link </a>
2 Likes

thanks for your detailed explanation

1 Like