a href external link to specific area on page

Question

So I have a nav bar that I want to link to different pages that all look the same but have one different section on them. When I came to creating the links I realized that it will only link to the other page but not the specific section on the page . So basically I had the idea of an anchor tag but linking to another page.

I did it this way because I have a basic knowledge of coding and don't know how to use php and javascript. Is there a way to do this with what I have? Or do I have to try a different method entirely?

I am just learning javascript now so that can be an option. I heard you could do something with arrays? (But not any jquery as we are not allowed to use that for our assignment) I've also heard about iframes also but I don't know too much about them.

CODE:

HTML

 <nav>
    <ul>
    <li><a href="toursprices.html">TOURS,PRICES &amp; STANDARD FLIGHTS</a></li>
    <li><a href="#">MEET THE STAFF</a></li>
    <li><a href="#">CHARTERS</a></li>
    </ul>
</nav>

Answer 1

if your page toursprices.html contains a div with id "abc", and you want to link to that section, you just have to write the href like this:

<a href="toursprices.html#abc">TOURS,PRICES &amp; STANDARD FLIGHTS</a>

Answer 2

You can use:

<a id="different_section_1">Different Section</a>

in the target page and in the navbar use:

<a href="page.html#different_section_1">Page</a>

But if your pages are essentially the same with one area that changes. You'd probably be better of using an iframe or switching out blocks with javascript.

Answer 3

As "user3472089" said you can point the a certain element through its id.

I use this at the top of my gallery:

<a href="#top"></a>

And at the bottom I just put a link or a simulated button that leads to that anchor:

<a href="#top">
    <div id="top_anchor">
      UP 
    </div>
</a>