memo
memo
HTMLの『属性』

HTMLの『属性』

2分くらいで作ったサムネを見て『ぽいわぁ』って呟きました。
意味がわかりません。

今回は、マークアップ作業で当たり前のように書いている【属性】について書き留めていきます。

はて、属性とは

HTML要素（タグ）に付与することのできる、細かい設定を指します。
ここで言う設定は装飾的な意味合いではなく、要素そのものの振る舞いに関する設定という扱いで進めます。

参考までに、HTMLで必ず目にする属性の記述を解説していきたいと思います。

<html lang="ja">

上記はhtml要素に施した設定用の記述です。
一般的に目にする機会が最も多いであろうこの記述を使用して、属性の見方を考えようと思います。

属性の書き方

まずは、書き方も含めて簡単に噛み砕いてみます。

//　書き方は、
<要素名 属性名="属性値">

//　言い換えると、
<〇〇要素の 〇〇は "〇〇"にします>

という意味になります。

これを元に、最初にご紹介したhtml要素の属性を分解すると...

『このHTML要素の言語は日本語にするよ。』という設定を行っていることがわかります。

ちなみにこの属性、一つの要素に対して複数個設定することが可能です。
下記は、画像を表示するために使われる img要素 をEmmetで出した状態です。

<img src="" alt="">

この時点で、src属性とalt属性の二つが付与されていますよね。

このように、半角スペースを挟むことで複数設定でき、用途に合わせた様々な設定を持たせる事ができるんです。

しかしながら、どの要素にでも好きなように属性が付与できるというわけではありません。
要素によって設定できる属性が異なるので、注意が必要です。

代表的なものを下記に分類してみました。

グローバル属性

※どの要素にも付与することができる属性値

■ lang属性

最初の説明の際にも書きましたが、要素内の言語を指定する際に使用する属性です。
主にhtml要素や、ページ内に複数の言語が存在する際に使用します。
一番多く目にするのは、日本語の『ja』と英語の『en』ではないでしょうか。
それ以外の言語についてはこちらのページを参考にしてください。

<html lang="ja">
     ~~~~
</html>


■ id属性

要素に固有の名前を指定する属性です。
属性値は好きな文字列を指定できますが、先頭に数字を使うことはできません。
大きな特徴として、以下のふたつが挙げられます。

  • 同じid名を1ページ内で複数使用することができない
  • スタイルを当てる場合は、class属性よりも優先される

主にページ内リンクの位置指定する場合や、CSSでスタイルを当てたりJavascriptのトリガー、要素を取得する際のとして用いる場合が多いかと思います。

<h1 id="headLine1">ページタイトル</h1>

※僕はトリガーとリンク位置に限定して使用しており、余程の理由がなければスタイルは当てません。
（別にclass指定します。）

■ class属性

要素に分類名を指定する属性。
主にCSSでスタイルを当てる際に使われます。

id属性と異なるのは、以下になるかと思います。

  • 1ページ内での使用制限がない点
  • 半角スペースで区切る事で、いくつでも名前をつけることができる点
<p class="fruit apple">りんご</p>


■ title属性

要素に補足情報を指定する属性です。
補足情報を持たせることで、マウスオーバー時に属性値がツールチップとして表示されます。
※<title></title>とは別のものです。

<p title="赤い果物">りんご</p>

⚠️title属性についてはSEO的な信頼度は低いと言われています。また、設定しすぎるとカーソル移動のたびにツールチップがチラつき、コンテンツの邪魔になる可能性もあります。必要以上に指定しないことをお勧めします。

■ style属性

要素内にCSSを直接当てる際に使用する属性です。
属性値にはCSSの【プロパティ: 値 ; 】を指定して使用します。
複数設定することが可能ですが、セミコロンを忘れずに。

<p style="color: red;background-color:red;">りんご</p>

※CSSは外部のファイルで定義する事が推奨されているので、使う機会は少ないかもしれません。
個人的に使うとすれば、動的に背景画像を変えたい時とかでしょうか...

■ accesskey属性

要素にアクセスキー（ショートカットキー）を指定する属性。
主な使用先としては、フォーム部品になると思います。
ブラウザごとにショートカットキーが異なり、またアクセシビリティの観点から懸念点も見られます。
詳細はこちらをご参照ください。

<label accesskey="a">項目1</label>


■ tabindex属性

要素に[Tab]キーによるフォーカスの移動順序を指定する属性。
主に入力項目の多いフォーム部品で使用されているかと思います。

<input tabindex="1" value="最初にフォーカス">
<input tabindex="2" value="次点でフォーカス">


■ dir属性

要素の文字表記の方向を指定する属性。設定可能な属性値は以下3つです。

  • ltr：【left to right】の意味で、左から右方向に指定（日本語や英語など）
  • rtl：【right to left】の意味で、右から左方向に指定（アラビア語やヘブライ語など）
  • auto：自動判断の設定だが、誤った解釈になる可能性があるので注意
<p dir="ltr">左から右に受け流していきます</p>


■ contenteditable属性

HTML5から追加された、要素が編集が可能かどうかを指定する属性。
尚、編集した人の環境のみで反映される。属性値には以下の2つがある。

  • true：編集可能
  • false：編集不可
<p contenteditable="true">りんご</p>


■ draggable属性 [HTML5 新]

