<a>【ハイパーリンク (Hyperlink / HTML 4.01:anchor】

概要 ( 関連CSS 関連要素 外部リンク ) 構文 DOMインタフェース
動作指定ジャンプ メーラー起動 ファイルダウンロード FTP参照 ファイル参照 架電 リンクの無効化 クエリパラメータとジャンプ先 id の両方指定

概要

メモ

  • ハイパーリンクの定義
  • href属性で動作指定 (詳細:href属性)〔
    • ジャンプ (ジャンプ先は href属性 で指定)
      • 同一ページ内id位置 (例:href="#~")
      • 別ページ (例:href="~.html")
      • 別ページ内id位置 (例:href="~.html#~")
      • ページの先頭 (href="#"・href="#top":"top"が未定義で大文字小文字の区別なし)
      • 新規ウィンドウ (タブ) に表示する場合、target【表示先】属性に "_blank" 指定〔下記も考慮〕
    • メーラー起動 (例:href="mailto:~")
    • ファイルダウンロード:download属性 も指定 (確認ダイアログの有無は、ブラウザ設定)
    • FTP参照 (例:href="ftp:~")
    • ファイル参照 (例:href="file:~")
    • 架電 (例:href="tel:~")
  • Tips
    • ツールチップ:多くの環境で、title【説明文】属性をツールチップ表示
    • リンクの無効化 (CSS):pointer-events: none (マウスポインタのイベントを無効化)
    • 画像のリンク:
      ・<a> タグで画像を囲む
      <map>【イメージマップ】を使用
    • 色の変更は、下記 CSS を参照
    • ?【クエリパラメータ】 と ジャンプ先 #【id】 の両方を指定する場合、 ?【クエリパラメータ】を先に指定 (参考:href【リンク先】属性)
    • target【表示先】属性に "_blank" 指定して新規ウィンドウ (タブ) を開くと、 表示先から元のウィンドウの操作が可能で、表示先のパフォーマンスが元に影響する為、 rel【リンク先の関係】属性に"noopener" または "noreferrer" の指定を考慮
    • 新規ウィンドウ (タブ) の表示が未指定のリンクは、下記操作で環境により可能
      ・[Ctrl]キー + クリック (移動なし)
      ・[Ctrl]キー + [Shift]キー + クリック (移動あり)
      ・右ボタンクリック
      ・リンクの長押し
  • ブラウザ拡張
    • Chrome 81 以降:リンク先に #:~:text=【テキスト】 を追加すると、指定したテキストをハイライト表示
      〔例:index.html#:~:text=WHATWG HTML

<a href="#syntax">構文へ (ページ内)</a><br>
<a href="index.html">HTML5 リファレンス メモ (別ページ)</a><br>
<a href="index.html" target="_blank">HTML5 リファレンス メモ 新規ウィンドウ (タブ)</a><br>
<a href="mailto:mail@mail.co.jp?subject=【件名】&amp;body=【本文】&amp;cc=cc@mail.co.jp&amp;bcc=bcc@mail.co.jp">メーラー起動</a><br>
<a href="download.txt" download>ファイルダウンロード (download.txt)</a><br>
<a href="download.txt" download="download-2.txt">ファイルダウンロード (別名:download-2.txt)</a>

構文へ (ページ内)
HTML5 リファレンス メモ (別ページ)
HTML5 リファレンス メモ 新規ウィンドウ (タブ)
メーラー起動
ファイルダウンロード (download.txt)
ファイルダウンロード (別名:download-2.txt)

CSS (一部)

スタイルスタイル定義備考
選択中のリンクテキスト色a:active color カラー定義:active【アクティブ要素】
未訪問リンクテキスト色a:link color カラー定義・:link【未訪問リンク要素】
既訪問リンクテキスト色a:visited color カラー定義・:visited【訪問済みリンク要素】
ホバー時スタイルa:hover:hover【ホバー要素】
リンクの無効化pointer-events: noneマウスポインタのイベントを無効化

構文

<a必須開始タグ
charset=【リンク先文字コード】リンク先文字コード
coords=【カンマ区切りの座標 または 長さ】リンク領域の相対座標
download [=【ファイル名】]リソースダウンロード (リソースファイル名省略可)
href=【リンク先】リンク先 (省略:リンクなし)
ジャンプ【URL】リンク先ジャンプ
#【id】同一ドキュメント内のid属性指定位置にジャンプ
【URL】?【クエリパラメータ】リンク先ジャンプ・クエリパラメータ指定
【URL】#【id】リンク先のid属性指定位置にジャンプ
【URL】?【クエリパラメータ】#【id】リンク先のid属性指定位置にジャンプ・クエリパラメータ指定
メーラー起動mailto:【メールアドレス】
[?【詳細】]
【メールアドレス】複数:半角スペース区切り
【詳細】下記指定可能 (複数:&amp;区切り)
subject=【件名】
cc=【CC】
bcc=【BCC】
body=【本文】
ファイルダウンロード【ファイル名 (URI)】 download属性指定 ファイル名指定可 (省略:元のファイル名)
FTP参照ftp:~
ファイル参照file:~
その他その他プロトコル
hreflang=【リンク先言語】リンク先言語
name=【名前】名前
ping=【URL (複数:半角スペース区切り)】ping 用 URL
referrerpolicy=【リファラー ポリシー】 リファラー ポリシー (W3C:Referrer Policy (英語))
参照元情報の送信
"" (空文字列)上位ポリシー利用
"no-referrer"送信なし
"no-referrer-when-downgrade"セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:送信あり
"origin"オリジンのみ送信
"origin-when-cross-origin"クロスオリジン:オリジンのみ送信
その他:送信あり
"same-origin"同一オリジンへ移動:送信あり
その他:送信なし
"strict-origin"セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:オリジンのみ送信
"strict-origin-when-cross-origin"セキュリティレベルが上昇(TLS 保護:なし → あり):オリジンのみ送信
セキュリティレベルが低下(TLS 保護:あり → なし):送信なし
その他:送信あり
"unsafe-url"送信あり (安全でない)
rel=【リンク先の関係 (複数:半角スペース区切り)】
リンク先の関係 (大文字・小文字の区別なし)
target に _blank を指定する場合は、"noopener"・"noreferrer"の指定を考慮
(Link types:HTML5HTML 5.1HTML 5.2WHATWG)
定義機能備考
alternateハイパーリンク代替文書
authorハイパーリンク著者
bookmarkハイパーリンクブックマーク
external 注記外部サイト
helpハイパーリンクヘルプ
license
(互換性:copyright)
ハイパーリンクライセンス
nextハイパーリンク次の文書
nofollow注記未承認ドキュメント
noopener 注記オープナーの無効化
noreferrer注記HTTP Refer(r)er ヘッダの送信なし
opener 注記補助ブラウジングコンテキスト作成 (target="_blank" の場合)
prefetch 外部リソース先行キャッシュ
prev
(互換性:previous)
ハイパーリンク前の文書
searchハイパーリンク検索
tagハイパーリンクタグ
拡張定義 (実装依存)
HTML5 link type extensions
rev=【リンク先からの関係】

リンク先からの関係 (reverse link)
(rel属性参照)
shape=rect(長方形) | rectangle | circle | circ | poly | polygon | default 領域の形状
target=【フレーム名】 | 【ウィンドウ名】 | _blank | _self | _parent | _top 表示先 (フレーム名・ウィンドウ名 以外に下記指定可)
_blank新規ウィンドウ (タブ)
_self現在フレーム
_parent現在フレームの親
_top元ウィンドウ全体(フレーム割解除)
type=【リンク先MIMEタイプ】リンク先MIMEタイプ

【グローバル属性】

accesskey=【アクセスキー (複数:半角スペース区切り )】アクセスキー
autocapitalize=【変換方法】自動大文字化
"characters"全て大文字
"on"
"sentences"
各文の最初を大文字
"off"
"none"
変換なし
"words"各単語の最初を大文字
autofocusページロード時、自動フォーカス
※:<button>【ボタン】<input>【汎用入力コントロール】<textarea>【複数行入力コントロール】<select>【選択リスト】はW3C定義の同名個別属性も参照
class=【クラス名 (複数:半角スペース区切り)】所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ]編集可否
contextmenu=<menu>【メニュー】 のid
コンテキストメニューのid
data-*=【カスタムデータ】カスタムデータ属性
dir=ltr (左から右) | rtl (右から左) | auto (自動)文字表記方向 (ltr:left to right text or table / rtl:right to left text or table)
<bdo>【テキスト方向形式】の場合、ltr または rtlが必須
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定)ドラッグ可否
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク)
ドロップデータの扱い
enterkeyhint=【ヒント】[Enter]キーのアクション ヒント (対応するラベル・アイコン等を表示)
"done"入力完了
"enter"改行挿入
"go"ターゲット移動
"next"次フィールド移動
"previous"前フィールド移動
"search"検索結果移動
"send"送信
hidden非表示
id=【id】id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む)
スペース文字 (SP:U+0020・tab:U+0009・LF:U+000A・FF:U+000C・CR:U+000D) 以外の全ての文字が使用可能 (大文字小文字の区別あり)
(<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照)
inputmode=【入力モード】入力モード (参照:CSS ime-mode【IMEモード】)
※:<input>【汎用入力コントロール】<textarea>【複数行入力コントロール】はW3C定義の同名個別属性も参照
"decimal"小数数値入力 (フォーマット区切り文字表示)
"email"Eメールアドレス入力 (補助入力:'@'・'.' 等)
"none"未指定
"numeric"数値入力
"search"検索入力
"tel"電話番号入力 ('0'〜'9'・'#'・'*'・ロケールにより対応アルファベット)
"text"テキスト入力
"url"URL入力 (補助入力:'/'・'.'・'www.'・'.com' 等)
is=【定義名】定義名
itemid=【URL】アイテムのグローバル識別子
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】アイテムのプロパティ
itemref=【要素IDのリスト】アイテムの参照リスト
itemscopeアイテムのプロパティ宣言
itemtype=【アイテムの型 (複数:半角スペース区切り)】アイテムの型
lang=【言語コード】言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語)
nonce=【ワンタイム トークン (文字列)】CSP(コンテンツ セキュリティ ポリシー)のチェックで使用されるワンタイム トークン(nonce:number used once)
※:<link>【メタデータリンク】<script>【スクリプト】<style>【スタイル情報】はW3C定義の同名個別属性も参照
slot=【スロット名】スロット名 (<slot>【スロット】のname属性に対応)
spellcheck=true | falseスペルチェック有無
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】スタイル
tabindex=【タブインデックス番号】タブインデックス
title=【説明文】説明 (多くはツールチップ表示)
<link>【メタデータリンク】:メタデータリンクのタイトル
<style>【スタイル情報】:スタイルシート名
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外)翻訳可否
>

