Links are embeded in all web pages. It allows users to visit multiple pages. HTML links are hyperlinks. You can click on a link and jump to another page or website. When you move the mouse over a link, the cursor changes. A link does not necessarily have to be text. It can be an image or any other HTML element.
In HTML, links are defined with the <a> tag which are underlined and displayed in a different color by browsers as default style.
<a href="url">content to be displayed as link</a>
The href attribute defines the destination web address of the link whereas the content placed inside the <a></a> is the only content visible in the web page.
<a href="https://www.webtrickshome.com/content/html-introduction">HTML Inroduction</a>
The example above shows an URL starting from the http base of a web page which is termed as an absolute URL. This type of URL is required to be added to a link when you need to link pages of another websites in your web page.
<a href="html-images.html">HTML Images</a>
Relative URLs are the links to web pages within the same website and are generally located in the same directory as the page from where they are being linked. If those pages are located in a different directory or sub-directory, then, those directories or sub-directories are also required to be included in the URL path.
<a href="pages/html-images.html">HTML Images</a>
Links are styled by browsers by default as follows:
You can change the way links appear in your web page using CSS which you will learn later.
HTML links open on the same window on which you clicked the link by default. You can open the link in the same window or on a new window or an iframe using target attribute. The options from which you can choose one to add as the value for the target are listed below.
<a href="https://www.webtrickshome.com/content/html-introduction" target="_blank">HTML Inroduction</a>
The title attribute can also be added to a link which will display information as tool tip when the mouse is moved over the link element.
<a href="https://www.webtrickshome.com/content/html-introduction" target="_blank" title="Go to HTML Introduction Lesson">HTML Inroduction</a>
HTML bookmarks are used to allow readers to jump to specific parts of a Web page which is highly useful in cases where the web page is too long.
You can add some links on the page and display them on some convenient location from where the users can scroll to a specific content section within the page easily instead of jumping to other pages or websites.
You can easily create such bookmarks using the id attribute.
<a href="#lesson4">Lesson 4</a> <p id="lesson4">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
The bookmark link can be placed on the top of the page while the bookmarked section can be placed anywhere within the page in the logical sequence.
Once the bookmark link is clicked, the browser will automatically gets scrolled to the bookmarked lesson 4 section.
Leave a comment