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

Newbie Member
30Apr2012,16:33   #1
Andy blunt's Avatar
Hey If any one have idea for
How to create links to sections on the same page in HTML.
Go4Expert Founder
1May2012,08:49   #2
shabbir's Avatar
<A href should help you make links in html page.
Go4Expert Member
30May2012,11:44   #3
bzforum's Avatar
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..
Contributor
30May2012,22:32   #4
Alex.Gabriel's Avatar
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.
Banned
5Jun2012,15:13   #5
mfred90's Avatar
you cane use <a href="URL">your name </a>, you can also try
Ambitious contributor
11Jun2012,03:08   #6
pein87's Avatar
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>