{"id":194,"date":"2011-10-19T14:18:47","date_gmt":"2011-10-19T18:18:47","guid":{"rendered":"http:\/\/www.carolinamantis.com\/wordpress\/?p=194"},"modified":"2011-10-19T14:18:47","modified_gmt":"2011-10-19T18:18:47","slug":"linking-to-html-elements-via-id-attribute","status":"publish","type":"post","link":"http:\/\/www.carolinamantis.com\/wordpress\/?p=194","title":{"rendered":"Linking to HTML Elements via id Attribute"},"content":{"rendered":"<div class=\"wp_plus_one_button\" style=\"margin: 0 8px 8px 0; float:left; \"><g:plusone href=\"http:\/\/www.carolinamantis.com\/wordpress\/?p=194\" callback=\"wp_plus_one_handler\"><\/g:plusone><\/div><p>My coworker Brian Hall and I came across a posting saying &#8220;everyone knows this&#8221;, and the this was that you can use a hash to link to an id. \u00a0Here&#8217;s a snippet to demonstrate:<\/p>\n<pre name=\"code\" class=\"html\">\r\n<h1>My Page With Internal Links<\/h1>\r\n\r\n<h2>Navigation<\/h2>\r\n<ul>\r\n\t<li><a href=\"#a\">A<\/a><\/li>\r\n\t<li><a href=\"#b\">B<\/a><\/li>\r\n\t<li><a href=\"#c\">C<\/a><\/li>\r\n<\/ul>\r\n\r\n<h2 id=\"a\">A<\/h2>\r\n<p>Some content here that if relevant to 'A'<\/p>\r\n\r\n<h2 id=\"b\">B<\/h2>\r\n<p>Some content here that is relevant to 'B'<\/p>\r\n\r\n<h2 id=\"c\">C<\/h2>\r\n<p>Some content here that is relevant to 'C'<\/p>\r\n<\/pre>\n<p>Previously, the way you would do this is to use an a tag with a name value around the h2 elements:<\/p>\n<pre name=\"code\" class=\"html\">\r\n<h1>My Page With Internal Links Using Name Attribute<\/h1>\r\n<h2>Navigation<\/h2>\r\n<ul>\r\n\t<li><a href=\"#a\">A<\/a><\/li>\r\n\t<li><a href=\"#b\">B<\/a><\/li>\r\n\t<li><a href=\"#c\">C<\/a><\/li>\r\n<\/ul>\r\n\r\n<a name=\"a\"><h2>A<\/h2><\/a>\r\n<p>Some content here that if relevant to 'A'<\/p>\r\n\r\n<a name=\"b\"><h2>B<\/h2><\/a>\r\n<p>Some content here that is relevant to 'B'<\/p>\r\n\r\n<a name=\"c\"><h2>C<\/h2><\/a>\r\n<p>Some content here that is relevant to 'C'<\/p>\r\n<\/pre>\n<p>The &#8220;everyone knows this&#8221; technique has many advantages:<\/p>\n<ul>\n<li>No extraneous a tags that have to be unstyled, because they&#8217;re not really links<\/li>\n<li>Better cooperation with jQuery code because you are now using id attributes<\/li>\n<li>You can do some nifty styling using the <a href=\"http:\/\/css-tricks.com\/5841-css3-tabs\/\">target pseudo class selector<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<div class=\"wp_plus_one_button\" style=\"margin: 0 8px 8px 0; float:left; \"><g:plusone href=\"http:\/\/www.carolinamantis.com\/wordpress\/?p=194\" callback=\"wp_plus_one_handler\"><\/g:plusone><\/div><p>My coworker Brian Hall and I came across a posting saying &#8220;everyone knows this&#8221;, and the this was that you can use a hash to link to an id. \u00a0Here&#8217;s a snippet to demonstrate: My Page With Internal Links Navigation A B C A Some content here that if relevant to &#8216;A&#8217; B Some content [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"_links":{"self":[{"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/194"}],"collection":[{"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=194"}],"version-history":[{"count":9,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":203,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/194\/revisions\/203"}],"wp:attachment":[{"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.carolinamantis.com\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}