<a>: The Anchor element
The <a> HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
Content within each <a> should indicate the link’s destination. If the href attribute is present, pressing the enter key while focused on the <a> element will activate it.
Try it
Attributes
This element’s attributes include the global attributes.
Causes the browser to treat the linked URL as a download. Can be used with or without a filename value:
- Without a value, the browser will suggest a filename/extension, generated from various sources:
- The Content-Disposition HTTP header
- The final segment in the URL path
- The media type (from the Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)
Note:
- download only works for same-origin URLs, or the blob: and data: schemes.
- How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself.
- If the Content-Disposition header has different information from the download attribute, resulting behavior may differ:
- If the header specifies a filename , it takes priority over a filename specified in the download attribute.
- If the header specifies a disposition of inline , Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline.
The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers:
- Sections of a page with document fragments
- Specific text portions with text fragments
- Pieces of media files with media fragments
- Telephone numbers with tel: URLs
- Email addresses with mailto: URLs
- While web browsers may not support other URL schemes, websites can with registerProtocolHandler()
Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.
A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking.
How much of the referrer to send when following the link.
- no-referrer : The Referer header will not be sent.
- no-referrer-when-downgrade : The Referer header will not be sent to origins without TLS (HTTPS).
- origin : The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.
- origin-when-cross-origin : The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.
- same-origin : A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.
- strict-origin : Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don’t send it to a less secure destination (HTTPS→HTTP).
- strict-origin-when-cross-origin (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).
- unsafe-url : The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.
The relationship of the linked URL as space-separated link types.
Where to display the linked URL, as the name for a browsing context (a tab, window, or <iframe> ). The following keywords have special meanings for where to load the URL:
- _self : the current browsing context. (Default)
- _blank : usually a new tab, but users can configure browsers to open a new window instead.
- _parent : the parent browsing context of the current one. If no parent, behaves as _self .
- _top : the topmost browsing context (the «highest» context that’s an ancestor of the current one). If no ancestors, behaves as _self .
Note: Setting target=»_blank» on <a> elements implicitly provides the same rel behavior as setting rel=»noopener» which does not set window.opener .
Hints at the linked URL’s format with a MIME type. No built-in functionality.
Deprecated attributes
Hinted at the character encoding of the linked URL.
Note: This attribute is deprecated and should not be used by authors. Use the HTTP Content-Type header on the linked URL.
Used with the shape attribute. A comma-separated list of coordinates.
Was required to define a possible target location in a page. In HTML 4.01, id and name could both be used on <a> , as long as they had identical values.
Note: Use the global attribute id instead.
Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.
The shape of the hyperlink’s region in an image map.
Note: Use the <area> element for image maps instead.
HTML тег <a>
Тег <a> используется для вставки ссылок, которые в HTML называются гиперссылками. В качестве гиперссылки можно использовать как текст, так и изображение.
В браузере гиперссылки отличаются своим видом и цветом. По умолчанию HTML ссылки отображаются как подчеркнутый текст синего цвета. При наведении курсора мыши на ссылку, она становится красной (активная ссылка). Ссылки, по которым уже кликали (посещенные ссылки), становятся фиолетовыми.
Изменить цвет ссылок и убрать подчеркивание можно при помощи CSS стилей․
Синтаксис тега <a>
Тег <a> парный, закрывающий тег </a> обязателен.
Атрибуты тега <a>
Вместе с тегом <a> используются атрибуты, дополнительные параметры, которые дают дополнительные возможности форматирования текста. Приведем некоторые из них.
Атрибут href
Обязательный атрибут тега <a> href указывает ссылку на веб-страницу либо определяет место на той же веб-странице, куда пользователь перейдет после нажатия на ссылку. Значением атрибута может быть как URL, так и якорь. Якорь указывает на ID (уникальный идентификатор) части веб-страницы, на который ведет ссылка. Перед ID ставится символ решетки (#).
HTML Link Code — How to Insert a Link to a Website with HREF
We get to a point when building websites and we want a page to lead or go to another page. Its no news that most websites have the “about us”, “contact us” options on their webpage.
So how do we go about this? how do we link a page to another page? how do we navigate through pages on our websites?
The <a></a> in html helps in doing this using the HREF attribute.
We might be confused at some point , what then is adding link to your head tag? It also uses HREF attribute after all?
They are two different things and they are added differently.
The external links we add to our head tags works solely on the body.
For example, adding the bootstrap CDN and the google font link
You can’t access these links on your website. They cannot be seen on your website, you only see the effects on the content in the body.
How then will I add a link to my website?
Like I said earlier, the use of <a> and </a> tags is used to add a link to a website. The <a> tag indicates where the hyperlink starts and the </a> tag indicates where it ends. Whatever text gets added inside these tags, will work as a hyperlink.
You will notice from the code snippet that the <a> tag is inside the body tags. It goes in the body tags where it can be seen and clicked.
But <a>Click me</a> is not yet a “link” if the href attribute is not added.
The href attribute is the most important attribute of the hyperlink. It indicates the link’s destination.
Now! We have created a hyperlink. The “click me” can now be clicked and it will go straight to Freecodecamp page.
The target Attribute
By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link.
The target attribute specifies where to open the linked page.
The target attribute can have one of the following values:
- _self — Default. Opens the page in the same window/tab as it was clicked.
- _blank — Opens the page in a new window or tab.
- _top — Opens the document in the full body of the window.
This code snippet will open freecodecamp.org in a new tab.
To open all links in the document in a new tab, without having to write the target attribute for all the links in your website, you can use `<base>` element
This also applies to all target attribute values, like _top value.
Link to an Email Address
You have to use mailto: inside the href attribute to create a link that opens the user’s email (to let them send a new email)
Link to a Telephone Number
You have to use tel: inside the href attribute to create a link that opens the user's phone boot to call (to let them give a call to the number)
HTML Bookmark Link
Html Bookmark is helpful, if you have a long page that you want to allow the users to quickly navigate to different sections in the same web page or you can navigate to targeted location of the other web page.
First, use the id attribute to create a bookmark:
Next step, you need to create a link that the user can click on to jump to the bookmark.
For example, you can check out the following code to see the result of a bookmark link.
It can also be done in a different way.
The second step still remains the same, but the first step changes.
You can use the named attribute to create a bookmark.
The href attribute is the most important attribute of the hyperlink. It indicates the link’s destination.
I hope the article was helpful and you have gotten a handful of how to add a link to your website using the HREF attribute.
How to Use a href in HTML [+ Examples]
Well, not much of a web at all — the World Wide Web is essentially a system of web pages.And how are those pages connected? Hyperlinks, or links from one document to another, usually appearing as hypertext. In fact, the “H” in HTTP/HTTPS stands “HyperText”. Simply put, there’s no web without links.
We all know hyperlinks when we see them, whether we’re perusing an online store or going down a Wikipedia rabbit hole. In essence, browsing the web is just clicking link after link.
So, in this guide, we’ll be peeking under the hood to see what these links look like in HTML. To write links into your web pages, you’ll need the <a> element, paired with the href attribute — let’s learn how to use both.