Related Topics
CSS
HTML
<a href="https://example.com">Click here to visit Example website</a>
In this example, the href attribute specifies the URL of the website that the link will point to. The text “Click here to visit Example website” is the anchor text that the user will see and click on to follow the link.
You can also create a link that opens in a new tab or window by adding the target="_blank" attribute to the anchor tag:
<a href="https://example.com" target="_blank">Click here to visit Example website in a new tab</a>
In this example, the href attribute specifies the URL of the website that the link will point to. The text “Click here to visit Example website” is the anchor text that the user will see and click on to follow the link.
You can also create a link that opens in a new tab or window by adding the target="_blank" attribute to the anchor tag:
<a href="https://example.com" target="_blank">Click here to visit Example website in a new tab</a>
By default, HTML links are displayed in blue and underlined text, but you can customize the appearance of the link using CSS styles.
<a href="about.html">About Us</a>
In this example, the URL “about.html” is relative to the current web page. If the current page is located at “https://example.com/index.html“, then the link will point to “https://example.com/about.html“.
On the other hand, an absolute URL includes the complete address of the resource:
<a href="https://example.com/about.html">About Us</a>
In this example, the URL “https://example.com/about.html” is an absolute URL, and it specifies the complete address of the resource. The link will always point to the same location, regardless of the current web page.
The main difference between relative and absolute URLs is that relative URLs are shorter and easier to maintain, while absolute URLs are more precise and reliable. Relative URLs are often used within a website, while absolute URLs are used when linking to external resources or when the website’s domain changes.
<a href="mailto:example@example.com">Send email to Example</a>
In this example, when a user clicks on the link, it will open their default email client with a new message addressed to “example@example.com“.
You can also add additional information to the email, such as the subject or body of the message, by including the appropriate parameters in the href attribute:
<a href="mailto:example@example.com?subject=Regarding%20your%20website&body=Hello%20Example,">Send email to Example with subject and body</a>
In this example, the subject parameter specifies the subject of the email (“Regarding your website”), and the body parameter specifies the body of the email (“Hello Example,”).
Note that any spaces in the parameter values should be replaced with %20 to ensure proper URL encoding.
<a href="https://example.com" target="_blank">Open Example website in a new tab</a>
In this example, the target attribute is set to _blank, which means that when the user clicks on the link, the linked document (in this case, the Example website) will open in a new browser window or tab.
It’s worth noting that the target attribute is not recommended for accessibility reasons, as it can confuse users who rely on assistive technology. Instead, it’s recommended to use other HTML attributes and elements, such as aria-describedby and <button>, to provide clear and descriptive links.
<a href="#section1">Go to Section 1</a>
...
<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>
In this example, the href attribute is set to #section1, which corresponds to the id attribute of the <h2> element with the same value. When the user clicks on the link, the browser will scroll to the section of the page that has the id value of section1, which in this case is the <h2> element.
You can create multiple bookmark links within the same page, and link to different sections of the page using their respective id values.
Note that the id attribute should be unique within the page to ensure that the bookmark link works properly. Also, make sure to test the bookmark link in different browsers to ensure that it works as expected.
<h2 name="section1">Section 1</h2>
<p>This is the content of section 1.</p>
In this example, the <h2> element has the name attribute set to “section1”, creating a named anchor for that section of the page.
To create a link that refers to this named anchor, you can use an anchor tag with the href attribute set to #section1:
<a href="#section1">Go to Section 1</a>
When the user clicks on this link, the browser will scroll to the section of the page that has the name attribute of section1, which in this case is the <h2> element.
Named anchors are useful for creating table of contents or navigation menus within a page, as well as for linking to specific sections of a page from other pages.
<h2 id="section1">Section 1</h2>
<p>This is the content of section 1.</p>
And then link to it using an anchor tag with the href attribute set to #section1:
<a href="#section1">Go to Section 1</a>
Using the name attribute, you can create a named anchor like this:
<h2 name="section1">Section 1</h2>
<p>This is the content of section 1.</p>
<h2 name=”section1″>Section 1</h2>
<p>This is the content of section 1.</p>
And then link to it using an anchor tag with the href attribute set to #section1:
<a href="#section1">Go to Section 1</a>
While both approaches work, the id attribute is recommended because it is supported by all major web browsers and is more specific. Additionally, the name attribute has been deprecated in HTML5, so it is no longer recommended to use it for anchor links.
Popular Category
Topics for You
CSS
Go through our study material. Your Job is awaiting.