要素がドラック可能かを指定する属性。属性値には以下の3つがある。

  • true：ドラック可能
  • false：ドラック不可
  • auto：ブラウザで定義された値になる（初期値）
<p draggable="true">りんご</p>


■ dropzone属性 [HTML5 新]

要素内にドロップした時の挙動を指定する属性。属性値には処理方法と、アイテムの種類を指定する
[処理方法]
copy：コピー
move：移動
link：リンク
[アイテムの種類]
s:~：文字列
f:~：ファイル

<p dropzpne="copy f:image/gif f:image/jpeg f:image/png">ここに画像をドロップして下さい</p>


■ spellcheck属性 [HTML5 新]

要素のスペルチェックを行なうかを指定する属性。主にフォーム部品や、contenteditable属性を「true」にした要素に使用する。ただし、日本語には対応していない。
属性値は以下の2つから選択しが可能。

  • true：スペルチェックを行なう
  • false：スペルチェエクを行なわない
<p spellcheck="true" contenteditable="true">りんご</p>


■ translate属性 [HTML5 新]

要素の翻訳可否を指定する属性。主にローカライズ時に翻訳されるとおかしくなるプログラムコードなどに使用する。
属性値には以下の2つがある。

  • yes：翻訳する（初期値）
  • no：翻訳しない
<p translate="no">Apple</p>


■ hidden属性 [HTML5 新]

要素が今は無関係であることを指定する属性。
主に今は関連性がなく、後ほど関連するかもしれない要素に使用する。
属性値は「hidden」（省略可）のみである。

<p hidden>我々は宇宙人ですか？</p>


■data-*属性 [HTML5 新]

要素に独自のデータを設定できる属性です。
data- の後ろに、1文字以上の任意の文字列を属性名（半角英数字）として登録することができます。
data属性の属性値はCSSで取得することもできるので、使い方によっては表現しやすくなるものもでてくるかと思います。

<h1 data-text="headline-title">h1タイトル</h1>


要素固有属性

※あらかじめ定められた要素専用の属性値です。

■ charset属性

文字エンコードを宣言する属性です。
meta要素内に入力してHTML全体のエンコードを指定する場合や、script要素内に入力してscriptのエンコードを指定する場合に使います。
現代のウェブサービスの多くでは UTF-8 が標準とされていますが、他にも

  • Shift_JIS
  • EUC-JP
  • ASCII

など、多くの種類があります。

<meta charset="utf-8">


■ alt属性

画像が表示されない場合の、代替テキストを設定する属性です。
alt属性はSEOの観点からも信頼度の高い属性と言われていますので、img要素を使用して画像を表示させる場合は、できるだけ入力するようにしましょう。

<img src="./assets/images.sample.jpg" alt="サンプル画像">


■ content属性

meta要素の中でそのページの説明を記入する属性です。
SEO上重要な属性と言われていますので、しっかりと入力しましょう。

<meta name="description" content="ページの説明文">


■ name属性

要素に名前を付けるための属性です。
設定された名前は、CSSやJavaScriptから要素にアクセスする際などに用いられます。

<button name="clickbutton" onclick="alert">ボタン</button>


■ href属性

リンク先を設定するための属性です。
相対・絶対パスで遷移先のページを指定します。
エイチレフ属性と呼ぶことに慣れていましたが、稀にハレフと読む方もお見かけします。

<a href="/page/targetpage/">リンク先</a>


■ type属性

type属性は良く見かける属性ですが、追加する要素によって用途や目的が異なります。
そのため、一概に『こういう属性です』という定義が難しい属性です。
追加された要素に対して『なんの種類のものとして扱うか』という言い回しが個人的にはしっくりきています。

<link type="text/css" rel="stylesheet" href="/style.css" />
~~~
<script type="text/javascript">
 // JavaScript の記述
</script>


■ src属性

表示させたい・読み込みたいファイルやデータの参照先を指定する属性です。
ファイルまでの相対・絶対パスを属性値として設定します。
img要素やiframe要素、script要素などで使用されますね。

<img src="./assets/images/sample.jpg" alt="サンプル画像">
<script src="./assets/js/main.js" type=''text/javascript"></script>


■ target属性

a要素などに入れてリンク先を同じウィンドウで開くか、新しいウィンドウで開くかなどを設定します。
下記のサンプルではリンク先を新規タブで表示する _blank を指定していますが、その他にも

  • _self
  • _parent
  • _top

などがあります。

<a href="/page/targetpage/index.html" target="_blank">リンク先</a>


注意点

開始タグ名から『半角スペース』を１つあけて属性を記述する

1つというより、1つ以上という表現が正しいかもしれません。
大事なのは、半角スペースであること。全角だと正確に認識されません。
全角スペースをハイライトしてくれる機能があるといいかもしれません。
ちなみに、みんな大好きVS Codeでは標準機能として追加実装されました。

さいごに

ここまで色んな属性を書き留めてきましたが、他にもまだまだあります。
既に廃止になったものなど、いくつも省きました。

全部覚えることは不可能だと思うので、「こんなのあるんだな〜」程度に留めておいて、本当に必要な時に都度ググりながら思い出せればいいかなと思っています。

ただ、知っているのと知らないのでは制作時やその後の運用に関わるので、今後は意識的に使っていこうと思います。

用法要領を守って正しく使用しましょう、という感じですね。

今回は以上です。
最後までお読みいただき、ありがとうございました。