title属性 - 要素のタイトル
公開日:
title属性は、要素にタイトルを付けるための属性です。タイトルは補足情報でもあります。この属性を付けた要素にマウスカーソルをホバーした時、ツールチップで属性値が表示されます。
説明
title属性は、要素にタイトルや補足情報を付けるための属性です。属性値に文字列を指定して下さい。
HTML
<p title="SYNCER">素敵なウェブサイトを1つ知っている。</p>
補足情報としても利用できます。例えば、デザインの都合でハイパーリンクのテキストがシンプルになってしまう場合、title属性に大まかな説明を指定しておけば、ユーザーがリンク先に遷移する前にツールチップで内容を確認できます。
HTML
<!-- 遷移せずに概要を確認できる -->
<a href="./title.html" title="title属性は、要素にタイトルを付けるためのグローバル属性です。">title属性</a>
サンプルコード
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>【デモ】title属性 - 要素のタイトル</title>
<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Global_attribute/title/">
<style>
body {
background-color: #fff ;
}
</style>
</head>
<body>
<p>title属性は、要素にタイトルを付けるための属性です。タイトルは、マウスカーソルをホバーした時のツールチップで表示されます。</p>
<h2>title=SYNCER</h2>
<p title="SYNCER">私は素敵なウェブサイトを知っている。</p>
<h2>リンクのタイトル</h2>
<a href="./" title="title属性は、要素にタイトルを付けるためのグローバル属性です。">title属性</a>
</body>
</html>