【リンク表現】

</a>必須終了タグ

DOMインタフェース (HTMLAnchorElement・HTMLElement)

interface HTMLAnchorElement : HTMLElement { W3C:interface HTMLAnchorElement (英語)  HTML 5.1HTML 5.2WHATWG

【プロパティ】

HTMLAnchorElement プロパティ】

download;ダウンロードリソース名
hreflang;リンク先言語
referrerPolicy;リファラー ポリシー
rel;リンク先の関係
attribute DOMTokenListrelList;リンク先の関係 リスト
rev; リンク先からの関係
target;表示先
text;内容 (Node.textContent)
type;リンク先MIMEタイプ

HTMLElement プロパティ】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

accessKey;アクセスキー
accessKeyLabel;アクセスキー表現文字列
contentEditable;編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承)
Mapdataset;カスタムデータ属性 (data-*) マップ
dir;文字表記方向 ("ltr":左から右 / "rtl":右から左)
draggable;ドラッグ可否
[PutForwards=value] attribute DOMTokenListdropzone;ドロップデータの扱い
hidden;非表示状態
[TreatNullAs=EmptyString]innerText;内容 (テキスト形式)
isContentEditable;編集可否
lang;言語コード
spellcheck;スペルチェック有無
attribute longtabIndex;タブインデックス
title;説明
translate;翻訳可否

