Issues with HTML5 links not functioning as intended

I am currently working with HTML5 and have been following a tutorial which can be found here- https://www.youtube.com/watch?v=kDyJN7qQETA

Below is the code snippet I have been working on-

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
  <body>
<article>Hello</article>
<meta name="description" content="Vaibhav chhabra"/>


<a name="pageTop">Top of page</a>

<a href="html5.html#pageBottom">Bottom of page</a>

<br><br><br>
<a href="youtube.com" title="Youtube Site website Titile" >Youtbe alone</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<p>Hello Worlddddd22222222dddddd</p>
<a href="html5.html#pageTop">Top of Page</a>
<a id="pageBottom">Bottom of page</a><br>
</body>
</head>
</html>

Upon clicking on the "Page Bottom" hyperlink, instead of going to the bottom of the page as expected, it redirects me to a "Page not found" error. The same issue arises when attempting to go to "Page Top". Any assistance in resolving this would be greatly appreciated.

javascriptcsshtmlanchor

Answer №1

Your code seems to be functioning correctly, but the markup is a bit messy with misplaced or missing tags scattered throughout.

If you want your link to stay on the same page, just point directly to the anchor itself :

<a href='#pageBottom'>Bottom of Page</a>

Using the href='#html5.html#pageBottom' method will work as long as you have a page named that in an accessible directory from your current location.

Example

https://i.sstatic.net/nt3qO.gif

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="description" content="Vaibhav vaihhbhav chhabra" />
  <meta charset="UTF-8">
</head>
<body>
  <article>Hello</article>
  <a name="pageTop">Top of page</a>
  <a href="#pageBottom">Bottom of page</a>
  <br>
  <br>
  <br>
  ...
  (Content truncated for brevity)
  ...
  <br>
  <p>Hello Worlddddd22222222dddddd</p>
  <a href="#pageTop">Top of Page</a>
  <a id="pageBottom">Bottom of page</a>
  <br>
</body>
</html>

Answer №2

Introduction to HTML:

<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
</head>
<body> <!--Make sure to place the opening body tag outside of the head section-->

<h1></h1>
<p></p>

</body>
</html>

Using an Anchor Tag.

An anchor tag's name attribute can be used to link to a specific location on a webpage.

<a name="top"></a>
<a href="#top">Back to Top</a>

Answer №3

There seems to be an issue with your code, but don't worry, I have already fixed it for you. CODE-

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="Vaibhav vaihhbhav chhabra" />
<meta charset="UTF-8>
</head>
<body>
<article>Hello</article>
 <a name="pageTop">Top of page</a>
<a href="#pageBottom">Bottom of page</a>
<br>
<br>
<br>
<a href="youtube.com" title="Youtube Site website Titile">Youtbe alone</a>
<br>
<br>
<br>
<p>Hello Worlddddd22222222dddddd</p>
 <a href="#pageTop">Top of Page</a>
 <a id="pageBottom">Bottom of page</a>
 <br>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The dropdown selection does not appear to be accurately recorded

Apologies if this question has already been addressed, but I couldn't find a solution to my issue with an HTML dropdown. I have a form with various input fields and text areas, and upon submitting the form, all values are successfully posted except f ...

phphtmlformspost

Ensuring secure communication with PHP web service functions using Ajax jQuery, implementing authentication measures

