• In HTML, you can create links that direct users to specific sections within the same webpage.
• To do this, use the anchor tag <a> and assign an ID attribute to the target section using the id attribute. For example: <section id="section1"> ... </section>.
• Create the link using the <a> tag and set the href attribute to the # symbol followed by the ID of the target section. For example: <a href="#section1">Go to Section 1</a>.
• When users click on the link, the page will automatically scroll to the specified section on the same page.
• This technique is commonly used to create smooth navigation within long web pages, providing a better user experience.
<!DOCTYPE html>
<html>
<head>
<title>Scrolling to Section</title>
</head>
<body>
<h1>Welcome to JTC</h1>
<p>Click on the links to scroll to specific sections :</p>
<ul>
<li><a href="#section2">Go to Section 2</a></li>
<li><a href="#section9">Go to Section 9</a></li>
</ul>
<h2 id="section1">Section 1</h2>
<p>This is the first section of the page.</p>
<h2 id="section2">Section 2</h2>
<p>This is the second section of the page.</p>
<h2 id="section3">Section 3</h2>
<p>This is the third section of the page.</p>
<h2 id="section4">Section 4</h2>
<p>This is the fourth section of the page.</p>
<h2 id="section5">Section 5</h2>
<p>This is the fifth section of the page.</p>
<h2 id="section6">Section 6</h2>
<p>This is the sixth section of the page.</p>
<h2 id="section7">Section 7</h2>
<p>This is the seventh section of the page.</p>
<h2 id="section8">Section 8</h2>
<p>This is the eight section of the page.</p>
<h2 id="section9">Section 9</h2>
<p>This is the ninth section of the page.</p>
</body>
</html>
