Html pages link codes

HTML Tag

The tag defines the relationship between the current document and an external resource.

The tag is most often used to link to external style sheets or to add a favicon to your website.

The element is an empty element, it contains attributes only.

Browser Support

Attributes

Attribute Value Description
crossorigin anonymous
use-credentials
Specifies how the element handles cross-origin requests
href URL Specifies the location of the linked document
hreflang language_code Specifies the language of the text in the linked document
media media_query Specifies on what device the linked document will be displayed
referrerpolicy no-referrer
no-referrer-when-downgrade
origin
origin-when-cross-origin
unsafe-url
Specifies which referrer to use when fetching the resource
rel alternate
author
dns-prefetch
help
icon
license
next
pingback
preconnect
prefetch
preload
prerender
prev
search
stylesheet
Required. Specifies the relationship between the current document and the linked document
sizes HeightxWidth
any
Specifies the size of the linked resource. Only for rel=»icon»
title Defines a preferred or an alternate stylesheet
type media_type Specifies the media type of the linked document
Читайте также:  Html float left это

Global Attributes

Event Attributes

Default CSS Settings

Most browsers will display the element with the following default values:

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Websites contain different types of links that take you directly to other pages or allow to navigate to a particular part of the page. The links in HTML are called hyperlinks. They are defined using the tag.

Hyperlinks are applied to a phrase, a word, an image or any HTML element.

The default color of links in HTML is:

  • unvisited links: underlined and blue
  • visited links: underlined and purple
  • active links: underlined and red

This is default style of links, but you can can remove underline or change the color of the links using CSS styles.

Syntax

Example of the HTML tag with the href attribute:

html> html> head> title>Title of the document title> head> body> h2>Link example h2> a href="https://www.w3docs.com/">W3Docs.com a> body> html>

Result

hyperlink

In the example above, we used to define subheadings and the tag to create links. Between and tags we have W3Docs.com. Click on it and it will redirect you to the homepage of our website.

Target Attribute

To open a link in a new page, you need to add target=»_blank» to your code. The target attribute specifies where exactly to open the linked page. With target=»_blank» the linked page will open in a new window or in a new tab.

ID Attribute

To navigate to a specific part of the page, use the id attribute.

