How To Link To A Specific Part Of A Page HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this article we will show you the solution of how to link to a specific part of a page HTML, many times you see in websites that there are menus or say text in page and when you clicks on the specific text or menu then then it scrolls the page to required topic and display you text regarding that topic.
Now, let us understand how we can do this.
Step By Step Guide On How To Link To A Specific Part Of A Page HTML :-
In this article, we come in touch with the topic of linking specific part of webpage and this is done with the help of anchor tag and use of id.
Here, below we are going to show you codes in html. In which we will show you how we have to write code and have to apply anchor tag and id in html. Let us understand.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
<style>
html{
scroll-behavior: smooth;
}
.container img{
display: block;
background-size: cover;
width: 100%;
height: 100%;
}
</style>
</head>
<body >
<ul>
<li>
<a href="./demo.html#img_one">
image 1
</a>
</li>
<li>
<a href="./demo.html#img_two">
image 2
</a>
</li><li>
<a href="./demo.html#img_three">
image 3
</a>
</li>
<li>
<a href="./demo.html#img_four">
image 4
</a>
</li>
<li>
<a href="./demo.html#img_five">
image 5
</a>
</li>
<li>
<a href="./demo.html#img_six">
image 6
</a>
</li>
</ul>
<div class="container">
<img src="images/1.jpg" alt="" id="img_one">
<img src="images/2.jpg" alt="" id="img_two">
<img src="images/3.jpg" alt="" id="img_three">
<img src="images/4.jpg" alt="" id="img_four">
<img src="images/5.jpg" alt="" id="img_five">
<img src="images/6.jpg" alt="" id="img_six">
</div>
<body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page.
- In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- Here, first we create list and under this we create some links with the help of anchor tag. Inside these links we give the location of webpage where we want to send user after clicking on link.
- Whereas in case of image, we use img tags and gives link to location of images with src attribute and give all of them a specific id.
- CSS used here only so that images can cover maximum or full screen width, height. So, that page size increase and we show you how to link part of that website which does not shows.
- In CSS, scroll-behavior smooth is used to give a scroll effect. If you don’t use then the after clicking you are suddenly redirected to that part of webpage.
- Note: here you can use text rather than images. But the concept remains same.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to link a specific part to a page in html I hope this tutorial on how to link to a specific part of a page HTML helps you.
About Ashish
