1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

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

Discussion in 'Web Development' started by Andy blunt, Apr 30, 2012.

  1. Andy blunt

    Andy blunt New Member

    Joined:
    Apr 30, 2012
    Messages:
    2
    Likes Received:
    0
    Trophy Points:
    0
    Hey If any one have idea for
    How to create links to sections on the same page in HTML.
     
  2. shabbir

    shabbir Administrator Staff Member

    Joined:
    Jul 12, 2004
    Messages:
    15,283
    Likes Received:
    364
    Trophy Points:
    83
    <A href should help you make links in html page.
     
  3. bzforum

    bzforum New Member

    Joined:
    May 20, 2012
    Messages:
    25
    Likes Received:
    7
    Trophy Points:
    0
    Occupation:
    CEO & Founder
    Location:
    Mumbai , India
    Home Page:
    If you are asking about Named Anchors this is a way to do it...

    This would be the code to define the Section
    PHP:
    <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:
    <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..
     
  4. Alex.Gabriel

    Alex.Gabriel New Member

    Joined:
    Oct 23, 2011
    Messages:
    86
    Likes Received:
    7
    Trophy Points:
    0
    Occupation:
    Linux system administrator
    Location:
    Italy
    Home Page:
    Actualy #top must be defined as an id so correct code would be
    PHP:
    <a id="top">top</a>
    then to go on the top you must link it with
    PHP:
    <a href="#top">Go tot top of the page</a>
    @Andy blunt : You can use <a href="">text here</a> as shabbir said.
     
  5. mfred90

    mfred90 Banned

    Joined:
    Mar 28, 2012
    Messages:
    11
    Likes Received:
    0
    Trophy Points:
    0
    you cane use <a href="URL">your name </a>, you can also try
     
  6. pein87

    pein87 New Member

    Joined:
    Aug 6, 2010
    Messages:
    173
    Likes Received:
    47
    Trophy Points:
    0
    Occupation:
    Web Dev
    Location:
    Limbo
    Give the element and id and point to it via the href attribute for the link like so

    HTML:
    <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:
    <!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>
    
     

Share This Page