Here is how you should do it:

  1. Use id attribute to give a name to the part of the page, where a user should be redirected after clicking on the link. The value of the attribute can be a word or a phrase that describe that part (if you use a phrase, there should be no spaces — use underscores instead.)
    Ex. Link example with id attribute. We used attribute id called «jump»..
  1. Create a hyperlink using the id of the link target, preceded by hash (# )
    Ex. When you click on this link, you will be redirected to the part of the page with «jump» id .

Now let’s see how this will look like in HTML code. In the example below, scroll down to the link at the bottom, click the link, and you’ll return again to the top.

Example of the HTML tag with the id attribute:

html> html> head> title>Title of the document title> head> body> h2 id="jump">Link example with id attribute h2> p> Here can be any part of the page you want to the user to end up clicking on hyperlink. We use attribute id called “jump”. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum ut ipsum quis elementum. Curabitur a sem a ante pulvinar tincidunt. Nullam posuere arcu in erat laoreet, vitae efficitur ex venenatis. Quisque in fermentum nunc, vel consequat risus. Suspendisse risus purus, semper quis tempus eget, iaculis euismod velit. Quisque mi nunc, cursus et suscipit eget, gravida et nisi. Duis eros massa, eleifend eget tincidunt in, porta sit amet ante. Nunc eu feugiat quam. Morbi vel sapien ac dolor ultricies dapibus quis quis libero. Cras et auctor leo. p> p> Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem. p> p> Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor. p> p> Phasellus ultrices at neque sit amet varius. Fusce molestie lacinia lorem, eu interdum urna tempor malesuada. Etiam nec ultricies nisi, ut fringilla nibh. Phasellus arcu metus, ultrices eu ipsum eu, fermentum fermentum tellus. Cras blandit massa turpis, eu condimentum purus suscipit ut. In hac habitasse platea dictumst. Sed nec magna sit amet mi congue aliquam. Integer tempor lobortis eros, ut finibus tortor fringilla id. Mauris mollis sollicitudin justo, et condimentum lacus. Nam tellus velit, efficitur nec efficitur eu, pharetra ac tortor. Mauris vitae sagittis purus. p> p> Donec accumsan sapien vitae diam commodo lobortis. Nam feugiat ullamcorper malesuada. Praesent fermentum nulla quis mauris consequat mollis. In lacus libero, laoreet nec aliquam in, vestibulum quis dui. Donec congue enim et lorem lobortis, ut suscipit augue congue. Integer efficitur ligula nec lectus aliquet, in luctus magna efficitur. Mauris euismod mauris viverra enim tincidunt efficitur. Ut imperdiet quis lorem in tincidunt. Nam magna orci, venenatis et felis rhoncus, semper maximus eros. Proin mauris mauris, sodales quis eleifend vel, convallis in leo. Curabitur vel auctor lacus. Integer vestibulum nisi magna, id malesuada erat consequat quis. Vivamus iaculis aliquam ullamcorper. Aenean faucibus posuere rhoncus. Mauris tincidunt magna velit, sed semper arcu venenatis non. Sed odio risus, luctus eget aliquam vel, elementum id sem. p> p> Ut imperdiet pharetra nisl ut mollis. Aenean neque odio, volutpat a imperdiet sit amet, sollicitudin non dolor. Donec velit odio, lacinia sed dui in, dignissim consequat sem. Nullam vel vestibulum mi, ornare lacinia diam. Vivamus sed vestibulum ligula, a tempor magna. Nulla vitae nisi ligula. Vivamus euismod tincidunt justo varius rhoncus. Aliquam vitae enim odio. Nunc pretium, odio in fermentum fringilla, ipsum nulla aliquet magna, ac aliquet dui tellus viverra lacus. In vel feugiat elit. Nulla a pretium nunc, consequat blandit tellus. Proin sit amet molestie eros. Aliquam sit amet quam tincidunt, egestas nunc ut, vehicula tellus. Donec ullamcorper, ipsum cursus rutrum fermentum, ipsum sem semper orci, quis ultrices odio turpis sit amet tortor. p> p> Fusce ultricies ex eros, et maximus est feugiat vel. Ut non nunc turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi viverra eu dui congue pulvinar. Donec tincidunt, nulla sed sodales iaculis, felis sem dapibus sem, et viverra justo massa sed magna. Vestibulum eleifend ex vitae mattis iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. p> a href="#jump">When we click on this link, we will be redirected to the part of the page with “jump” id a> body> html>

To apply a hyperlink to an image, you just need to put the image in the tag. This is done with the tag, which should have some required attributes:

  1. src — the source of the image
  2. alt — alternative text for the image
  3. width — width of the image
  4. height — height of the image
html> html> head> title>Title of the document title> head> body> a href="https://www.w3docs.com/"> img src="/uploads/media/default/0001/01/0710cad7a1017902166203def268a0df2a5fd545.png" width="190" height="45" alt="logo" /> a> body> html>

HTML images will be covered in depth in the next chapter.

The title attribute is used for specifying additional information about an element. This information is often displayed as a tooltip text when you move the mouse over the element.

html> html> head> title>Title of the document title> head> body> h1>Link Title Example h1> p> Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. p> p>The span class="attribute">title span> attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. p> a href="https://www.w3docs.com/learn-html.html" title="Learn HTML">Learn more about HTML a> body> html>

External Paths

You can reference external pages with URL or a path that is corresponding to the current web page. The example below shows how you can do this:

Example of the HTML tag for referencing an external page with its URL:

html> html> head> title>Title of the document title> head> body> h1>External paths h1> div>Example of referencing an external page with its URL div> p>a href="https://en.wikipedia.org/wiki/HTML">More about HTML a> p> body> html>

Источник

Оцените статью