Using the combination of the href attribute in the anchor tag and the id attribute in the target element, we can refer to internal sections in an HTML document using the anchor (<a>) tag.
Step 1: Assign an id to the Target Element. The element you want to navigate to should have a unique id attribute. This id acts as a marker or identifier for the section.
Step 2: Create an Anchor (<a>) Tag with the href Attribute. In the anchor tag, use the href attribute to refer to the id of the target element. The href value should start with a # followed by the id.
Example
<a href="#section1">Go to Section 1</a>
internal-links.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Internal Linking Example</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } nav { background-color: #4CAF50; color: white; padding: 15px; text-align: center; position: fixed; width: 100%; top: 0; left: 0; } nav a { color: white; margin: 0 15px; text-decoration: none; font-size: 18px; } .section { padding: 50px; margin-top: 50px; /* Avoid overlap with the fixed nav bar */ height: 500px; } #section1 { background-color: #f4f4f4; } #section2 { background-color: #e2e2e2; } #section3 { background-color: #cfcfcf; } #section4 { background-color: #b2b2b2; } #section5 { background-color: #999; } </style> </head> <body> <!-- Navigation Bar --> <nav> <a href="#section1">Go to Section 1</a> <a href="#section2">Go to Section 2</a> <a href="#section3">Go to Section 3</a> <a href="#section4">Go to Section 4</a> <a href="#section5">Go to Section 5</a> </nav> <!-- Sections --> <div id="section1" class="section"> <h2>Section 1</h2> <p>This is the content of section 1.</p> </div> <div id="section2" class="section"> <h2>Section 2</h2> <p>This is the content of section 2.</p> </div> <div id="section3" class="section"> <h2>Section 3</h2> <p>This is the content of section 3.</p> </div> <div id="section4" class="section"> <h2>Section 4</h2> <p>This is the content of section 4.</p> </div> <div id="section5" class="section"> <h2>Section 5</h2> <p>This is the content of section 5.</p> </div> </body> </html>
Above snippet generate below screen.
Click on the links at navigation links, it takes you through the respective sections.
No comments:
Post a Comment