jQuery.ajax({ type: "POST", url: 'your_custom_address.php', dataType: 'json', data: {functionname: 'subtract', arguments: [3, 2]}, success: function (obj, textstatus) { if( !('error' in obj) ) { ...

javascriptphpjqueryajaxweb-services

Ways to prevent multiple submissions of the same form?

As I work on developing a form, my primary goal is to prevent users from submitting incorrect information. Is there a way to achieve this using javascript? Please forgive any typos as English is not my first language and I am relying on a translator for ...

javascript

Adjust the hue of a Three.js-generated 3D cube

Seeking assistance! How can I customize the colors of a 3D cube in the Three.js library rather than using the default settings? This is what I have managed to create so far - HTML <div id="container"></div> JavaScript // revolutions per se ...

javascriptthree.js

When I leave an input empty in JSX, my 'required' attribute does not work properly

Currently, I am working on a register.jsx file, but I am encountering an issue where clicking the button still triggers functionality even when the input fields are empty or undefined. I have reviewed my code multiple times and cannot identify any syntax ...

javascripthtmlreactjsjsx

Tips for arranging particles in three.js based on their depth?

I am still relatively new to the world of three.js, WebGL, and 3D graphics in general. My current project involves using three.js to visualize GPS track points in a 3D environment. The datasets I am working with can be quite large, containing hundreds of t ...

javascriptthree.js3ddepth-testing

Guide on preventing access to a website's JavaScript file or concealing specific data within it

Currently, my website is being hosted on GitHub pages and I am working on a simple web app that requires an API call. The API call consists of a web URL with specific parameters, including a personal API key issued by the service. It's important not t ...

javascriptapisecurityurlweb-applications

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

javascripthtmljqueryajax

Hovering over one of two identical divs will trigger an effect

Having a bit of trouble with CSS hover... I have two divs in the same class and I need to specify hover effects for only one of them. I've tried some solutions but they either don't work or change colors on both. <div class="container iphone" ...

htmlcss

Creating a Twitter share link for your website with concise blog posts is simple and effective

I am looking to generate a Twitter share link on my website that shares the initial lines of a user's blog by retrieving data from a PHP database. The content of the blog is saved in HTML format within the database. I attempted to retrieve the data an ...

phphtmlhyperlinkshare

Code not functioning properly in Internet Explorer

In one of my JavaScript functions, I have the following CSS line which works well in all browsers except for IE (Internet Explorer). When the page loads, the height of the element is only about 4px. element.setAttribute('style', "height: 15px;") ...

javascriptcssinternet-explorer

Verifying the presence of JSON data loaded directly from the server to decide whether the factory should initiate a request to retrieve the same data if it is not already available

I am currently developing an Angular application that is designed to load a JSON object from the server on page load, either freshly or if it doesn't already exist. I'm wondering how one could use a service or factory to check for the presence of ...

javascriptangularjs

Is there a way to handle the 'No tables found' error when using pd.read_html?

The issue I am facing a challenge while creating multiple URLs from an API request and then using them in a loop to extract data from the FT website. The problem arises when some of these URLs do not feature an HTML table, resulting in a No tables found er ...

pythonhtmlpandasweb-scraping

Transmitting video through a local area network

I am seeking a solution to stream video content to a local network with potentially over 1000 viewers. The streaming will need to be accessible via web browsers such as Internet Explorer, Chrome, and Firefox, as not all users have internet access due to co ...

javascripthtmlvideostreamingjwplayer

Submitting form data via Ajax to be processed by Express.js with body parser

Having trouble sending form data to Node.js via AJAX. Using Express with body parser on Node.js However, receiving undefined in req.body. After searching extensively online and trying various solutions without success, I am seeking assistance on the c ...

htmlnode.jsajaxexpressbody-parser

Ways to display the content of a specified URL in a new window for printing using JavaScript, jQuery, or ASP

Is there a way to open a URL in a new window as a print window rather than a normal window? I know how to open a new window using window.open(url); but I specifically need it to be a print window. ...

javascriptjqueryasp.net

Show flexibility in the grandchildren of a row layout

My goal is to achieve a layout similar to the image below using the flex "system", but I am facing a challenge with some generated directives that are inserted between my layout div and the flex containers: https://i.sstatic.net/nq4Ve.png <div id="i-c ...

angularjscssflexboxangular-material

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

intersectionObjects malfunctioning

I've been struggling with this issue for a few days now, and I finally gave up and decided to reach out for help. My goal is to implement a simple object detection feature, but since the intersectScene method was replaced with intersectObjects (which ...

javascriptthree.js

Is there a way to restrict a forEach loop so that it only runs 16 iterations?

I'm looking to limit the number of results shown in a forEach loop to only 16. Is there a way to achieve this? <div class="events-list" data-bind="if: (typeof(Events) != 'undefined')" style="padding-top:5px; padding-bottom:5px;"> ...

javascripthtmlknockout.js