path: root/files/ja/web/html/global_attributes/title/index.html

---
title: title
slug: Web/HTML/Global_attributes/title
tags:
  - Global attributes
  - HTML
  - Reference
  - Title
translation_of: Web/HTML/Global_attributes/title
---
<div>{{HTMLSidebar("Global_attributes")}}</div>

<p><span class="seoSummary"><strong><code>title</code></strong> <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>は、要素に関するアドバイザリー情報を表すテキストを含みます。</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/attribute-title.html","tabbed-shorter")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>典型的な用途は以下の通りです。</p>

<ul>
 <li>{{HTMLElement("iframe")}} 要素の支援技術のためのラベル付け</li>
 <li>プログラム的に関連付けれた{{HTMLElement("input")}} 要素のためのラベルを、実際の {{HTMLElement("label")}} の代替として提供</li>
 <li><a href="/ja/docs/Web/HTML/Element/table">データ表</a>内のコントロールのラベル付け</li>
</ul>

<p><code>title</code> 属性は {{HTMLElement("link")}}, {{HTMLElement("abbr")}}, {{HTMLElement("input")}}, {{HTMLElement("menuitem")}} の各要素において、追加の意味を持ちます。</p>

<h2 id="Multiline_titles" name="Multiline_titles">複数行のタイトル</h2>

<p><code>title</code> 属性は複数の行を含むことができます。それぞれの <code>U+000A LINE FEED</code> (<code>LF</code>) 文字が改行を表します。いくつか注意しなければならないのは、これが次のように二行にわたって描画されることです。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html notranslate">&lt;p&gt;Newlines in &lt;code&gt;title&lt;/code&gt; should be taken into account,
like &lt;abbr title="This is a
multiline title"&gt;example&lt;/abbr&gt;.&lt;/p&gt;</pre>

<h3 id="Result" name="Result">結果</h3>

<div>{{EmbedLiveSample('Multiline_titles')}}</div>

<h2 id="Title_attribute_inheritance" name="Title_attribute_inheritance">title 属性の継承</h2>

<p>要素に <code>title</code> 属性がない場合、属性値は親ノードから継承され、さらにそれはその親ノードから継承されるというようになります。</p>

<p>この属性が空文字列に設定されると、その祖先の <code>title</code> が関係なく、この要素のツールチップとして使用するべきではないことを意味します。</p>

<h3 id="HTML_2">HTML</h3>

<pre class="brush: html notranslate">&lt;div title="CoolTip"&gt;
  &lt;p&gt;Hovering here will show “CoolTip”.&lt;/p&gt;
  &lt;p title=""&gt;Hovering here will show nothing.&lt;/p&gt;
&lt;/div&gt;</pre>

<h3 id="Result_2" name="Result_2">結果</h3>

<div>{{EmbedLiveSample('Title_attribute_inheritance')}}</div>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p><code>title</code> 属性を使用することは、次のような人々にとって大きな問題になります。</p>

<ul>
 <li>タッチのみの機器を使用している人々</li>
 <li>キーボードで操作している人々</li>
 <li>読み上げソフトや拡大鏡などの支援技術で操作している人々</li>
 <li>細かい運動制御障碍を経験している人々</li>
 <li>認知障碍のある人</li>
</ul>

<p>これは、ブラウザーが表示するページを追加支援技術が解釈することによる複合性について、ブラウザーの互換性に一貫性がないためです。ツールチップ効果が必要であれば、上記の閲覧方法でもアクセスできる<a href="https://inclusive-components.design/tooltips-toggletips/">もっとアクセシブルな技術を使用する</a>方が効果的です。</p>

<ul>
 <li><a href="https://www.w3.org/TR/html/dom.html#the-title-attribute">3.2.5.1. The title attribute | W3C HTML 5.2: 3. Semantics, structure, and APIs of HTML documents</a></li>
 <li><a href="https://developer.paciellogroup.com/blog/2013/01/using-the-html-title-attribute-updated/">Using the HTML title attribute – updated | The Paciello Group</a></li>
 <li><a href="https://inclusive-components.design/tooltips-toggletips/">Tooltips &amp; Toggletips - Inclusive Components</a></li>
 <li><a href="https://www.24a11y.com/2017/the-trials-and-tribulations-of-the-title-attribute/">The Trials and Tribulations of the Title Attribute - 24 Accessibility</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>最新のスナップショットである {{SpecName('HTML5.1')}} から変更なし。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>{{SpecName('HTML WHATWG')}} のスナップショットであり、{{SpecName('HTML5 W3C')}} から変更なし。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "dom.html#the-title-attribute", "title")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>{{SpecName('HTML WHATWG')}} のスナップショット。 {{SpecName("HTML4.01")}} から、真にグローバルな属性になりました。</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/global.html#adef-title', 'title')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>{{HTMLElement("base")}}, {{HTMLElement("basefont")}}, {{HTMLElement("head")}}, {{HTMLElement("html")}}, {{HTMLElement("meta")}}, {{HTMLElement("param")}}, {{HTMLElement("script")}}, {{HTMLElement("title")}} を除くすべての要素で対応。</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<p>{{Compat("html.global_attributes.title")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>すべての <a href="/ja/docs/Web/HTML/Global_attributes">グローバル属性</a>。</li>
 <li>{{domxref("HTMLElement.title")}} は、この属性を反映します。</li>
</ul>