All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

How To Link One Page To Another Page In HTML Using Button

Last Updated : Mar 11, 2024

How To Link One Page To Another Page In HTML Using Button

In this tutorial we will show you how to link one page to another page in HTML using button, when click a button in html need to load another page by using link anchor tag.

The <button> tag defines a clickable button. Inside <button> element you can put text and tags like <i>, <b>, <strong> and <img>.

These things not possible when <input> element used as button type.

Step By Step Guide On How To Link One Page To Another Page In HTML Using Button :-

Using <button> tag we cannot load another file so we need to add <a> anchor tag with link of which file need to load in ‘href’ attribute.

Adding <button> tag within <a> anchor tag binds the link to button. So now it can loads ‘alignIMG’ file when user clicks the button.

<!DOCTYPE html>
<html>
  <head>
    <title>Button for link another page</title>
  </head>
  <body>
      <p>Button can link another page click it</p>
      <a href="alingIMG.html"><button>Click here!</button></a>
  </body>
</html>
AlignIMG.html
<!DOCTYPE html>
<html>
<head>
<title>
Aligning image in html
</title>
</head>
<body>
<img src="./background.jpg" alt="sample image" width="30%" height="30%" align="right">
<img src="./background.jpg" alt="sample image" width="30%" height="30%" align="left">
</body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. Within <p> tag we provided description about the concept. <a> anchor tag used for loads the alignIMG file by using ‘href’ attribute.
  7. <a> anchor tag can added to any image, button or text,..etc. so when click on those elements it will loads linked file, document or page.
  8. So we added link of ‘alignIMG’ file to button, when user click on the button it loads alignIMG.html file and displayed on webpage. Finally the output will looks like current html file in webpage. It contain one button ‘click here’ when it clicked by user ‘alignIMG’ html file is load and display.
  9. Both </body>, </html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

I hope this tutorial on how to link one page to another page in HTML using button helps you and the steps and method mentioned above are easy to follow and implement.

In HTML with few elements we done one new concept. HTML is heavily used for creating pages that are displayed on the World Wide Web.

So when we learn about all elements in html we can explore many concepts. I hope this guidance will helpful for everyone.

Author Image About Pragati

Experienced coding content writer who enjoys breaking down complex concepts in programming languages like Java, Python, C, and C++. Over three years of experience producing interesting and relevant content for a variety of entities. Committed to providing concise and easy-to-understand articles that assist readers in easily understanding technology and industry trends in the world of coding and software development.

Follow Pragati On Linkedin 🡪