- HTML: Linguagem De Marcação De Hipertexto - MDN Web Docs

Trang chủ » Html Telephone Link Verme » - HTML: Linguagem De Marcação De Hipertexto - MDN Web Docs

Có thể bạn quan tâm
  1. Tecnologia Web para desenvolvedores
  2. HTML: Linguagem de Marcação de Hipertexto
  3. Elementos HTML
  4. <a>
Article Actions
  • Português (do Brasil)
    • Remember language
    • Deutsch
    • English (US)
    • Español
    • Français
    • 日本語
    • 한국어
    • Русский
    • 中文 (简体)
    • 正體中文 (繁體)

Esta página foi traduzida do inglês pela comunidade. Saiba mais e junte-se à comunidade MDN Web Docs.

  • Experimente
  • Atributos
  • Properties
  • Examples
  • Security and privacy
  • Accessibility
  • Specifications
  • Compatibilidade com navegadores
  • See also
  1. HTML
  2. Tutoriais
  3. O básico de HTML
  4. Introdução ao HTML
    1. Visão geral da Introdução ao HTML
    2. Iniciando com HTML
    3. O que está na "head"? Metadados em HTML
    4. Fundamentos de textos HTML
    5. Criando hiperlinks
    6. Formatação avançada de textos
    7. Estrutura do Documento e do Site
    8. Depurando HTML
    9. Avaliação: Melhorando uma carta
    10. Avaliação: Estruturando uma página de conteúdos
  5. Multimídia e incorporação
    1. Visão geral sobre Multimídia e incorporação
    2. Trabalhando com imagens em HTML
    3. Conteúdos com vídeo e áudio
    4. De objeto a iframe — outras tecnologias de incorporação
    5. Adicionando gráficos vetoriais à Web
    6. Imagens responsivas
    7. Avaliação: Página "splash" da Mozilla
  6. Tabelas HTML
    1. Visão geral sobre tabelas HTML
    2. O básico sobre Tabelas HTML
    3. Funcionalidades avançadas e acessibilidade de Tabelas HTML
    4. Avaliação: Estruturação dos dados do planenta
  7. Referências
  8. Elementos HTML
    1. <a>
    2. <abbr>
    3. <acronym> Deprecated
    4. <address>
    5. <area>
    6. article (artigo)
    7. <aside>
    8. audio
    9. <b>
    10. <base>
    11. <bdi>
    12. <bdo>
    13. <big> Deprecated
    14. <blockquote>
    15. <body>
    16. <br>
    17. <button>
    18. canvas
    19. <caption>
    20. <center> Deprecated
    21. <cite>
    22. <code>
    23. <col>
    24. <colgroup>
    25. <data>
    26. datalist
    27. <dd>
    28. <del>
    29. details
    30. <dfn>
    31. <dialog>
    32. <dir> Deprecated
    33. <div>
    34. dl
    35. <dt>
    36. <em>
    37. <embed>
    38. <fencedframe> Experimental
    39. <fieldset>
    40. <figcaption>
    41. <figure>
    42. <font> Deprecated
    43. footer (rodapé)
    44. <form>
    45. <frame> Deprecated
    46. <frameset> Deprecated
    47. <h1>
    48. <head>
    49. header (cabeçalho)
    50. <hgroup>
    51. <hr>
    52. <html>
    53. <i>
    54. <iframe>
    55. <img>
    56. <input>
    57. <ins>
    58. <kbd>
    59. <label>
    60. <legend>
    61. <li>
    62. <link>
    63. <main>
    64. <map>
    65. <mark>
    66. <marquee> Deprecated
    67. <menu>
    68. <meta>
    69. meter
    70. nav
    71. <nobr> Deprecated
    72. <noembed> Deprecated
    73. <noframes> Deprecated
    74. <noscript>
    75. <object>
    76. <ol>
    77. <optgroup>
    78. <option>
    79. Output
    80. <p>
    81. <param> Deprecated
    82. <picture>
    83. <plaintext> Deprecated
    84. <portal> Experimental
    85. <pre>
    86. progress
    87. <q>
    88. <rb> Deprecated
    89. <rp>
    90. <rt>
    91. <rtc> Deprecated
    92. <ruby>
    93. <s>
    94. <samp>
    95. <script>
    96. <search>
    97. <section>
    98. <select>
    99. <slot>
    100. <small>
    101. source
    102. <span>
    103. <strike> Deprecated
    104. <strong>
    105. <style>
    106. <sub>
    107. summary
    108. <sup>
    109. <table>
    110. <tbody>
    111. <td>
    112. <template>
    113. <textarea>
    114. <tfoot>
    115. <th>
    116. <thead>
    117. <time>
    118. <title>
    119. <tr>
    120. <track>
    121. <tt> Deprecated
    122. <u>
    123. <ul>
    124. <var>
    125. <video>
    126. <wbr>
    127. <xmp> Deprecated
  9. Atributos globais
    1. accesskey
    2. anchor Experimental Non-standard
    3. autocapitalize
    4. autocorrect Experimental
    5. autofocus
    6. class
    7. contenteditable
    8. data-*
    9. dir
    10. draggable
    11. enterkeyhint
    12. exportparts
    13. hidden
    14. id
    15. inert
    16. inputmode
    17. is
    18. itemid
    19. itemprop
    20. itemref
    21. itemscope
    22. itemtype
    23. lang
    24. nonce
    25. part
    26. popover
    27. slot
    28. Controlando a verificação ortográfica em formulários HTML
    29. style
    30. tabindex
    31. title
    32. translate
    33. virtualkeyboardpolicy Experimental
    34. writingsuggestions
  10. Atributos
    1. accept
    2. autocomplete
    3. capture
    4. crossorigin
    5. dirname
    6. disabled
    7. elementtiming
    8. for
    9. max
    10. maxlength
    11. min
    12. minlength
    13. multiple
    14. pattern
    15. placeholder
    16. readonly
    17. rel
    18. required
    19. size
    20. step
  11. Tipos de <input>
    1. <input type="button">
    2. <input type="checkbox">
    3. <input type="color">
    4. <input type="date">
    5. <input type="datetime-local">
    6. <input type="email">
    7. <input type="file">
    8. <input type="hidden">
    9. <input type="image">
    10. <input type="month">
    11. <input type="number">
    12. <input type="password">
    13. <input type="radio">
    14. <input type="range">
    15. <input type="reset">
    16. <input type="search">
    17. <input type="submit">
    18. <input type="tel">
    19. <input type="text">
    20. <input type="time">
    21. <input type="url">
    22. <input type="week">
  12. Guides
    1. Categorias de conteúdo
    2. Elementos block-level
    3. Elementos inline
    4. Quirks Mode e Standards Mode
    5. Date and time formats used in HTML
    6. Constraint validation
    7. Microdata
    8. Microformats
    9. Viewport meta tag
    10. CORS habilitar imagens
  • Experimente
  • Atributos
  • Properties
  • Examples
  • Security and privacy
  • Accessibility
  • Specifications
  • Compatibilidade com navegadores
  • See also

