Create a link to a specific part of the page in HTML and CSS
Description
The following code shows how to create a link to a specific part of the page.
Example
<!--from w w w.j av a 2s .c o m-->
<html>
<head>
<title>A link to a specific part of the page</title>
</head>
<body>
<h1><a name="top">Linking and Navigation</a></h1>
<p>This page covers the following topics:</p>
<ul>
<li><a href="#URL">URLs</a></li>
<li><a href="#SourceAnchors">Source Anchors</a></li>
<li><a href="#DestinationAnchors">Destination Anchors</a></li>
<li><a href="#Examples">Examples</a></li>
</ul>
<h2><a id="URL">URLs</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>
<h2><a id="SourceAnchors">Source Anchors</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>
<h2><a id="DestinationAnchors">Destination Anchors</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>
<h2><a id="Examples">Examples</a></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><a href="#top">Back to top</a></p>
</body>
</html>
The code above generates the following result.
HTML CSS Tutorial Anchor
Add border to anchor hover effect in HTML a...
Add link to another file in the same folder...
Add title attribute to anchor in HTML and C...
Create a basic link to an external web site...
Create a basic link to another page within ...
Create a link with white space in HTML and ...
Create a mail to link in HTML and CSS
Create absolute link starting with http:// ...
Create an Image Link with anchor element an...
Link to the same page with anchor in HTML a...
Set Link target in HTML and CSS
Set font size and color for visited anchor ...
Set font weight and color for active anchor...
Set font weight and color for anchor hover ...
Set id for anchor element in HTML and CSS
Add border to anchor hover effect in HTML a...
Add link to another file in the same folder...
Add title attribute to anchor in HTML and C...
Create a basic link to an external web site...
Create a basic link to another page within ...
Create a link to a specific part of the pag...
Create a link to send an email in HTML and ...Create a link with white space in HTML and ...
Create a mail to link in HTML and CSS
Create absolute link starting with http:// ...
Create an Image Link with anchor element an...
Link to the same page with anchor in HTML a...
Set Link target in HTML and CSS
Set font size and color for visited anchor ...
Set font weight and color for active anchor...
Set font weight and color for anchor hover ...
Set id for anchor element in HTML and CSS