The href="#" attribute in HTML is commonly used in anchor (<a>) tags, and it serves a few specific purposes, mainly in navigation and link behavior.
When a user clicks on a link with href="#", the browser will scroll to the top of the current page or do nothing if already at the top. This happens because the # symbol is interpreted as a reference to the top of the document when no specific id is provided.
Example
<a href="#">Link To Top</a>
link-to-top.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> <h2> <a href="#">Link To Top</a> </h2> </body> </html>
Open above page in the browser, scroll down to the end and click on the link ‘Link To Top’ to see the behavior.
JavaScript-Driven Links
href="#" is frequently used in conjunction with JavaScript to create interactive elements. The link itself doesn't lead anywhere, but JavaScript can be used to define actions that occur when the link is clicked (e.g., opening a model, triggering an event).
<a href="#" onclick="openModel()">Open Model</a>
In summary, when someone clicks this link, it will call the openModel() function (assuming that this function is defined in the JavaScript part of the code), which will likely display a model dialog box or perform some related action.
Using href="#" without preventing the default behavior can cause the page to jump to the top or introduce undesirable scrolling behavior. To avoid this, developers often use JavaScript to prevent the default action of the anchor tag.
<a href="#" onclick="someFunction(); return false;">Click Here</a>
(or)
<a href="#" onclick="someFunction(); event.preventDefault();">Click Here</a>
No comments:
Post a Comment