{"id":3413,"date":"2025-02-21T23:15:20","date_gmt":"2025-02-21T23:15:20","guid":{"rendered":"https:\/\/jrdingwall.ca\/blogwall\/?p=3413"},"modified":"2025-02-21T23:15:20","modified_gmt":"2025-02-21T23:15:20","slug":"html-tip-links-to-text-fragments","status":"publish","type":"post","link":"https:\/\/jrdingwall.ca\/blogwall\/html-tip-links-to-text-fragments\/","title":{"rendered":"HTML Tip &#8211; Links to Text Fragments"},"content":{"rendered":"<p>I&#8217;ve slowly gotten more comfortable over the years with popping open developer tools to inspect webpages to see how things work or to figure out what the heck is going on. Today a colleague and I were discussing options for linking to external sources for training. There are challenges with resources in elearning. You could just copy all the documents you need right into an elearning package, but have fun with the maintenance of that.<\/p>\n<p>If it&#8217;s a document you can link right to it, but sometimes that can be an issue depending on how it&#8217;s shared or updated. If shared from cloud storage, the\u00a0<em>manage versions<\/em> option lets you keep the URL address and swap out the resource Indiana Jones style.<\/p>\n<p>Sometimes, we link to just the webpage, but depending on the length of the page, learners can get frustrated not being able to find what they&#8217;re looking for (what we sent them there for). I&#8217;ve leaned heavily on anchors, usually attached to headings to get learners as close to the target as possible. But what we ran into today was pages that don&#8217;t include id tags on the headings. What then?<\/p>\n<p>Well, thankfully a few weeks ago I ran across this post from Alan Levine, <a href=\"https:\/\/cogdogblog.com\/2025\/01\/links-to-text-fragments\/\">Links to Text Fragments<\/a>. At the time I thought, &#8220;neat Alan, thanks for sharing, but I&#8217;m not sure I&#8217;ll ever use that.&#8221; Well past JR, take that, you\u00a0<strong>do have a use case<\/strong>.<\/p>\n<p>So we learned a bit about the structure, which Bracken and Alan talk about in the post. Similar to your regular anchors, you add specific characters followed by the text you want to be selected <strong>and highlighted<\/strong>.<\/p>\n<ul>\n<li>#:~:text= (this gets you to point at text<\/li>\n<li>%20 (because you&#8217;ll be dealing with spaces if you&#8217;re after a phrase and not just a word)<\/li>\n<\/ul>\n<p>So the example we had was to send people to a checklist. There&#8217;s some importance in having learners see the building they&#8217;re in (i.e. where they are on the website) as opposed to just dumping them into the room (i.e. the form, in this case).<\/p>\n<p>So we start with the URL: <em>https:\/\/www.macewan.ca\/about-macewan\/administration\/health-safety-environment\/safety-programs\/inspections<\/em><\/p>\n<p>Then we add our slug to point directly to the form link: <em>#:~:text=office%20inspection%20checklist<\/em><\/p>\n<p>And now in the course we can link out: <div class=\"su-button-center\"><a href=\"https:\/\/www.macewan.ca\/about-macewan\/administration\/health-safety-environment\/safety-programs\/inspections\/#:~:text=office%20inspection%20checklist\" class=\"su-button su-button-style-glass\" style=\"color:#FFFFFF;background-color:#2D89EF;border-color:#246ec0;border-radius:7px\" target=\"_blank\" rel=\"noopener noreferrer\" title=\"visit the procomoer website\"><span style=\"color:#FFFFFF;padding:0px 20px;font-size:16px;line-height:32px;border-color:#6cadf4;border-radius:7px;text-shadow:none\"> View Checklist<\/span><\/a><\/div>\n<p>This opens up so many possibilities. I&#8217;m grateful I ran into Alan&#8217;s post, I would not have thought this possible.<\/p>\n<hr \/>\n<p>Photo by <a href=\"https:\/\/unsplash.com\/@fresonneveld?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\">Fr\u00e9 Sonneveld<\/a> on <a href=\"https:\/\/unsplash.com\/photos\/low-angle-photography-of-gray-metal-chains-K8iHtzoIKQ4?utm_content=creditCopyText&amp;utm_medium=referral&amp;utm_source=unsplash\">Unsplash<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ve slowly gotten more comfortable over the years with popping open developer tools to inspect webpages to see how things work or to figure out what the heck is going on. Today a colleague and I were discussing options for linking to external sources for training. There are challenges with resources in elearning. You could [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3414,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"webmentions_disabled":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[16],"tags":[96],"class_list":["post-3413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-educational-technology-and-design","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/jrdingwall.ca\/blogwall\/files\/2025\/02\/fre-sonneveld-K8iHtzoIKQ4-unsplash.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/3413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/comments?post=3413"}],"version-history":[{"count":1,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/3413\/revisions"}],"predecessor-version":[{"id":3415,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/posts\/3413\/revisions\/3415"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/media\/3414"}],"wp:attachment":[{"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/media?parent=3413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/categories?post=3413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jrdingwall.ca\/blogwall\/wp-json\/wp\/v2\/tags?post=3413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}