HTML Links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML Links — Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
Note: A link does not have to be text. A link can be an image or any other HTML element!
HTML Links — Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue
- A visited link is underlined and purple
- An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links — 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 document.
The target attribute can have one of the following values:
- _self — Default. Opens the document in the same window/tab as it was clicked
- _blank — Opens the document in a new window or tab
- _parent — Opens the document in the parent frame
- _top — Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in the href attribute.
A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part):
Example
HTML Links — Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user’s email program (to let them send a new email):
Example
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of a button:
Example
Tip: Learn more about JavaScript in our JavaScript Tutorial.
Link Titles
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
Example
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page:
Example
Link to a page located in the html folder on the current web site:
Example
Link to a page located in the same folder as the current page:
You can read more about file paths in the chapter HTML File Paths.
Chapter Summary
- Use the <a> element to define a link
- Use the href attribute to define the link address
- Use the target attribute to define where to open the linked document
- Use the <img> element (inside <a> ) to use an image as a link
- Use the mailto: scheme inside the href attribute to create a link that opens the user’s email program
HTML Link Tags
| Tag | Description |
|---|---|
| <a> | Defines a hyperlink |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
12 Links
12.1 Introduction to links and anchors
HTML offers many of the conventional publishing idioms for rich text and structured documents, but what separates it from most other markup languages is its features for hypertext and interactive documents. This section introduces the link (or hyperlink, or Web link), the basic hypertext construct. A link is a connection from one Web resource to another. Although a simple concept, the link has been one of the primary forces driving the success of the Web.
A has two ends — called — and a direction. The link starts at the «source» anchor and points to the «destination» anchor, which may be any Web resource (e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).
12.1.1 Visiting a linked resource
The default behavior associated with a link is the retrieval of another Web resource. This behavior is commonly and implicitly obtained by selecting the link (e.g., by clicking, through keyboard input, etc.).
The following HTML excerpt contains two links, one whose destination anchor is an HTML document named «chapter2.html» and the other whose destination anchor is a GIF image in the file «forest.gif»:
By activating these links (by clicking with the mouse, through keyboard input, voice commands, etc.), users may visit these resources. Note that the href attribute in each source anchor specifies the address of the destination anchor with a URI.
The destination anchor of a link may be an element within an HTML document. The destination anchor must be given an anchor name and any URI addressing this anchor must include the name as its fragment identifier .
Destination anchors in HTML documents may be specified either by the A element (naming it with the name attribute), or by any other element (naming with the id attribute).
Thus, for example, an author might create a table of contents whose entries link to header elements H2 , H3 , etc., in the same document. Using the A element to create destination anchors, we would write:
We may achieve the same effect by making the header elements themselves the anchors:
12.1.2 Other link relationships
By far the most common use of a link is to retrieve another Web resource, as illustrated in the previous examples. However, authors may insert links in their documents that express other relationships between resources than simply «activate this link to visit that related resource». Links that express other types of relationships have one or more link types specified in their source anchor.
The roles of a link defined by A or LINK are specified via the rel and rev attributes.
For instance, links defined by the LINK element may describe the position of a document within a series of documents. In the following excerpt, links within the document entitled «Chapter 5» point to the previous and next chapters:
The link type of the first link is «prev» and that of the second is «next» (two of several recognized link types). Links specified by LINK are not rendered with the document’s contents, although user agents may render them in other ways (e.g., as navigation tools).
Even if they are not used for navigation, these links may be interpreted in interesting ways. For example, a user agent that prints a series of HTML documents as a single document may use this link information as the basis of forming a coherent linear document. Further information is given below on using links for the benefit of search engines.
12.1.3 Specifying anchors and links
Although several HTML elements and attributes create links to other resources (e.g., the IMG element, the FORM element, etc.), this chapter discusses links and anchors created by the LINK and A elements. The LINK element may only appear in the head of a document. The A element may only appear in the body.
When the A element’s href attribute is set, the element defines a source anchor for a link that may be activated by the user to retrieve a Web resource. The source anchor is the location of the A instance and the destination anchor is the Web resource.
The retrieved resource may be handled by the user agent in several ways: by opening a new HTML document in the same user agent window, opening a new HTML document in a different window, starting a new program to handle the resource, etc. Since the A element has content (text, images, etc.), user agents may render this content in such a way as to indicate the presence of a link (e.g., by underlining the content).
When the name or id attributes of the A element are set, the element defines an anchor that may be the destination of other links.
Authors may set the name and href attributes simultaneously in the same A instance.
The LINK element defines a relationship between the current document and another resource. Although LINK has no content, the relationships it defines may be rendered by some user agents.
12.1.4 Link titles
The title attribute may be set for both A and LINK to add information about the nature of a link. This information may be spoken by a user agent, rendered as a tool tip, cause a change in cursor image, etc.
Thus, we may augment a previous example by supplying a title for each link:
12.1.5 Internationalization and links
Since links may point to documents encoded with different character encodings, the A and LINK elements support the charset attribute. This attribute allows authors to advise user agents about the encoding of data at the other end of the link.
The hreflang attribute provides user agents with information about the language of a resource at the end of a link, just as the lang attribute provides information about the language of an element’s content or attribute values.
Armed with this additional knowledge, user agents should be able to avoid presenting «garbage» to the user. Instead, they may either locate resources necessary for the correct presentation of the document or, if they cannot locate the resources, they should at least warn the user that the document will be unreadable and explain the cause.
12.2 The A element
Start tag: required, End tag: required
name = cdata [CS] This attribute names the current anchor so that it may be the destination of another link. The value of this attribute must be a unique anchor name. The scope of this name is the current document. Note that this attribute shares the same name space as the id attribute. href = uri [CT] This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute. hreflang = langcode [CI] This attribute specifies the base language of the resource designated by href and may only be used when href is specified. type = content-type [CI] This attribute gives an advisory hint as to the content type of the content available at the link target address. It allows user agents to opt to use a fallback mechanism rather than fetch the content if they are advised that they will get content in a content type they do not support. Authors who use this attribute take responsibility to manage the risk that it may become inconsistent with the content available at the link target address. For the current list of registered content types, please consult [MIMETYPES]. rel = link-types [CI] This attribute describes the relationship from the current document to the anchor specified by the href attribute. The value of this attribute is a space-separated list of link types. rev = link-types [CI] This attribute is used to describe a reverse link from the anchor specified by the href attribute to the current document. The value of this attribute is a space-separated list of link types. charset = charset [CI] This attribute specifies the character encoding of the resource designated by the link. Please consult the section on character encodings for more details.
Attributes defined elsewhere
- id , class (document-wide identifiers)
- lang (language information), dir (text direction)
- title (element title)
- style (inline style information )
- shape and coords (image maps)
- onfocus , onblur , onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (intrinsic events )
- target (target frame information)
- tabindex (tabbing navigation)
- accesskey (access keys)
Each A element defines an anchor
- The A element’s content defines the position of the anchor.
- The name attribute names the anchor so that it may be the destination of zero or more links (see also anchors with id ).
- The href attribute makes this anchor the source anchor of exactly one link.
Authors may also create an A element that specifies no anchors, i.e., that doesn’t specify href , name , or id . Values for these attributes may be set at a later time through scripts.
In the example that follows, the A element defines a link. The source anchor is the text «W3C Web site» and the destination anchor is «http://www.w3.org/»:
This link designates the home page of the World Wide Web Consortium. When a user activates this link in a user agent, the user agent will retrieve the resource, in this case, an HTML document.
User agents generally render links in such a way as to make them obvious to users (underlining, reverse video, etc.). The exact rendering depends on the user agent. Rendering may vary according to whether the user has already visited the link or not. A possible visual rendering of the previous link might be:
To tell user agents explicitly what the character encoding of the destination page is, set the charset attribute:
Suppose we define an anchor named «anchor-one» in the file «one.html».
This creates an anchor around the text «This is the location of anchor one.». Usually, the contents of A are not rendered in any special way when A defines an anchor only.
Having defined the anchor, we may link to it from the same or another document. URIs that designate anchors contain a «#» character followed by the anchor name (the fragment identifier). Here are some examples of such URIs:
- An absolute URI: http://www.mycompany.com/one.html#anchor-one
- A relative URI: ./one.html#anchor-one or one.html#anchor-one
- When the link is defined in the same document: #anchor-one
Thus, a link defined in the file «two.html» in the same directory as «one.html» would refer to the anchor as follows:
The A element in the following example specifies a link (with href ) and creates a named anchor (with name ) simultaneously:
This example contains a link to a different type of Web resource (a PNG image). Activating the link should cause the image resource to be retrieved from the Web (and possibly displayed if the system has been configured to do so).
Note. User agents should be able to find anchors created by empty A elements, but some fail to do so. For example, some user agents may not find the «empty-anchor» in the following HTML fragment:
12.2.1 Syntax of anchor names
An anchor name is the value of either the name or id attribute when used in the context of anchors. Anchor names must observe the following rules:
- Uniqueness: Anchor names must be unique within a document. Anchor names that differ only in case may not appear in the same document.
- String matching: Comparisons between fragment identifiers and anchor names must be done by exact (case-sensitive) match.
Thus, the following example is correct with respect to string matching and must be considered a match by user agents:
ILLEGAL EXAMPLE:
The following example is illegal with respect to uniqueness since the two names are the same except for case:
Although the following excerpt is legal HTML, the behavior of the user agent is not defined; some user agents may (incorrectly) consider this a match and others may not.
12.2.2 Nested links are illegal
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
12.2.3 Anchors with the id attribute
The id attribute may be used to create an anchor at the start tag of any element (including the A element).
This example illustrates the use of the id attribute to position an anchor in an H2 element. The anchor is linked to via the A element.
The following example names a destination anchor with the id attribute:
The id and name attributes share the same name space. This means that they cannot both define an anchor with the same name in the same document. It is permissible to use both attributes to specify an element’s unique identifier for the following elements: A , APPLET , FORM , FRAME , IFRAME , IMG , and MAP . When both attributes are used on a single element, their values must be identical.
ILLEGAL EXAMPLE:
The following excerpt is illegal HTML since these attributes declare the same name twice in the same document.
The following example illustrates that id and name must be the same when both appear in an element’s start tag:
Because of its specification in the HTML DTD, the name attribute may contain character references . Thus, the value Dürst is a valid name attribute value, as is Dürst . The id attribute, on the other hand, may not contain character references.
Use id or name ? Authors should consider the following issues when deciding whether to use id or name for an anchor name:
- The id attribute can act as more than just an anchor name (e.g., style sheet selector, processing identifier, etc.).
- Some older user agents don’t support anchors created with the id attribute.
- The name attribute allows richer anchor names (with entities).
12.2.4 Unavailable and unidentifiable resources
A reference to an unavailable or unidentifiable resource is an error. Although user agents may vary in how they handle such an error, we recommend the following behavior:
- If a user agent cannot locate a linked resource, it should alert the user.
- If a user agent cannot identify the type of a linked resource, it should still attempt to process it. It should alert the user and may allow the user to intervene and identify the document type.
12.3 Document relationships: the LINK element
Start tag: required, End tag: forbidden
Attributes defined elsewhere
- id , class (document-wide identifiers)
- lang (language information), dir (text direction)
- title (element title)
- style (inline style information )
- onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouseout , onkeypress , onkeydown , onkeyup (intrinsic events )
- href , hreflang , type , rel , rev (links and anchors)
- target (target frame information)
- media (header style information)
- charset (character encodings)
This element defines a link. Unlike A , it may only appear in the HEAD section of a document, although it may appear any number of times. Although LINK has no content, it conveys relationship information that may be rendered by user agents in a variety of ways (e.g., a tool-bar with a drop-down menu of links).
This example illustrates how several LINK definitions may appear in the HEAD section of a document. The current document is «Chapter2.html». The rel attribute specifies the relationship of the linked document with the current document. The values «Index», «Next», and «Prev» are explained in the section on link types.
12.3.1 Forward and reverse links
The rel and rev attributes play complementary roles — the rel attribute specifies a forward link and the rev attribute specifies a reverse link.
Consider two documents A and B.
Has exactly the same meaning as:
Both attributes may be specified simultaneously.
12.3.2 Links and external style sheets
When the LINK element links an external style sheet to a document, the type attribute specifies the style sheet language and the media attribute specifies the intended rendering medium or media. User agents may save time by retrieving from the network only those style sheets that apply to the current device.
Media types are further discussed in the section on style sheets.
12.3.3 Links and search engines
Authors may use the LINK element to provide a variety of information to search engines, including:
- Links to alternate versions of a document, written in another human language.
- Links to alternate versions of a document, designed for different media, for instance a version especially suited for printing.
- Links to the starting page of a collection of documents.
The examples below illustrate how language information, media types, and link types may be combined to improve document handling by search engines.
In the following example, we use the hreflang attribute to tell search engines where to find Dutch, Portuguese, and Arabic versions of a document. Note the use of the charset attribute for the Arabic manual. Note also the use of the lang attribute to indicate that the value of the title attribute for the LINK element designating the French manual is in French.
In the following example, we tell search engines where to find the printed version of a manual.
In the following example, we tell search engines where to find the front page of a collection of documents.
Further information is given in the notes in the appendix on helping search engines index your Web site.
12.4 Path information: the BASE element
Start tag: required, End tag: forbidden
href = uri [CT] This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs.
Attributes defined elsewhere
In HTML, links and references to external images, applets, form-processing programs, style sheets, etc. are always specified by a URI. Relative URIs are resolved according to a base URI, which may come from a variety of sources. The BASE element allows authors to specify a document’s base URI explicitly.
When present, the BASE element must appear in the HEAD section of an HTML document, before any element that refers to an external source. The path information specified by the BASE element only affects URIs in the document where the element appears.
For example, given the following BASE declaration and A declaration:
the relative URI «../cages/birds.gif» would resolve to:
12.4.1 Resolving relative URIs
User agents must calculate the base URI for resolving relative URIs according to [RFC1808], section 3. The following describes how [RFC1808] applies specifically to HTML.
User agents must calculate the base URI according to the following precedences (highest priority to lowest):
- The base URI is set by the BASE element.
- The base URI is given by meta data discovered during a protocol interaction, such as an HTTP header (see [RFC2616]).
- By default, the base URI is that of the current document. Not all HTML documents have a base URI (e.g., a valid HTML document may appear in an email and may not be designated by a URI). Such HTML documents are considered erroneous if they contain relative URIs and rely on a default base URI.
Additionally, the OBJECT and APPLET elements define attributes that take precedence over the value set by the BASE element. Please consult the definitions of these elements for more information about URI issues specific to them.
Note. For versions of HTTP that define a Link header, user agents should handle these headers exactly as LINK elements in the document. HTTP 1.1 as defined by [RFC2616] does not include a Link header field (refer to section 19.6.3).
Как сделать внутреннюю ссылку в HTML
Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:
О ссылках я рассказывал здесь и здесь, но там речь шла только о переходах на внешние страницы. Однако довольно часто в HTML приходится делать ссылки внутри страницы. Например, если в одном документе у вас несколько разделов, а в начале статьи должно быть содержание документа со ссылками на эти разделы.
И в этой статье я расскажу о том, как сделать ссылку внутри страницы в HTML.
Как создать внутреннюю ссылку в HTML
Итак, ссылка на текст внутри страницы в HTML создаётся за два шага:
- Надо создать ссылку.
- Надо обозначить место в тексте, куда ведёт ссылка.
Создать ссылку можно так:
<a href color:red;»>name_link«>Название ссылки</a>
То есть вы используете всё тот же атрибут href , но вместо URL пишите имя ссылки. А чтобы браузер знал, что эта ссылка ведёт на место внутри страницы, перед именем надо поставить знак # .
На втором шаге вы должны обозначить место в документе, куда ведёт ссылка. Обозначить место в документе, куда должна вести ссылка, можно одним из двух способов:
<h2><a name color:red;»>name_link«>Заголовок в статье</a></h2>
<h2 id color:red;»>name_link«>Заголовок в статье</h2>
Первый способ более старый, и он будет работать во всех браузерах.
Второй способ более современный (лучше использовать именно его), но в некоторых старых браузерах это работать не будет.
Разумеется, атрибуты id или name могут быть использованы не только в заголовках, но и в других тегах. Например, в тегах абзаца или картинки. Так что внутренняя ссылка может вести на любое место в документе.
Ну а теперь пример для лучшего понимания:
Переход по ссылке внутри страницы в HTML может выполняться не только внутри страницы, где расположена ссылка, но и к обозначенному месту другой страницы в Интернете (разумеется, если это место там обозначено с помощью id или name ).
Например, если на странице моего сайта https://info-master.su/programming/web/html/link-attributes.php есть подзаголовок, который обозначен так:
<h2 id color:red;»>tabindex«>Атрибут TABINDEX</h2>
то для того, чтобы с вашего сайта вы могли перейти именно на эту часть страницы, вы должны прописать такую ссылку:
И таким образом пользователь может перейти не в начало страницы, а сразу к нужному участку, то есть к подзаголовку Атрибут TABINDEX .
На этом, пожалуй, разговор о ссылках я закончу. Для лучшего понимания посмотрите видео (выше) и изучите курс о вёрстке сайтов.
Html как вставить ссылку в текст
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap
Как вставить ссылку в HTML. Основы HTML для начинающих. Урок №6
Всем привет!
Продолжаем изучать основы HTML для начинающих. В этом уроке я расскажу, что такое ссылка, как вставить в html документ ссылку на другую страницу, как сделать ссылку картинкой. Покажу, как сделать ссылку на другой сайт, на почту и на файл.
Итак, давайте вкратце выясним, что такое ссылка в HTML.
Ссылка в HTML – это слово или фраза в документе, указывающие на другую часть этого документа или на другой документ, при нажатии на который, произойдет переход.
С помощью ссылки владелец сайта может направить пользователя на другую страницу или на адрес другого сайта, а также дать возможность пользователю скачать файл или архив прямо на сайте.
Если вы не поняли, как выглядит ссылка, тогда сморите – вот так выглядит ссылка. Можете нажать на слово «ссылка» и вы попадете на другую страницу.
Теория закончилась, переходим к практике.
○ Как вставить ссылку в документ на другую страницу
Чтобы вставить ссылку в HTML-документ, используют тег <a> с параметром «href» , которое определяет путь или адрес к другому объекту, странице, адресу сайта.
Для тега <a> закрывающий тег </a> обязателен.
Внимание: адрес ссылки или название страницы должны быть прописаны на латинице.
Создайте HTML-документ под названием « 1.html » и вставьте вот такой код:
Теперь создайте второй HTML-документ под названием « 2.html » и вставьте вот такой код:
Внимание , HTML-документы « 1.html » и « 2.html » должны находиться в одной папке.
Обратите внимание на страничку « 1.html ». Там мы сделали ссылку на страницу « 2.html », а со страницы « 2.html » сделали ссылку на « 1.html ».
Разобрались?
Попробуйте все сделать сами. Добавьте еще пару страниц и привяжите страницы ссылками.
○ Как сделать ссылку на другой сайт
Как вставить ссылку на другую страницу, вы уже знаете. Чтобы сделать ссылку на другой сайт, достаточно в параметре «href» указать адрес сайта ( http://адрес сайта ):
○ Как сделать ссылку на почту в html
Ссылка на почтовый ящик делается так же, как и обычные ссылки, только вместо адреса сайта или страницы указываете mailto:адрес электронной почты
При нажатии по ссылке «Написать письмо», откроется почтовая программа, где вы сможете отправить письмо.
○ Как сделать html ссылку, чтобы она открывалась в новом окне
Добавьте к тегу <a> атрибут «target» с параметром «_blank» и страница будет открываться в новом окне при нажатии по ссылке.
○ Как сделать ссылку на скачивание файла
Укажите в параметре «href» путь к файлу или к архиву.
— Для скачивания архива
fail.zip – это название и расширение архива.
— Для скачивания обычных файлов
Если в ссылке прописать название файла (txt), то при нажатии на ссылку « Скачать » в браузере откроется текстовый файл. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download» .
— Для скачивания картинок
Если в ссылке прописать название картинки, то при нажатии на ссылку « Скачать » в браузере откроется картинка. Но вам же хочется ее скачать? Для этого добавьте к тегу <a> атрибут «download» .
○ Как сделать картинку ссылкой в html
Как в HTML-документ вставлять картинку, я думаю, писать не нужно, так как недавно вы этот урок изучали. Если подзабыли, читайте тут.
Итак, чтобы сделать картинку ссылкой, достаточно в html-документе прописать тег картинки <img> между тегами ссылки <a>…</a>
○ Как сделать подсказку для ссылки
При наведении курсора мышки на ссылку, появится подсказка. Чтобы это реализовать, добавьте к тегу <a> атрибут «title» с текстом:
○ Как сделать цвет ссылки в html
Чтобы простая ссылка после нажатия или посещения имела нестандартный цвет, добавьте к тегу <body> три атрибута: «link» , «alink» , «vlink» с кодом цвета (цвет можно задать и на английском, например « red » )
— link — цвет просто ссылки
— alink — цвет нажатой ссылки
— vlink — цвет посещенной ссылки
— #00FF00; | #FFFF00; | #EEE9E9; — это кода цветов ссылок
На этом — все, кажется, ничего не забыл вам рассказать.
А теперь задание вам: все, что вы узнали в этом уроке, попробуйте сделать сами на одной страничке.
Вот пример того, что у вас может получиться, если правильно используете пройденный материал:
Подписывайтесь на обновление моего блога и не пропустите новых уроков по основам HTML. Удачи!