ElementCSSInlineStyle プロパティ】 HTMLElement implements ElementCSSInlineStyle; W3C:interface ElementCSSInlineStyle (英語)

attribute CSSStyleDeclarationstyle;スタイル

CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) W3C:Interface CSS2Properties (英語)

style.~;スタイル属性 (例:style.color・style.backgroundColor)

Element プロパティ】interface HTMLElement : Element WHATWG

[SameObject] attribute NamedNodeMapattributes;関連属性 マップ
[SameObject] attribute DOMTokenListclassList;クラス名 リスト
className;クラス名
id;id (ページ内で一意:name【コントロール(送信)名】を含む)
(innerHTML;)内容 (HTML形式) W3C:未定義 (参照:Element.outerHTMLNode.textContent (innerText))
localName;ローカル名
?namespaceURI;ネームスペースURI
(outerHTML;)タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTMLNode.textContent (innerText))
?prefix;プリフィックス
tagName;タグ名

Node プロパティ】 interface Element : Node WHATWG

?baseURI;ベースURI
[SameObject] childNodes;子ノード リスト
?firstChild;先頭子ノード
?lastChild;最終子ノード
?nextSibling;次の兄弟ノード
nodeName;ノード名
attribute unsigned shortnodeType;ノードタイプ
(ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE)
?nodeValue;ノード値
?ownerDocument;オーナードキュメント
?parentElement;親エレメント
?parentNode;親ノード
?previousSibling;前の兄弟ノード
?textContent;
(IE:innerText)
内容 (Text形式) (参照:Element.innerHTMLElement.outerHTML)
取得:要素内のHTMLタグを除外しテキストのみ
設定:HTMLタグはテキスト変換

