{"id":4308,"date":"2011-07-23T16:22:50","date_gmt":"2011-07-23T16:22:50","guid":{"rendered":"https:\/\/www.techopedia.com\/definition\/hyperlink\/"},"modified":"2025-01-24T12:20:26","modified_gmt":"2025-01-24T12:20:26","slug":"hyperlink","status":"publish","type":"definition","link":"https:\/\/www.techopedia.com\/definition\/hyperlink","title":{"rendered":"Hyperlink"},"content":{"rendered":"<h2><span id=\"what_does_hyperlink_mean\">What Does Hyperlink Mean?<\/span><\/h2>\n<p>A hyperlink is a clickable element in a <a href=\"https:\/\/www.techopedia.com\/definition\/1892\/hypertext-markup-language-html\">hypertext markup language<\/a> (HTML) document that links a source to a target. When used strategically, hyperlinks are a powerful navigation tool that can also be used to improve user engagement and search engine performance.<\/p>\n<p>Hyperlinks are important because they form the foundation of the <a href=\"https:\/\/www.techopedia.com\/definition\/5217\/world-wide-web-www\">World Wide Web<\/a> (WWW). Without hyperlinks, the <a href=\"https:\/\/www.techopedia.com\/definition\/2419\/internet\">Internet<\/a> would be a collection of isolated resources.<\/p>\n<div class=\"su-note\"  style=\"border-color:#e5e54c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#FFFF66;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n<h2><span id=\"key_takeaways\">Key Takeaways<\/span><\/h2>\n<ul>\n<li>An electrical engineer named <a href=\"https:\/\/www.techopedia.com\/2\/27834\/internet\/the-pioneers-of-the-world-wide-web\">Vannevar Bush<\/a> introduced the concept of linking related pieces of information together in 1945.<\/li>\n<li>In 1989, computer scientist <a href=\"https:\/\/www.techopedia.com\/2\/31579\/networks\/a-brief-history-of-web-development\">Tim Berners-Lee<\/a> made the concept practical by inventing HTML, a markup language that made it easy to link a source with a target.<\/li>\n<li>The first <a href=\"https:\/\/www.techopedia.com\/definition\/288\/web-browser\">browsers<\/a> made hyperlinks blue to differentiate them from regular text.<\/li>\n<li>Today, <a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" target=\"_blank\">cascading style sheets<\/a> (CSS) allow hyperlinks to be styled in a wide variety of ways.<\/li>\n<li>While hyperlinks started out as a navigation tool, their flexibility has made them an essential building block for a wider range of online interactions.<\/li>\n<\/ul>\n<\/div><\/div>\n<div>\n    <section class=\"toc-sticky w-100 bg-white \">\n        <div class=\"toc-sticky__container container\">\n            <div class=\"toc-sticky__open d-flex align-items-end\" data-bs-toggle=\"collapse\"\n                 aria-controls=\"multiCollapse1\"\n                 data-bs-target=\"#multiCollapse1\">\n                <button\n                        class=\"btn btn-primary collapse-action-btn p-1 rounded-circle\"\n                        type=\"button\"\n                >\n                    <i class=\"icon-chevron-up\"><\/i>\n                <\/button>\n                <span id=\"toc-current-title\" class=\"d-flex align-items-center\">\n                    Table of Contents\n                <\/span>\n                <span class=\"toc-main-title-permanent\">Table of Contents<\/span>\n            <\/div>\n            <div\n                    class=\"collapse my-3\"\n                    id=\"multiCollapse1\"\n            >\n                <ol class=\"StepProgress\">\n                                                                        <li class=\"StepProgress-item current\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"what_does_hyperlink_mean\"\n                               onclick=handleScrollToTitle(\"what_does_hyperlink_mean\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">What Does Hyperlink Mean?<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"key_takeaways\"\n                               onclick=handleScrollToTitle(\"key_takeaways\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Key Takeaways<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"hyperlink_syntax\"\n                               onclick=handleScrollToTitle(\"hyperlink_syntax\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Hyperlink Syntax<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"how_hyperlinks_work\"\n                               onclick=handleScrollToTitle(\"how_hyperlinks_work\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">How Hyperlinks Work<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"types_of_hyperlinks\"\n                               onclick=handleScrollToTitle(\"types_of_hyperlinks\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Types of Hyperlinks<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"hyperlinks_vs_link_url\"\n                               onclick=handleScrollToTitle(\"hyperlinks_vs_link_url\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Hyperlinks vs. Link &amp; URL<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"hyperlinks_and_seo\"\n                               onclick=handleScrollToTitle(\"hyperlinks_and_seo\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Hyperlinks and SEO<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"hyperlinks_and_security\"\n                               onclick=handleScrollToTitle(\"hyperlinks_and_security\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Hyperlinks and Security<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"hyperlink_pros_cons\"\n                               onclick=handleScrollToTitle(\"hyperlink_pros_cons\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">Hyperlink Pros &amp; Cons<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"the_bottom_line\"\n                               onclick=handleScrollToTitle(\"the_bottom_line\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">The Bottom Line<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"faqs\"\n                               onclick=handleScrollToTitle(\"faqs\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">FAQs<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                                                        <li class=\"StepProgress-item\">\n                                                <div class=\"StepProgress-item__group\">\n                            <a data-id=\"references\"\n                               onclick=handleScrollToTitle(\"references\")\n                               class=\"StepProgress-item__link\" data-level=\"2\">References<\/a>\n                                                    <\/div>\n                                                <\/li>\n                                    <\/ol>\n                <div class=\"toc-sticky__container__disperse\"><\/div>\n                <div class=\"toc-sticky__btn-top justify-content-center\">\n                    <button class=\"btn btn-link d-flex align-items-center\" onclick={btnTop()}><p>Show Full Guide<\/p><img decoding=\"async\"\n                                src=\"\/wp-content\/plugins\/table-of-contents\/assets\/images\/arrow-up-circle.svg\"\n                                alt=\"arrow-up-circle\">\n                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n    <div class=\"toc-sticky-list\">\n        <div class=\"toc-sticky__container container\">\n            <div class=\"toc-sticky__open d-flex align-items-end\" data-bs-toggle=\"collapse\" aria-controls=\"multiCollapse2\" data-bs-target=\"#multiCollapse2\">\n                <button class=\"btn btn-primary collapse-action-btn p-1 rounded-circle\"\n                        type=\"button\">\n                    <i class=\"icon-chevron-up up\"><\/i>\n                <\/button>\n                <span id=\"toc-current-title\" class=\"d-flex align-items-center\">\n                    Table of Contents\n                <\/span>\n            <\/div>\n            <div  class=\"collapse my-3\" id=\"multiCollapse2\">\n                <ol class=\"StepProgress\">\n                    \t\t\t\t\t \t\t\t\t\t                                                     <li class=\"StepProgress-item current \">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"what_does_hyperlink_mean\"\n                                   onclick=handleScrollToTitle(\"what_does_hyperlink_mean\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">What Does Hyperlink Mean?<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t                                                     <li class=\"StepProgress-item \">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"key_takeaways\"\n                                   onclick=handleScrollToTitle(\"key_takeaways\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Key Takeaways<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t                                                     <li class=\"StepProgress-item \">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"hyperlink_syntax\"\n                                   onclick=handleScrollToTitle(\"hyperlink_syntax\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Hyperlink Syntax<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t\n\t\t\t\t\t\t <span class=\"show_moretoc\">Show Full Guide<\/span>\n\t\t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"how_hyperlinks_work\"\n                                   onclick=handleScrollToTitle(\"how_hyperlinks_work\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">How Hyperlinks Work<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"types_of_hyperlinks\"\n                                   onclick=handleScrollToTitle(\"types_of_hyperlinks\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Types of Hyperlinks<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"hyperlinks_vs_link_url\"\n                                   onclick=handleScrollToTitle(\"hyperlinks_vs_link_url\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Hyperlinks vs. Link &amp; URL<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"hyperlinks_and_seo\"\n                                   onclick=handleScrollToTitle(\"hyperlinks_and_seo\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Hyperlinks and SEO<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"hyperlinks_and_security\"\n                                   onclick=handleScrollToTitle(\"hyperlinks_and_security\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Hyperlinks and Security<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"hyperlink_pros_cons\"\n                                   onclick=handleScrollToTitle(\"hyperlink_pros_cons\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">Hyperlink Pros &amp; Cons<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"the_bottom_line\"\n                                   onclick=handleScrollToTitle(\"the_bottom_line\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">The Bottom Line<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"faqs\"\n                                   onclick=handleScrollToTitle(\"faqs\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">FAQs<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                    \t\t\t\t\t \t\t\t\t\t \t\t\t\t\t\t  \t\t\t\t\t                                                      <li class=\"StepProgress-item ms_hidetoc\">\n                                                    <div class=\"StepProgress-item__group\">\n                                <a data-id=\"references\"\n                                   onclick=handleScrollToTitle(\"references\")\n                                   class=\"StepProgress-item__link\"\n                                   data-level=\"2\">References<\/a>\n                                                            <\/div>\n                                                    <\/li>\n                                    <\/ol>\n            <\/div>\n            <div class=\"toc-sticky__container__disperse\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script id=\"toc-js\">\n    window.addEventListener(\"DOMContentLoaded\", () => {\n        const header = document.querySelector(\".header_wrapper\");\n\n        const pageLegend = document.querySelector('#multiCollapse1');\n        const pageLegendList = document.querySelector('#multiCollapse2');\n        const pageLegendCollapse = new bootstrap.Collapse(pageLegend, {toggle: document.querySelector(\".toc-sticky\").classList.contains('sticky')});\n\n        \/**\n         * Changing current title\n         *\/\n        (function (pageLegend) {\n            const titleNodes = pageLegend.querySelectorAll('.StepProgress-item__link');\n\n            if (!titleNodes.length) return;\n\n            const titles = [...titleNodes].map((itm, i) => ({\n                id: itm.getAttribute('data-id'),\n                text: itm.textContent,\n                level: itm.getAttribute('data-level'),\n                linkNode: itm,\n                titleNode: document.getElementById(itm.getAttribute('data-id')),\n                index: i,\n            }));\n\n            \/**\n             * Source: https:\/\/www.sitepoint.com\/throttle-scroll-events\/\n             * @param {Function} fn\n             * @param {number} wait\n             * @returns {(function(): void)|*}\n             *\/\n            const throttle = (fn, wait) => {\n                let time = Date.now();\n                return function () {\n                    if ((time + wait - Date.now()) < 0) {\n                        fn();\n                        time = Date.now();\n                    }\n                }\n            }\n\n            const changeCurrentTitle = () => {\n                const documentScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;\n                let current = 0;\n\n                \/\/ Title\n                titles.forEach((itm, i) => {\n\t\t\t\t\/\/console.log(itm)\n                    const itmOffsetTop = itm.titleNode ? itm.titleNode.offsetTop - 100 : 0;\n\n                    if (documentScrollTop >= itmOffsetTop) {\n                        document.getElementById('toc-current-title').innerHTML = itm.text;\n                        document.getElementById('toc-current-title').setAttribute('data-current-id', itm.id);\n                        document.getElementById('toc-current-title').setAttribute('data-current-level', itm.level);\n                        current = i;\n                    }\n                })\n\n                \/\/ close all list and open sub list if needed\n                if (document.querySelector(\".toc-sticky\").classList.contains('sticky')) {\n                    document.querySelectorAll('.subList-in-progress').forEach((el) => {\n                        el.children[1].classList.remove('show');\n                        el.getElementsByClassName('icon-chevron-down')[0].classList.remove('up');\n                    });\n                    const currentEl = titles[current];\n                    currentEl.linkNode.classList.add('show');\n                }\n\n                titles.forEach((itm, i) => {\n                    itm.linkNode.parentNode.parentNode.classList.remove('current', 'is-done');\n                    if (current > i) {\n                        itm.linkNode.parentNode.parentNode.classList.add('is-done')\n                    };\n                    if (current === i) {\n                      itm.linkNode.parentNode.parentNode.classList.add('current');\n                    };\n                })\n\n            }\n\n            changeCurrentTitle();\n\n            document.addEventListener('scroll', throttle(changeCurrentTitle, 50));\n        })(pageLegend);\n\n\n        \/**\n         *  Collapse\n         *\/\n        (function (pageLegend, header) {\n            const icon = pageLegend.parentNode.querySelector(\".collapse-action-btn i\");\n\n            const collapseToggle = (status) => (e) => {\n                if (!e.target.isEqualNode(pageLegend)) return;\n\n                icon.classList.toggle(\"up\");\n\n                const containerHeight = pageLegend.getBoundingClientRect().height;\n\n                const showSubtitleContent = () => {\n                    const currentId = document.getElementById('toc-current-title').getAttribute('data-current-id');\n                    const currentLevel = document.getElementById('toc-current-title').getAttribute('data-current-level');\n                    const currentSubTitle = currentLevel == 3 ? document.querySelector(`a[data-id=\"${currentId}\"]`).parentNode.parentNode.parentNode : false;\n\n                    if (!currentSubTitle) return;\n                    new bootstrap.Collapse(currentSubTitle, {toggle: false}).show();\n                }\n\n                showSubtitleContent();\n                if (status === 'shown' && document.querySelector(\".toc-sticky\").classList.contains('sticky') ) {\n                    document.querySelector('html').classList.remove('overflow-hidden');\n                    pageLegend.classList.add('overflow-auto');\n                    pageLegend.style.height = `calc(100vh - ${header.getBoundingClientRect().height + document.querySelector('.toc-sticky__open').getBoundingClientRect().height + 16}px)`;\n                } else if (status === 'hide') {\n                    document.querySelector('html').classList.remove('overflow-hidden');\n                    pageLegend.classList.remove('overflow-auto');\n                    pageLegend.style.height = 'auto';\n                }\n            }\n\n            pageLegend.addEventListener('shown.bs.collapse', collapseToggle('shown'));\n            pageLegend.addEventListener('hide.bs.collapse', collapseToggle('hide'));\n        })(pageLegend, header);\n\n        \/**\n         * Collapse sub-titles\n         *\/\n        (function (pageLegend) {\n            const collapseEls = pageLegend.querySelectorAll('.collapse');\n\n            collapseEls.forEach(function (el) {\n\n                const toggleArrowDirection = function (e) {\n                    if (!e.target.isEqualNode(el)) return;\n\n                    const id = this.getAttribute('id');\n                    document.querySelector(`.collapse-action-btn[data-bs-target=\"#${id}\"] .icon-chevron-down`).classList.toggle('up');\n                }\n                el.addEventListener('shown.bs.collapse', toggleArrowDirection);\n                el.addEventListener('hide.bs.collapse', toggleArrowDirection);\n            })\n        })(pageLegend);\n\n        \/**\n         *  Collapse main title\n         *\/\n        (function (pageLegendList) {\n            const icon = pageLegendList.parentNode.querySelector(\".collapse-action-btn i\");\n\n            const collapseToggle = () => (e) => {\n                if (!e.target.isEqualNode(pageLegendList)) return;\n\n                icon.classList.toggle(\"up\");\n\n            }\n            pageLegendList.addEventListener('shown.bs.collapse', collapseToggle());\n            pageLegendList.addEventListener('hide.bs.collapse', collapseToggle());\n        })(pageLegendList);\n\n        (function (pageLegendList) {\n            const collapseEls = pageLegendList.querySelectorAll('.collapse');\n\n            collapseEls.forEach(function (el) {\n\n                const toggleArrowDirection = function (e) {\n                    if (!e.target.isEqualNode(el)) return;\n\n                    const id = this.getAttribute('id');\n                    document.querySelector(`.toc-sticky-list .collapse-action-btn[data-bs-target=\"#${id}\"] .icon-chevron-down`).classList.toggle('up');\n                }\n                el.addEventListener('shown.bs.collapse', toggleArrowDirection);\n                el.addEventListener('hide.bs.collapse', toggleArrowDirection);\n            })\n        })(pageLegendList);\n\n        \/**\n         * Sticky functionality\n         * Source: https:\/\/stackoverflow.com\/questions\/17893771\/javascript-sticky-div-after-scroll\n         *\/\n        (function (header, pageLegendCollapse) {\n            \/\/ set everything outside the onscroll event (less work per scroll)\n            const target = document.querySelector(\".toc-sticky\");\n            const targetListStatic = document.querySelector(\".toc-sticky-list\");\n\n            if (!target || !header) return;\n\n            const headerHeight = header.getBoundingClientRect().height;\n            const targetHeight = targetListStatic.getBoundingClientRect().height;\n\n            \/\/ -headerHeight so it won't be jumpy\n            const stop = targetListStatic.offsetTop + headerHeight + targetHeight;\n            const docBody =\n                document.documentElement || document.body.parentNode || document.body;\n            const hasOffset = window.pageYOffset !== undefined;\n\n            const applySticky = function () {\n                \/\/ cross-browser compatible scrollTop.\n                const scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;\n\n                \/\/ if user scrolls to headerHeight from the top of the target div\n                if (scrollTop >= stop) {\n                    pageLegendCollapse.hide();\n                    \/\/ stick the div\n                    target.classList.add(\"sticky\");\n                    \/\/target.style.marginTop = `${headerHeight}px`;\n                } else {\n                    pageLegendCollapse.show();\n                    \/\/ release the div\n                    target.classList.remove(\"sticky\");\n                    target.style.marginTop = \"\";\n                }\n            }\n\n            applySticky();\n\n            window.addEventListener('scroll', applySticky);\n        })(header, pageLegendCollapse);\n\tjQuery('span.show_moretoc').click(function(){\n\t\tjQuery('span.show_moretoc').hide();\n\t   jQuery('.ms_hidetoc').show();\n\t});\n    });\n\n    \/\/ When the user clicks on the button, scroll to the top of the document\n    function btnTop() {\n        const pageLegend = document.querySelector('#multiCollapse1');\n        document.querySelector('html').classList.remove('overflow-hidden');\n        pageLegend.classList.remove('overflow-auto');\n        pageLegend.style.height = 'auto';\n        window.scrollTo({\n            top: 0,\n            behavior: 'smooth'\n        });\n    }\n\n    const handleScrollToTitle = (id) => {\n        const el = document.getElementById(id);\n        const headerHeightDifference = window.innerWidth < 992 ? -30 : -15;\n        window.scrollTo({\n            top: el.offsetTop - 60 - headerHeightDifference - 10,\n        });\n    }\n<\/script>\n\n<h2><span id=\"hyperlink_syntax\">Hyperlink Syntax<\/span><\/h2>\n<p>Hyperlinks have a syntax that&#8217;s defined by HyperText Markup Language.<\/p>\n<div class=\"su-note\"  style=\"border-color:#e5e54c;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\"><div class=\"su-note-inner su-u-clearfix su-u-trim\" style=\"background-color:#FFFF66;border-color:#ffffff;color:#333333;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;\">\n<p><strong>&lt;a href=&#8221;URL&#8221;&gt;Link text&lt;\/a&gt;<\/strong><\/p>\n<\/div><\/div>\n<p>In the example above<strong>, &lt;a<\/strong> is the beginning of the <a href=\"https:\/\/www.techopedia.com\/definition\/1947\/anchor\/\">anchor<\/a> tag. It tells the user&#8217;s browser that what follows is a hyperlink.<\/p>\n<p><strong>href=&#8221;URL&#8221;<\/strong> is an attribute within the anchor tag that specifies the target destination. The target is always enclosed in quotation marks.<\/p>\n<p><strong>Link text<\/strong> is the visible, clickable text users will see on the page. Link text is always placed after the target destination but before the closing anchor tag <strong>&lt;\/a&gt;<\/strong>.<\/p>\n<h2><span id=\"how_hyperlinks_work\">How Hyperlinks Work<\/span><\/h2>\n<p>HTML tags define a hyperlink&#8217;s structure and destination in the source code. The user&#8217;s browser reads the source code, interprets the markup language, and navigates to the specified target destination when the hyperlink is clicked.<\/p>\n<h2><span id=\"types_of_hyperlinks\">Types of Hyperlinks<\/span><\/h2>\n<p>Hyperlinks can be categorized by their function or use case. For example, relative hyperlinks help users navigate to another page or resource within the same website, and email hyperlinks will open an email client with a pre-filled recipient address.<\/p>\n<div class=\"su-table su-table-responsive su-table-alternate\">\n<table>\n<tbody>\n<tr>\n<th>Type of hyperlink<\/th>\n<th>Functionality<\/th>\n<th>Example<\/th>\n<th>Use \u0441ase<\/th>\n<\/tr>\n<tr>\n<td>Text hyperlinks<\/td>\n<td>Clickable text that links to another destination.<\/td>\n<td>&lt;a href=&#8221;https:\/\/abc.com&#8221;&gt;Go&lt;\/a&gt;<\/td>\n<td>Navigate to different sections of a webpage or different online resources.<\/td>\n<\/tr>\n<tr>\n<td>Image hyperlinks<\/td>\n<td>Images that act as clickable links.<\/td>\n<td>&lt;a href=&#8221;https:\/\/abc.com&#8221;&gt;&lt;img src=&#8221;imageZ.jpg&#8221; alt=&#8221;ImageZ&#8221;&gt;&lt;\/a&gt;<\/td>\n<td>Often used for banners, advertisements, and other types of visual navigation.<\/td>\n<\/tr>\n<tr>\n<td>Button hyperlinks<\/td>\n<td>Buttons styled with CSS or <a href=\"https:\/\/www.techopedia.com\/top-10-programming-languages\">JavaScript<\/a> that function as hyperlinks.<\/td>\n<td>&lt;button onclick=&#8221;location.href=&#8217;https:\/\/abc.com'&#8221;&gt;Go&lt;\/button&gt;<\/td>\n<td>Used for interactive designs, forms, and call-to-action elements.<\/td>\n<\/tr>\n<tr>\n<td>Anchor (in-page) links<\/td>\n<td>Navigate to a specific section within the same webpage.<\/td>\n<td>&lt;a href=&#8221;#section2&#8243;&gt;Go to Section 2&lt;\/a&gt;<br \/>\n&lt;h2 id=&#8221;section2&#8243;&gt;Section 2&lt;\/h2&gt;<\/td>\n<td>Used for table of contents and &#8216;back to top&#8217; buttons.<\/td>\n<\/tr>\n<tr>\n<td>Email links<\/td>\n<td>Open an email client with a pre-filled recipient address.<\/td>\n<td>&lt;a href=&#8221;mailto:example@example.com&#8221;&gt;Email Us&lt;\/a&gt;<\/td>\n<td>Provides an easy way to contact someone via <a href=\"https:\/\/www.techopedia.com\/definition\/email-address\">email<\/a>.<\/td>\n<\/tr>\n<tr>\n<td>Phone links<\/td>\n<td>Initiate a phone call when clicked (mainly on mobile devices).<\/td>\n<td>&lt;a href=&#8221;tel:+1234567890&#8243;&gt;Call Us&lt;\/a&gt;<\/td>\n<td>Provides click-to-call functionality for businesses.<\/td>\n<\/tr>\n<tr>\n<td>Download links<\/td>\n<td>Triggers a file download.<\/td>\n<td>&lt;a href=&#8221;file.pdf&#8221; download=&#8221;document.pdf&#8221;&gt;Download PDF&lt;\/a&gt;<\/td>\n<td>Used to share documents, <a href=\"https:\/\/www.techopedia.com\/definition\/4356\/software\">software<\/a>, or media files.<\/td>\n<\/tr>\n<tr>\n<td>External links<\/td>\n<td>Takes users to a different website or domain.<\/td>\n<td>&lt;a href=&#8221;https:\/\/example.com&#8221; target=&#8221;_blank&#8221;&gt;Visit Example&lt;\/a&gt;<\/td>\n<td>Provides 1-click access to a partner site or useful information on another website.<\/td>\n<\/tr>\n<tr>\n<td>Relative links<\/td>\n<td>Links to another page or resource within the same website, using a relative path.<\/td>\n<td>&lt;a href=&#8221;\/about&#8221;&gt;About Us&lt;\/a&gt;<\/td>\n<td>Internal navigation within the same website.<\/td>\n<\/tr>\n<tr>\n<td>Absolute links<\/td>\n<td>Full links that include the entire <a href=\"https:\/\/www.techopedia.com\/definition\/1352\/uniform-resource-locator-url\">URL<\/a>. Can be used to link to any resource.<\/td>\n<td>&lt;a href=&#8221;https:\/\/example.com\/about&#8221;&gt;About Us&lt;\/a&gt;<\/td>\n<td>Used for internal or external navigation.<\/td>\n<\/tr>\n<tr>\n<td>JavaScript links<\/td>\n<td>Trigger a JavaScript function.<\/td>\n<td>&lt;a href=&#8221;javascript:void(0);&#8221; onclick=&#8221;alert(&#8216;Hello!&#8217;)&#8221;&gt;Click Me&lt;\/a&gt;<\/td>\n<td>Used for interactive web elements and dynamic content.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3>Hyperlink Functions<\/h3>\n<p>The function of a specific hyperlink can be determined by reading the source code and examining the anchor tag&#8217;s attributes. The attributes define the hyperlink&#8217;s behavior and determine what action will occur when it is clicked.<\/p>\n<h2><span id=\"hyperlinks_vs_link_url\">Hyperlinks vs. Link &amp; URL<\/span><\/h2>\n<p>In everyday conversation, the terms &#8216;hyperlink&#8217; and &#8216;link&#8217; are often used as synonyms for &#8220;that thing you click on&#8221; to go to the next URL. Technically, however, the three terms have slightly different meanings:<\/p>\n<ul>\n<li><strong>Link<\/strong> refers to the destination target.<\/li>\n<li><strong>Hyperlink<\/strong> refers to the clickable element as well as the destination target.<\/li>\n<li><strong>URL<\/strong>, which stands for uniform resource locator, refers to the destination target&#8217;s address.<\/li>\n<\/ul>\n<h2><span id=\"hyperlinks_and_seo\">Hyperlinks and SEO<\/span><\/h2>\n<p><a href=\"https:\/\/www.techopedia.com\/definition\/12708\/search-engine-world-wide-web\">Search engines<\/a> use automated programs called bots or crawlers to discover and index web pages. Essentially, they follow hyperlinks to navigate (crawl) through a website and understand its content. The anchor text used in hyperlinks provides clues about the content of the linked pages.<\/p>\n<p>Here are some suggestions for how hyperlinks can be optimized for <a href=\"https:\/\/www.techopedia.com\/definition\/5391\/search-engine-optimization-seo\">search engine optimization<\/a> (SEO):<\/p>\n<div class=\"su-list\" style=\"margin-left:0px\">\n<ul>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Create a logical internal linking structure that connects relevant <a href=\"https:\/\/www.techopedia.com\/definition\/4774\/web-page-page\">web pages<\/a> within your <a href=\"https:\/\/www.techopedia.com\/definition\/5411\/website\">website<\/a><\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Use relevant <a href=\"https:\/\/www.techopedia.com\/definition\/1215\/keyword-seo\">keywords<\/a> in anchor text to provide context for both search engines and users<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Make sure hyperlinks are easy to identify and click on and that they work correctly<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Earn backlinks from reputable, relevant websites<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Avoid manipulative link-building tactics like buying inbound links or engaging in link trading schemes<\/li>\n<\/ul>\n<\/div>\n<h2><span id=\"hyperlinks_and_security\">Hyperlinks and Security<\/span><\/h2>\n<p>It&#8217;s important for end users to understand that hyperlinks can be exploited by <a href=\"https:\/\/www.techopedia.com\/definition\/threat-actor\">threat actors<\/a> and <a href=\"https:\/\/www.techopedia.com\/definition\/27435\/cybercriminal\">cybercriminals<\/a>. <a href=\"https:\/\/www.techopedia.com\/definition\/4015\/malicious-software-malware\">Malicious<\/a> hyperlinks that are purposely created to resemble legitimate links can be embedded in emails, <a href=\"https:\/\/www.techopedia.com\/definition\/4837\/social-media\">social media<\/a> posts, or websites.<\/p>\n<p>To stay safe, users should exercise caution by hovering over links to check their true destination, being wary of shortened URLs, and relying on reputable <a href=\"https:\/\/www.techopedia.com\/definition\/antivirus-software\">antivirus software<\/a> to detect threats.<\/p>\n<p><a href=\"https:\/\/www.techopedia.com\/definition\/vpn-virtual-private-network\">Virtual private networks<\/a> (VPNs) can add an extra layer of security by encrypting internet traffic and masking the user&#8217;s <a href=\"https:\/\/www.techopedia.com\/definition\/2435\/internet-protocol-address-ip-address\">IP address<\/a>. The best <a href=\"https:\/\/www.techopedia.com\/vpn\/best-mobile-vpn\">mobile VPNs<\/a> can make it more difficult for cybercriminals to track Internet users in public places and prevent them from <a href=\"https:\/\/www.techopedia.com\/definition\/4018\/man-in-the-middle-attack-mitm\">intercepting sensitive data<\/a>.<\/p>\n<h2><span id=\"hyperlink_pros_cons\">Hyperlink Pros &amp; Cons<\/span><\/h2>\n<p>Like any application of technology on the Internet, hyperlinks have both advantages and disadvantages:<\/p>\n<div class=\"su-row\"><div class=\"su-column su-column-size-1-2\"><div class=\"su-column-inner su-u-clearfix su-u-trim\">\n<h3>Pros<\/h3>\n<div class=\"su-list\" style=\"margin-left:0px\">\n<ul>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Make it easy for users to navigate related online resources<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Help search engine bots crawl and index web content<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Internal links can encourage engagement and keep users on a website longer<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> External and inbound links can enhance credibility<\/li>\n<li><i class=\"sui sui-check-circle\" style=\"color:#3CB371\"><\/i> Can be styled to match a website&#8217;s design and serve a variety of purposes<\/li>\n<\/ul>\n<\/div><\/div><\/div>\n<div class=\"su-column su-column-size-1-2 pros_icons_\"><div class=\"su-column-inner su-u-clearfix su-u-trim\">\n<h3>Cons<\/h3>\n<div class=\"su-list\" style=\"margin-left:0px\">\n<ul>\n<li><i class=\"sui sui-remove\" style=\"color:#e31f28\"><\/i> Require an active internet connection to work<\/li>\n<li><i class=\"sui sui-remove\" style=\"color:#e31f28\"><\/i> Can be exploited for malicious purposes<\/li>\n<li><i class=\"sui sui-remove\" style=\"color:#e31f28\"><\/i> Broken hyperlinks need to be fixed or removed<\/li>\n<li><i class=\"sui sui-remove\" style=\"color:#e31f28\"><\/i> Too many hyperlinks on a page can overwhelm users and confuse SEO bots<\/li>\n<li><i class=\"sui sui-remove\" style=\"color:#e31f28\"><\/i> Linking to unreliable or malicious websites can damage a site&#8217;s credibility and security<\/li>\n<\/ul>\n<\/div><\/div><\/div><\/div>\n<h2><span id=\"the_bottom_line\">The Bottom Line<\/span><\/h2>\n<p>Over the years, the basic definition of hyperlink has remained the same, but the use cases have evolved.<\/p>\n<p>In the early days of the World Wide Web, hyperlinks provided basic navigation. Today, hyperlinks are a powerful tool for improving navigation, engagement, and search engine results when used thoughtfully and strategically.<\/p>\n<p>In the future, you can expect hyperlinks to trigger interactive elements in <a href=\"https:\/\/www.techopedia.com\/definition\/augmented-reality-ar\">augmented reality<\/a> and <a href=\"https:\/\/www.techopedia.com\/definition\/4784\/virtual-reality-vr\">virtual reality<\/a> (AR\/VR) environments. The flexibility that hyperlinks have will help developers create new ways for people to explore web content and acquire information.<\/p>\n<h2><span id=\"faqs\">FAQs<\/span><\/h2>\n<div class=\"man_faq_sec\" itemscope itemtype=\"https:\/\/schema.org\/FAQPage\"><\/time><section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is a hyperlink in simple terms?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">A hyperlink, meaning a clickable element on a webpage, is a coded instruction that tells a web browser where to go or what to do when clicked.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is an example of a hyperlink?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\"><a href=https:&#8221;Techopedia.com&#8221;>Techopedia<\/a>.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">How do you create a hyperlink?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">You can create a hyperlink manually by using anchor tags and href attributes. You can create text hyperlinks in some apps by highlighting the words you want to use as anchor text, choosing &#8220;link&#8221; or &#8220;hyperlink&#8221; from the menu, and pasting in the target URL.<\/p>\r\n                <\/div><\/div><\/section>\n<section class=\"ms_faq ms_card \" ><div itemscope itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><div class=\"accordionButton\"><h3 itemprop=\"name\">What is the difference between a URL and a hyperlink?<\/h3> <\/div>\n<div class=\"accordionContent\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\" style=\"display:none;\"><p itemprop=\"text\">A URL is the address of an online resource. A hyperlink is a clickable element on a web page that a browser uses to navigate to the URL.<\/p>\r\n                <\/div><\/div><\/section>\n<div class=\"reference-content\">\n<div class=\"reference-heading reference-content-collapsible-heading\">\n<h2><span id=\"references\">References<\/span><\/h2>\n<\/div>\n<div class=\"reference-content-body\">\n<ol>\n<li><a href=\"https:\/\/www.w3schools.com\/css\/css_intro.asp\" target=\"_blank\">CSS Introduction<\/a> (W3schools)<\/li>\n<\/ol>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>What Does Hyperlink Mean? A hyperlink is a clickable element in a hypertext markup language (HTML) document that links a source to a target. When used strategically, hyperlinks are a powerful navigation tool that can also be used to improve user engagement and search engine performance. Hyperlinks are important because they form the foundation of [&hellip;]<\/p>\n","protected":false},"author":7813,"featured_media":378218,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_lmt_disableupdate":"","_lmt_disable":"","om_disable_all_campaigns":false,"footnotes":""},"definitioncat":[245],"class_list":["post-4308","definition","type-definition","status-publish","format-standard","has-post-thumbnail","hentry","definitioncat-internet"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v24.5) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>What is a Hyperlink? Definition, Types &amp; Use Cases - Techopedia<\/title>\n<meta name=\"description\" content=\"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.\" \/>\n<meta name=\"robots\" content=\"noindex, follow\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hyperlink\" \/>\n<meta property=\"og:description\" content=\"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.techopedia.com\/definition\/hyperlink\" \/>\n<meta property=\"og:site_name\" content=\"Techopedia\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/techopedia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-24T12:20:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"2400\" \/>\n\t<meta property=\"og:image:height\" content=\"1311\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@techopedia\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink\"},\"author\":{\"name\":\"Margaret Rouse\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5\"},\"headline\":\"Hyperlink\",\"datePublished\":\"2011-07-23T16:22:50+00:00\",\"dateModified\":\"2025-01-24T12:20:26+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink\"},\"wordCount\":1527,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.techopedia.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.techopedia.com\/definition\/hyperlink#respond\"]}],\"articleSection\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink\",\"url\":\"https:\/\/www.techopedia.com\/definition\/hyperlink\",\"name\":\"What is a Hyperlink? Definition, Types & Use Cases - Techopedia\",\"isPartOf\":{\"@id\":\"https:\/\/www.techopedia.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg\",\"datePublished\":\"2011-07-23T16:22:50+00:00\",\"dateModified\":\"2025-01-24T12:20:26+00:00\",\"description\":\"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.techopedia.com\/definition\/hyperlink\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg\",\"width\":2400,\"height\":1311,\"caption\":\"Illustration of a person sitting on a couch with a laptop, and a document icon with an arrow indicating the connection to another source, symbolizing a hyperlink.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.techopedia.com\/definition\/hyperlink#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.techopedia.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tech 101\",\"item\":\"https:\/\/www.techopedia.com\/topic\/248\/tech-101\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Internet\",\"item\":\"https:\/\/www.techopedia.com\/topic\/102\/internet\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Term\",\"item\":\"https:\/\/www.techopedia.com\/definition\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Hyperlink\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.techopedia.com\/#website\",\"url\":\"https:\/\/www.techopedia.com\/\",\"name\":\"Techopedia\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/www.techopedia.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.techopedia.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.techopedia.com\/#organization\",\"name\":\"Techopedia\",\"url\":\"https:\/\/www.techopedia.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg\",\"caption\":\"Techopedia\"},\"image\":{\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/techopedia\/\",\"https:\/\/x.com\/techopedia\",\"https:\/\/www.linkedin.com\/company\/techopedia\/\",\"https:\/\/www.youtube.com\/c\/Techopedia\"],\"publishingPrinciples\":\"https:\/\/www.techopedia.com\/about\/editorial-policy\",\"ownershipFundingInfo\":\"https:\/\/www.techopedia.com\/about\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5\",\"name\":\"Margaret Rouse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.techopedia.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg\",\"contentUrl\":\"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg\",\"caption\":\"Margaret Rouse\"},\"description\":\"Margaret is an award-winning technical writer and teacher known for her ability to explain complex technical subjects to a non-technical business audience. Over the past twenty years, her IT definitions have been published by Que in an encyclopedia of technology terms and cited in articles by the New York Times, Time Magazine, USA Today, ZDNet, PC Magazine, and Discovery Magazine. She joined Techopedia in 2011. Margaret's idea of a fun day is helping IT and business professionals learn to speak each other\u2019s highly specialized languages.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/margaretrouse\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/@techdefinitions\"],\"knowsAbout\":[\"Technology Expert\"],\"url\":\"https:\/\/www.techopedia.com\/contributors\/margaret-rouse\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"What is a Hyperlink? Definition, Types & Use Cases - Techopedia","description":"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.","robots":{"index":"noindex","follow":"follow"},"og_locale":"en_US","og_type":"article","og_title":"Hyperlink","og_description":"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.","og_url":"https:\/\/www.techopedia.com\/definition\/hyperlink","og_site_name":"Techopedia","article_publisher":"https:\/\/www.facebook.com\/techopedia\/","article_modified_time":"2025-01-24T12:20:26+00:00","og_image":[{"width":2400,"height":1311,"url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_site":"@techopedia","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#article","isPartOf":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink"},"author":{"name":"Margaret Rouse","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5"},"headline":"Hyperlink","datePublished":"2011-07-23T16:22:50+00:00","dateModified":"2025-01-24T12:20:26+00:00","mainEntityOfPage":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink"},"wordCount":1527,"commentCount":0,"publisher":{"@id":"https:\/\/www.techopedia.com\/#organization"},"image":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage"},"thumbnailUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.techopedia.com\/definition\/hyperlink#respond"]}],"articleSection":""},{"@type":"WebPage","@id":"https:\/\/www.techopedia.com\/definition\/hyperlink","url":"https:\/\/www.techopedia.com\/definition\/hyperlink","name":"What is a Hyperlink? Definition, Types & Use Cases - Techopedia","isPartOf":{"@id":"https:\/\/www.techopedia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage"},"image":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage"},"thumbnailUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg","datePublished":"2011-07-23T16:22:50+00:00","dateModified":"2025-01-24T12:20:26+00:00","description":"A hyperlink allows a web page element, such as text or an image, to become clickable. Hyperlinks use HTML to link related documents, web pages, and websites.","breadcrumb":{"@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.techopedia.com\/definition\/hyperlink"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#primaryimage","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2011\/07\/Techopedia-Explains-Hyperlink-Definition.jpg","width":2400,"height":1311,"caption":"Illustration of a person sitting on a couch with a laptop, and a document icon with an arrow indicating the connection to another source, symbolizing a hyperlink."},{"@type":"BreadcrumbList","@id":"https:\/\/www.techopedia.com\/definition\/hyperlink#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.techopedia.com\/"},{"@type":"ListItem","position":2,"name":"Tech 101","item":"https:\/\/www.techopedia.com\/topic\/248\/tech-101"},{"@type":"ListItem","position":3,"name":"Internet","item":"https:\/\/www.techopedia.com\/topic\/102\/internet"},{"@type":"ListItem","position":4,"name":"Term","item":"https:\/\/www.techopedia.com\/definition"},{"@type":"ListItem","position":5,"name":"Hyperlink"}]},{"@type":"WebSite","@id":"https:\/\/www.techopedia.com\/#website","url":"https:\/\/www.techopedia.com\/","name":"Techopedia","description":"","publisher":{"@id":"https:\/\/www.techopedia.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.techopedia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.techopedia.com\/#organization","name":"Techopedia","url":"https:\/\/www.techopedia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2025\/02\/techopedia-light-logo.svg","caption":"Techopedia"},"image":{"@id":"https:\/\/www.techopedia.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/techopedia\/","https:\/\/x.com\/techopedia","https:\/\/www.linkedin.com\/company\/techopedia\/","https:\/\/www.youtube.com\/c\/Techopedia"],"publishingPrinciples":"https:\/\/www.techopedia.com\/about\/editorial-policy","ownershipFundingInfo":"https:\/\/www.techopedia.com\/about"},{"@type":"Person","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/f5dd538e31ee352d105b8af36c4268a5","name":"Margaret Rouse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.techopedia.com\/#\/schema\/person\/image\/","url":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg","contentUrl":"https:\/\/www.techopedia.com\/wp-content\/uploads\/2023\/02\/margaret-rouse-headshot.jpeg","caption":"Margaret Rouse"},"description":"Margaret is an award-winning technical writer and teacher known for her ability to explain complex technical subjects to a non-technical business audience. Over the past twenty years, her IT definitions have been published by Que in an encyclopedia of technology terms and cited in articles by the New York Times, Time Magazine, USA Today, ZDNet, PC Magazine, and Discovery Magazine. She joined Techopedia in 2011. Margaret's idea of a fun day is helping IT and business professionals learn to speak each other\u2019s highly specialized languages.","sameAs":["https:\/\/www.linkedin.com\/in\/margaretrouse\/","https:\/\/x.com\/https:\/\/twitter.com\/@techdefinitions"],"knowsAbout":["Technology Expert"],"url":"https:\/\/www.techopedia.com\/contributors\/margaret-rouse"}]}},"_links":{"self":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition\/4308","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition"}],"about":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/types\/definition"}],"author":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/users\/7813"}],"replies":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/comments?post=4308"}],"version-history":[{"count":3,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition\/4308\/revisions"}],"predecessor-version":[{"id":379864,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definition\/4308\/revisions\/379864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/media\/378218"}],"wp:attachment":[{"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/media?parent=4308"}],"wp:term":[{"taxonomy":"definitioncat","embeddable":true,"href":"https:\/\/www.techopedia.com\/wp-json\/wp\/v2\/definitioncat?post=4308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}