O elemento <a> em HTML (ou elemento âncora), com o atributo href cria-se um hiperligação nas páginas web, arquivos, endereços de emails, ligações na mesma página ou endereços na URL. O conteúdo dentro de cada <a> precisará indicar o destino do link.

Experimente

Atributos

Os atributos do elemento incluem os atributos globais.

download

Leva o usuário a salvar a URL em vez de navegar até ela. Pode ser usado com ou sem um valor:

  • Sem um valor, o browser irá sugerir um nome de arquivo/extensão, gerado a partir de diversas origens:

    • O cabeçalho HTTP Content-Disposition
    • O segmento final no path (caminho) da URL
    • The media type (from the (Content-Type header, the start of a data: URL, or Blob.type for a blob: URL)

  • A definição de um valor o sugere como o nome do arquivo. Caracteres / e \ são convertidos para underscores (_).Arquivos de sistema talvez proibam alguns caracteres em nomes de arquivos, então o navegador irá ajustar o nome sugerido caso necessário.

Note: Notes:- download somente funciona para URLs de mesma origem, ou os esquemas blob: e data:

  • Se Content-Disposition tiver um diferente filename (nome do arquivo) que download, o cabeçalho tem prioridade. (Se Content-Disposition: inline, Firefox prioriza o cabeçalho enquanto o Chrome escolhe download.)
href

A URL para a qual o hiperlink aponta. Links não se restrigem a URLs baseadas no protocolo HTTP — eles podem utilizar qualquer tipo de URL suportado pelos browsers:

  • Sections of a page with fragment URLs(Seções de página com fragmentos URL)
  • Pieces of media files with media fragments (Pedaços de arquivos de mídia com fragmentos da própria mídia)
  • Números de telefone com tel: URLs
  • Email addresses with(Endereço de email com) mailto: URLs
  • Alguns navegadores talvez não aguentem certos arranjos em URL, para isso os websites fazem uso do registerProtocolHandler()
hreflang

Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as the global lang attribute.

ping

Uma lista de URLs separadas por espaços. Quando o link é seguido, o brrowser enviará requisições POST com o corpo PING para as URLs. Typically for tracking.

referrerpolicy Experimental

Quanto do referrer para ser enviado quando acessar o link. Acesse Referrer-Policy para possíveis valores e seus efeitos.

rel

The relationship of the linked URL as space-separated link types.

target

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: No atual contexto de pesquisa. (Default)

  • _blank: Normalmente uma nova aba, porém usuários podem configurar seus navegadores para abrir em uma nova janela.

  • _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.

Nota: Quando usando target, adicione rel="noreferrer noopener" para evitar "exploit" para window.opener API;

Warning: Note: Linking to another page with target="_blank" will run the new page in the same process as your page. If the new page executes JavaScript, your page's performance may suffer. This can also be avoided by using rel="noreferrer noopener".

type

Hints at the linked URL's format with a MIME type. No built-in functionality.

Obsolete attributes

charset

Hinted at the character encoding of the linked URL.

Nota: This attribute is obsolete and should not be used by authors. Use the HTTP Content-Type header on the linked URL.

coords

Used with the shape attribute. A comma-separated list of coordinates.

name

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.

Nota: Use the global attribute id instead.

rev

Specified a reverse link; the opposite of the rel attribute. Deprecated for being very confusing.

shape

The shape of the hyperlink's region in an image map.

Nota: Use the <area> element for image maps instead.

Properties

Content categories Flow content, phrasing content, interactive content, palpable content.
Permitted content Transparent, containing either flow content (excluding interactive content) or phrasing content.
Tag omission Nenhuma, tanto a tag inicial quanto a final são obrigatórias.
Permitted parents Any element that accepts phrasing content, or any element that accepts flow content, but not other <a> elements.
Implicit ARIA role link when href attribute is present, otherwise no corresponding role
Permitted ARIA roles

When href attribute is present:

  • button
  • checkbox
  • menuitem
  • menuitemcheckbox
  • menuitemradio
  • option
  • radio
  • switch
  • tab
  • treeitem

When href attribute is not present:

  • any
DOM interface HTMLAnchorElement

Examples

Linking to an absolute URL

HTML

html<a href="https://www.mozilla.com"> Mozilla </a>

Result

Linking to relative URLs

HTML

html<a href="//example.com">Scheme-relative URL</a> <a href="/pt-BR/docs/Web/HTML">Origin-relative URL</a> <a href="./p">Directory-relative URL</a> a { display: block; margin-bottom: 0.5em; }

Result

Linking to an element on the same page

html<!-- <a> element links to the section below --> <p><a href="#Section_further_down"> Jump to the heading below </a></p> <!-- Heading to link to --> <h2 id="Section_further_down">Section further down</h2>

Nota: You can use href="#top" or the empty fragment (href="#") to link to the top of the current page, as defined in the HTML specification.

Linking to an email address

To create links that open in the user's email program to let them send a new message, use the mailto: scheme:

html<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>

For details about mailto: URLs, such as including a subject or body, see Email links or RFC 6068.

Linking to telephone numbers

html<a href="tel:+49.157.0156">+49 157 0156</a> <a href="tel:+1(555)5309">(555) 5309</a>

tel: link behavior varies with device capabilities:

  • Cellular devices autodial the number.
  • Most operating systems have programs that can make calls, like Skype or FaceTime.
  • Websites can make phone calls with registerProtocolHandler, such as web.skype.com.
  • Other behaviors include saving the number to contacts, or sending the number to another device.

See RFC 3966 for syntax, additional features, and other details about the tel: URL scheme.

Using the download attribute to save a <canvas> as a PNG

To save a <canvas> element's contents as an image, you can create a link with a download attribute and the canvas data as a data: URL:

HTML
html<p> Paint by holding down the mouse button and moving it. <a href="" download="my_painting.png">Download my painting</a> </p> <canvas width="300" height="300"></canvas>
CSS
csshtml { font-family: sans-serif; } canvas { background: #fff; border: 1px dashed; } a { display: inline-block; background: #69c; color: #fff; padding: 5px 10px; }
JavaScript
jsvar canvas = document.querySelector("canvas"), c = canvas.getContext("2d"); c.fillStyle = "hotpink"; function draw(x, y) { if (isDrawing) { c.beginPath(); c.arc(x, y, 10, 0, Math.PI * 2); c.closePath(); c.fill(); } } canvas.addEventListener("mousemove", (event) => draw(event.offsetX, event.offsetY), ); canvas.addEventListener("mousedown", () => (isDrawing = true)); canvas.addEventListener("mouseup", () => (isDrawing = false)); document .querySelector("a") .addEventListener( "click", (event) => (event.target.href = canvas.toDataURL()), );
Result

Security and privacy

<a> elements can have consequences for users' security and privacy. See Referer header: privacy and security concerns for information.

Using target="_blank" without rel="noreferrer" and rel="noopener" makes the website vulnerable to window.opener API exploitation attacks (vulnerability description).

Accessibility

Strong link text

The content inside a link should indicate where the link goes, even out of context.

Inaccessible, weak link text

A sadly common mistake is to only link the words "click here" or "here":

html<p>Learn more about our products <a href="/products">here</a>.</p>

Strong link text

Luckily, this is an easy fix, and it's actually shorter than the inaccessible version!

html<p>Learn more <a href="/products">about our products</a>.</p>

Assistive software have shortcuts to list all links on a page. However, strong link text benefits all users — the "list all links" shortcut emulates how sighted users quickly scan pages.

onclick events

Anchor elements are often abused as fake buttons by setting their href to # or javascript:void(0) to prevent the page from refreshing, then listening for their click events .

These bogus href values cause unexpected behavior when copying/dragging links, opening links in a new tab/window, bookmarking, or when JavaScript is loading, errors, or is disabled. They also convey incorrect semantics to assistive technologies, like screen readers.

Use a <button> instead. In general, you should only use a hyperlink for navigation to a real URL.

Links that open in a new tab/window via target="_blank", or links that point to a download file should indicate what will happen when the link is followed.

People experiencing low vision conditions, navigating with the aid of screen reading technology, or with cognitive concerns may be confused when a new tab, window, or application opens unexpectedly. Older screen-reading software may not even announce the behavior.

html<a target="_blank" href="https://www.wikipedia.org"> Wikipedia (opens in new tab) </a> html<a href="2017-annual-report.ppt"> 2017 Annual Report (PowerPoint) </a>

If an icon is used to signify link behavior, make sure it has alt text:

html<a target="_blank" href="https://www.wikipedia.org"> Wikipedia <img alt="(opens in new tab)" src="newtab.svg" /> </a> <a href="2017-annual-report.ppt"> 2017 Annual Report <img alt="(PowerPoint file)" src="ppt-icon.svg" /> </a>
  • WebAIM: Links and Hypertext - Hypertext Links
  • MDN / Understanding WCAG, Guideline 3.2
  • G200: Opening new windows and tabs from a link only when necessary
  • G201: Giving users advanced warning when opening a new window

A skip link is a link placed as early as possible in <body> content that points to the beginning of the page's main content. Usually, CSS hides a skip link offscreen until focused.

<body> <a href="#content">Skip to main content</a> <header> … </header> <main id="content"> <!-- The skip link jumps to here --> css.skip-link { position: absolute; top: -3em; background: #fff; } .skip-link:focus { top: 0; }

Skip links let keyboard users bypass content repeated throughout multiple pages, such as header navigation.

Skip links are especially useful for people who navigate with the aid of assistive technology such as switch control, voice command, or mouth sticks/head wands, where the act of moving through repetitive links can be laborious.

  • WebAIM: "Skip Navigation" Links
  • How-to: Use Skip Navigation links
  • MDN / Understanding WCAG, Guideline 2.4 explanations
  • Understanding Success Criterion 2.4.1

Size and proximity

Size

Interactive elements, like links, should provide an area large enough that it is easy to activate them. This helps a variety of people, including those with motor control issues and those using imprecise inputs such as a touchscreen. A minimum size of 44×44 CSS pixels is recommended.

Text-only links in prose content are exempt from this requirement, but it's still a good idea to make sure enough text is hyperlinked to be easily activated.

  • Understanding Success Criterion 2.5.5: Target Size
  • Target Size and 2.5.5
  • Quick test: Large touch targets

Proximity

Interactive elements, like links, placed in close visual proximity should have space separating them. Spacing helps people with motor control issues, who may otherwise accidentally activate the wrong interactive content.

Spacing may be created using CSS properties like margin.

  • Hand tremors and the giant-button-problem

Specifications

Specification
HTML Standard # the-a-element

Compatibilidade com navegadores

BCD tables only load in the browser

See also

  • <link> is similar to <a>, but for metadata hyperlinks that are invisible to users.
  • :link is a CSS pseudo-class that will match <a> elements with valid href attributes.

Help improve MDN

Was this page helpful to you?YesNoLearn how to contribute.

This page was last modified on 21 de nov. de 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

Từ khóa » Html Telephone Link Verme