GlobalEventHandlers プロパティ (一部) 】 HTMLElement implements GlobalEventHandlers; W3C:interface GlobalEventHandlers (英語) HTML 5.1HTML 5.2WHATWG

attribute EventHandler onabort;on~;イベントハンドラ (例:onclick・onfocus)

ParentNode プロパティ】Element implements ParentNode; WHATWG:Interface ParentNode (英語)

attribute unsigned longchildElementCount;子エレメントの数
[SameObject] attribute HTMLCollectionchildren;子エレメント コレクション
?firstElementChild;最初の子エレメント
?lastElementChild;最後の子エレメント

NonDocumentTypeChildNode プロパティ】Element implements NonDocumentTypeChildNode; WHATWG:Interface NonDocumentTypeChildNode (英語)

?previousElementSibling;前の兄弟エレメント
?nextElementSibling;次の兄弟エレメント

【メソッド】

HTMLElement メソッド】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

void click();クリック 操作
void focus();フォーカス設定 操作
void forceSpellCheck();スペルチェック
void blur();フォーカス喪失 操作

Element メソッド】interface HTMLElement : Element WHATWG:Interface Element (英語)

? getAttribute( name);属性取得
? getAttributeNS(? namespace, localName);属性取得 (ネームスペース指定)
HTMLCollection getElementsByClassName( classNames);エレメント コレクション取得 (クラス名指定)
HTMLCollection getElementsByTagName( localName);エレメント コレクション取得 (タグ名指定)
HTMLCollection getElementsByTagNameNS(? namespace, localName);エレメント コレクション取得 (ネームスペース・タグ名指定)
boolean hasAttribute( name);属性チェック
boolean hasAttributeNS(? namespace, localName);属性チェック (ネームスペース指定)
void removeAttribute( name);属性削除
void removeAttributeNS(? namespace, localName);属性削除 (ネームスペース指定)
void setAttribute( name, value);属性設定
void setAttributeNS(? namespace, name, value);属性設定 (ネームスペース指定)

Node メソッド】 interface Element : Node WHATWG:Interface Node (英語)

Node appendChild(Node node);子ノード追加
[NewObject] Node cloneNode(optional boolean deep = false);クローンノード作成
unsigned short compareDocumentPosition(Node other);他ノードとの位置比較
(DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC)
boolean contains(Node? other);指定子孫ノードの存在有無
boolean hasChildNodes();子ノードの存在有無
Node insertBefore(Node node, Node? child);指定ノード前挿入
boolean isDefaultNamespace(? namespace);デフォルトネームスペース チェック
boolean isEqualNode(Node? node);同一ノードチェック
? lookupNamespaceURI(? prefix);ネームスペースURI調査
? lookupPrefix(? namespace);ネームスペース プリフィックス調査
void normalize();標準化
Node removeChild(Node child);子ノード削除
Node replaceChild(Node node, Node child);子ノード置換

ParentNode メソッド】Element implements ParentNode; WHATWG:Interface ParentNode (英語)

Element? querySelector( selectors);指定セレクタ先頭エレメント取得
[NewObject] NodeList querySelectorAll( selectors);指定セレクタ ノードリスト取得

ChildNode メソッド】Element implements ChildNode; WHATWG:Interface ChildNode (英語)

void remove();削除
};
HTMLAnchorElement implements HTMLHyperlinkElementUtils;; W3C:interface HTMLHyperlinkElementUtils (英語)