Question 323403 in Html Question posted in
Some basic documentation can be found here.

Html – Trying to redirect using <a> tag, and id & href attributes

I have 3 HTML files, all in the same Web page: body1.html, body2.html and body3.html

When pointing to body1.html, for 1 particular item, I want a click to go to a particular id in body3.html; and then I want the item in body3.html to redirect to body2.html

In body1.html I have:
<a href="body3.html#3.0">3.0</a>

In body3.html I have:
<a id="3.0" href="body2.html#3.0"> </a>

In body2.html I have:
<a id="3.0">3.0</a>

I would expect this to work but it doesn’t. Clicking in body1.html does go to body3.html, but the redirection to body2.html is not performed.

What am I doing wrong? Is there a way to do what I want using HTML only?

Tags:

2

Answers


  1. 0

    The problem you’re encountering is that the id attribute in HTML is meant to start with a letter (A-Z or a-z) and can be followed by a combination of letters, digits (0-9), hyphens, underscores, colons, and periods. Using numeric values as id attributes goes against the HTML specification.

    To achieve the desired behavior, you can modify your code as follows:

    <a href="body3.html#item3">3.0</a>
<a id="item3" href="body2.html#item3"></a>
<a id="item3">3.0</a>

    By using valid id attributes, the redirection from body3.html to body2.html should work as expected.

    Login or Signup to reply.
  2. 0
    • Are you sure that the relative paths are correct. If your HTML files are in the same directory, your current paths should work. If they are in different directories, you might need to adjust the paths accordingly.
    • Check if the file names are case-sensitive. If your server is case-sensitive, make sure that the file names in your links exactly match the case of the actual file names.

    Also try playing around code like this and see how it goes.

    <!-- body1.html -->
<a href="body3.html#3.0">3.0</a>

<!-- body3.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Body 3</title>
    <meta http-equiv="refresh" content="0;url=body2.html#3.0">
</head>
<body>
    <a id="3.0" href="#">Link to body2.html</a>
</body>
</html>

<!-- body2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Body 2</title>
</head>
<body>
    <a id="3.0">3.0</a>
</body>
</html>

    Do let me know how it works. Thanks.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search