How to create links to sections on the same page in HTML.

Andy blunt's Avatar, Join Date: Apr 2012
Newbie Member
Hey If any one have idea for
How to create links to sections on the same page in HTML.
0
shabbir's Avatar, Join Date: Jul 2004
Go4Expert Founder
<A href should help you make links in html page.
0
bzforum's Avatar, Join Date: May 2012
Go4Expert Member
If you are asking about Named Anchors this is a way to do it...

This would be the code to define the Section
PHP Code:
<a name="top">Top Section</a
The Name attribute of the A tag gives the Anchor a Name which can then be liked to with the below code

This would be the code to link to the Top Section
PHP Code:
<a href="#top">Go To Top</a
What ever name you have defined you need to href it with #< the Name you gave >

I hope you understood how it works..
0
Alex.Gabriel's Avatar
Contributor
Quote:
Originally Posted by bzforum View Post
This would be the code to define the Section
PHP Code:
<a name="top">Top Section</a
Actualy #top must be defined as an id so correct code would be
PHP Code:
<a id="top">top</a
then to go on the top you must link it with
PHP Code:
<a href="#top">Go tot top of the page</a
@Andy blunt : You can use <a href="">text here</a> as shabbir said.
0
mfred90's Avatar, Join Date: Mar 2012
Banned
you cane use <a href="URL">your name </a>, you can also try
0
pein87's Avatar
Ambitious contributor
Give the element and id and point to it via the href attribute for the link like so

HTML Code:
<a href="#mySection">MySection</a>
using the first example is for a to top link where the link remains empty. This method works better with less tag usage. An example of this in practice is below. Save it was index.html and open it up. Click one of the links t be taken down to that section.

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div#l { width:100%; height:600px; background: #CCC; }
div#m { width:100%; height:600px; background: #999; }
div#n { width:100%; height:600px; background: #666; }
</style>
</head>

<body>

	<div id="links">
		<a href="#l">L section</a>
    	        <a href="#m">M section</a>
    	        <a href="#n">N section</a>
	</div>

	<div id="l">SomeText</div>

	<div id="m">SomeText</div>

	<div id="n">SomeText</div>

</body>
</html>