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,375
    Likes Received:
    388
    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:
    http://bzforum.in/index.php
    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:
    http://blog.evilcoder.net
    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 Active Member

    Joined:
    Aug 6, 2010
    Messages:
    173
    Likes Received:
    47
    Trophy Points:
    28
    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

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice