Creating an anchor tag in a separate html page

Question

Hi I have a simple HTML question that I am struggling with. I have googled and looked through stackoverflow, but I must either be doing something incorrectly because I cannot get this to work. I am trying to make a simple link in an index.html page that links to a anchor tag in another HTML page that is within a folder in the root directory.

<!DOCTYPE html>


<html lang="en">


<head>


<title> </title>


<meta charset="utf-8">
<meta name="author" content=" ">
<meta name="description" content=" ">
<meta name="keywords" content=" ">

<style type="text/css">

</style>

</head>

<body>
    <h1>Canyons Cycling Club</h1>

    <nav>
    <a href="index.html">Home</a> &nbsp;&nbsp;
    <a href="menu.html">Events</a> &nbsp;&nbsp;
    <a href="music.html">Join</a> &nbsp;&nbsp;
    <a href="jobs.html">Gallery</a> &nbsp;&nbsp;
    </nav> 

    <h2>What you need to ride:</h2>

    <ul>
        <li>A road bike in good working order</li>
        <li>One, preferably two, filled water bottlers</li>
        <li>A bicycle helmet compliant with at least one of the following   
            safety and standards organizations.
            <ul>
                <li>CPSC</li>
                <li>ANSI</li>
                <li>ASTM</li>
            </ul>
        <li>A route sheet</li>
        <li>A tool pack, spare tube, or patch kit</li>
    </ul>

    <div>View the Friday, Saturday, and Sunday <i>Index</i> sections on the
     Events page for a listing of this week's no-drop, supervised rides.
    </div>
    <a href="events folder/events.html#friday">Go to Friday Index</a>

</body>

</html>

I am trying to create a "Go to Friday Index" link to events.html inside the events folder in the root directory. I tried creating

<a name="friday" id="friday"><strong>FRIDAY Index <br> </strong></a>

inside events.html, but when I click the link inside index.html, it opens nothing in a new tab. Thanks for the help in advance.

score 1 · Accepted Answer · edited May 23 '17 at 12:15

1

You need to handle the space in "events folder". I would rename the folder to something like events_folder, but if you want to leave the space in you can use "events%20folder". Ref HTML: href syntax : is it okay to have space in file name

edited May 23 '17 at 12:15

Community

1
1

answered Mar 09 '16 at 19:19

Justen

54
5

Oh such a simple solution.. Thanks a bunch! I will rename the folder to events_folder and try again. – theJcode24 Mar 09 '16 at 19:21
Yup that was the problem.. Thanks again! – theJcode24 Mar 09 '16 at 19:22

Brino · Answer 2 · 2016-03-09T19:24:32.473

0

Index.Html

<a href="events\events.html#friday">Link to Friday Events</a>

Events/Events.Html

<a id="friday"></a>Friday Content...

Use the # symbol on the end of your href attribute to specify the page fragment that you want to reference. Note: In HTML5, you should use the id attribute of the a tag, rather than the name attribute.

To reference a file in subdirectory, simply put the name of the subdirectory before the filename in your href attribute such as events\events.html.

edited Mar 09 '16 at 19:24

answered Mar 09 '16 at 19:20

Brino

2,442
1
21
36

Thank you very much for your answer. User Justen explained to me that the space in the folder name could be a problem so I changed the name of the folder to events_folder and it worked. I will keep in mind your advice of using id instead of name in HTML5. Thanks a bunch! – theJcode24 Mar 09 '16 at 19:24

Creating an anchor tag in a separate html page

2 Answers2