世界一「雑」に説明するセマンティック・マークアップの手順（3）

年末から怒涛のコーディング案件ラッシュでnote書いてる余裕が全くなったので、かなり間があいてしまいました。待っててくれた方（いるの？）ごめんなさい。というわけで、今更ですがProgateが教えてくれないシリーズ第5弾を投下します。

見出し、箇条書き、段落、セクション関連要素などで文書全体の情報構造をマークアップした後は、画像の挿入、リンクの設定、その他テキストレベルでの細かい意味づけなどを必要に応じて行います。

今回はこれらの細かいマークアップに関する注意点をまとめました。こちらに関してはProgateでは正直ほとんど触れられていません。ただ全部解説しようとすると結構な量になるので、これだけは理解しといた方がいいな、という点に絞って解説していきたいと思います！

【1】画像の代替テキスト（alt属性）

Progateの教材を初級から上級まで一通りやってみて、これはヤバいな、と思ったことの筆頭に挙げられるのが、画像の代替テキスト（alt属性：オルト属性）について全く触れられていないという点です。

ちなみにalt属性というのはこういうやつです。

<img src="img/ph-komach.jpg" alt="窓際で外を眺める黒猫の写真">

駆け出しの方はProgateに書かれている内容さえ理解していれば最低限のところはOKだろう、と考えがちですが、alt属性に関して言えばこれはマークアップの初歩の初歩、基本のキに該当する項目ですので、これは知らないでは済まされないものだ、という認識を持っておくようにしてください。

img要素のalt属性は、何らかの事情で画像が表示できない場合、画像の代わりにその内容を伝えるためのテキスト情報を記述するための属性です。画像が表示できない場合というのは、単に画像ファイルへのパスが切れていて表示されないといったケースもあるでしょうが、想定される最も重要なケースはスクリーンリーダー（音声読み上げブラウザ）への対応と、検索エンジンへの対応です。

スクリーンリーダーのユーザーは読み上げられるテキスト情報でしかコンテンツの内容を理解することができませんので、altが無いと画像で表現されたコンテンツの情報を全く読み取ることができません。これはアクセシビリティを考える上で最も深刻な問題となります。

また、みんな大好きSEOの観点から見ても、画像にaltが無いのは不利に働く場合があります。例えば見出しなどのテキスト情報を画像化した場合、altがあれば検索エンジンはその内容をきちんと読んでくれますが、altが無かった場合には情報を読み取ってくれません。仮にコンテンツ内容の大半が画像で全くaltが無ければ、そのページには何の情報もない空っぽのページであるという評価をされてしまう恐れが高いのです。（近年画像認識処理の進歩である程度は内容を読み取ることも可能となってきていますが、完全ではありませんし、ましてこちらの意図する内容を読み取ってくれる保証はありません。）

【2】alt属性の付け方

Webサイト上でよく使われる画像を大きく4つのパターンに分類して、それぞれについてのaltの付け方を簡単に整理しておきましょう。

（1）画像文字
見出しやテキストなどの文字をそのまま画像化したものの場合、altの中身は画像内に書かれているテキストをそのまま入れてください。バナー画像などの場合も同様です。

（2）イメージ写真・装飾画像
単なるイメージ写真や装飾のための画像類は、情報として伝える必要のないものであるため、このようなものの場合はaltの中身を空にして「alt=""」のように設定しておきましょう。ちなみにalt属性自体を書かないというのはNGです。alt属性が無かった場合、一部のスクリーンリーダーでは画像のファイルパスを読み上げてしまうため、情報の読み取りが困難となってしまう恐れがあるからです。

（3）人・物・動物・風景などのコンテンツ写真
イメージではなく、コンテンツとして意味のあるこれらの写真については、その内容が伝わるように「◯◯の写真」「◯◯している様子」「◯◯で△△な□□の風景」といった、言葉だけである程度画像の内容がイメージできるようなaltを入れるようにするのが理想です。
ただし、複雑なものになるとコーディングではなくライティングの領域になってくるため、ディレクター等の指示を仰いだ方が良いかもしれません。

（4）地図、グラフ、データ類
これらについてはその画像で伝えたい情報を正確に文字に起こす必要があります。グラフやデータ等の場合、相当な文字数になる可能性もありますが、altの役割としては情報が伝わらなければ意味が無いわけですから、ここは手を抜いてはいけないところです。(3)同様、その画像の意図を正しく伝達するためにライティングが必要となるものですので、必要であればディレクター等の指示を仰ぐようにしましょう。

ただし、地図やグラフなどの画像のそばに、別途テキストでその内容をきちんと説明したコンテンツがある場合は、altの中は「alt="◯◯の地図"」「alt="◯◯のグラフ"」といった簡単な説明で済ませておいて構いません。ほぼ同じ内容がaltと本文で重複して出てくると、逆にスクリーンリーダーのユーザーにとって読みづらいものとなってしまうため、HTML5の仕様では「隣接するテキストと重複する内容のaltは空で良い」ということになっているからです。全く同じ内容ならalt=""でも良さそうではありますが、地図やグラフの場合はコンテンツとしてそこに画像が存在する、ということ自体は伝えてあげた方良いので、空ではなく、簡単な説明のみ記載することを推奨します。

altはなかなか奥が深いのですが、とりあえず、まずは
・alt属性の存在とその役割を理解すること
・イメージ写真や装飾には空altをつけること
・文字が書かれた画像にはその文字をaltに入れること
・その他のコンテンツ画像はできるだけわかりやすいaltを入れるように努力すること
という感じで対応するようにしましょう。

なお、より詳しい事例を知りたい方は以下のサイトを参考にしてください。
ウェブアクセシビリティ事例集

【3】リンクの設置とその種類

リンク（a要素）についてはProgateでも説明がありましたので基本的な使い方は問題ないかと思います。

<a href="xxxx.html">リンクテキスト</a>

このように<a>〜</a>でリンクしたいコンテンツを囲み、href属性でリンク先のパスを指定する、というのがa要素のもっとも基本的な使い方となります。この辺はProgateでもしっかり解説していましたので特に問題はないと思いますが、a要素にはhref属性の値に結構いろいろな値を持てたり、追加の属性を設定したりすることもあるので、バリエーションを紹介しておきます。

（1）ページ内リンク

<a href="#hoge">ページ内リンクテキスト</a>

href属性の中を#で始まる文字列にすることで、同一ページ内のリンク（ページ内リンク）になります。#の後ろにはリンク先のid属性名を記述します。

（2）外部リンクとtarget属性

<a href="https://www.example.jp" target="_blank" rel="noopener">

href属性の中にhttpから始まる絶対パスを記述すれば、外部サーバへのリンク（外部リンク）となります。この場合別タブで開かせたいという要望が割と多いので、その場合はtarget属性の値を_blankとしておきましょう。また、セキュリティ対策のため、rel属性にnoopenerを設定しておくことも推奨します。rel="noopner"についてはこちらのブログが大変わかりやすかったので参考にしてください。

（3）メールリンク

<a href="mailto:hogehoge@example.jp">メールアドレス</a>

href属性の値をmailto:メールアドレスとすることで、クリックした時にユーザーが使っているデフォルトのメールソフトを起動させる事ができます。また以下のように記述することでタイトルと本文をあらかじめ記載した状態でメールソフトを起動させることができます。

<a href="mailto:hogehoge@example.jp?subject=title&body=honbun">

mailto:メールアドレスの後ろに?から後ろが件名・本文を指定するための引数となり、subject=でタイトル、body=で本文を指定します。タイトルと本文の2つの引数を指定するので、2つめの引数の前には&が入ることに注意しましょう。

なお、件名や本文に日本語を使う場合、「エンコード」（日本語を半角英数に変換する処理）をしておいた方が安全ですので、こちらのツール等で変換してから記載しましょう。

（4）電話リンク

<a href="tel:01201234567">電話番号</a>

href属性の値をtel:電話番号とすることで、対応しているデバイスであればクリック時に電話をかけることができます。
特にモバイルサイトから電話で問い合わせをしてもらいたい場合にはtelリンクの設定は必須事項と言えるので、覚えておきましょう。

（5）ブロック領域へのリンク設定
通常、a要素はp要素や他のブロックレベル要素の内側に設定する事が多いのですが、HTML5の仕様では以下の例のように他のブロックレベルの要素をまとめて一つのa要素の中に入れる事もできます。
例えばカード型レイアウトの一覧で、各カード全体に対して一つのリンクを設定したいと言った場合でも簡単に実現する事ができます。

※この辺の要素同士の入れ子に関するルールは、「コンテンツモデル」という厳密な仕様として定義されてます。これについてはまた別の機会に解説したいと思います。

【3】比較的よく使うテキストレベルの要素

その他Progateでは紹介されていませんが比較的使用頻度の高いテキストレベルの要素と、その使い方の注意点をいくつか紹介しておきます。

（1）strong要素
strong要素は、「重要な語句」を表すテキストレベルの要素で、一般的なブラウザでは太字で表示されます。

<p>strong要素はコンテンツ内容のうち、<strong>特に重要な情報</strong>であることを伝えたい場合に使います。<p>

strong要素を使うと太字で表示されることになりますが、これはあくまで「重要な語句である」という意味づけを行った結果としての表示であって、単に見た目を太くしたいというだけの目的で安易にstrong要素を使ってはいけません。単に見た目を太くしたいだけなのであれば、CSSでスタイルを変更するようにしてください。

（2）small要素
small要素は、「免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目」を表す要素で、一般的なブラウザでは一回り小さな文字で表示されます。

<p><small>&copy; 2020 xxxxxxxx. </small></p>

small要素を使うと一回り小さい文字で表示されますが、もちろんこれも意味付けの結果であって、単に文字を小さくしたいというだけの目的で安易にsmall要素を使ってはいけません。単に文字を小さくしたいだけであれば、CSSでスタイルを変更するようにしてください。

なかなか判断が難しい要素でもありますが、Webサイトの場合フッターの著作権表記（コピーライト）はsmallの使用例としてよく挙げられるものであり、かつほとんど全てのWebサイトに記述されるものですので、まずはここから使っていきましょう。

（3）br要素
br要素は文中で改行するための要素です。
1つの段落の文章が長いような場合に、段落を分けず任意の場所で改行することで可読性を高めるような場合に使います。

<p>br要素は文中で改行するための要素です。<br>1つの段落の文章が長いような場合に、段落を分けず任意の場所で改行することで可読性を高めるような場合に使います。</p>

br要素のよくある間違った使い方として、次のようなものがあります。

<p>br要素は文中で改行するための要素です。<br>
<br>
<br>
<br>
1つの段落の文章が長いような場合に、段落を分けず任意の場所で改行することで可読性を高めるような場合に使います。</p>

このようにbr要素を連続して記述すると、ブラウザ上では余白が空いた状態で表示されるため、「段落間の余白を広げるため」に使用してしまうケースがよくあります。気持ちはわかりますが、素人さんがブログを書くとかならいざしらず、プロがコーディングをする場合はこのような使い方はさすがに好ましくありません。「段落間の余白を広げる」のが目的であれば、p要素を2つに分けて、その間をCSSのmarginを使って広げましょう。

（4）blockquote要素・cite要素・q要素
この3つの要素はいずれも「引用文」に関わる要素です。企業サイトなどではあまり使うことはないかもしれませんが、記事系のメディアなどの場合は引用した箇所については「引用だ」と分かるように意味づけしておくことが望ましいので、これらを使うようにしましょう。3つの要素の使い分けは以下のとおりです。

・blockquote要素
比較的長文の内容を段落ごと引用する場合に使います。（※これはテキストレベルの要素じゃないですね。すみません。）引用元のURL情報を付与したい場合にはcite属性に設定をします。

<p>以下に、夏目漱石の有名な作品の一節を紹介します。</p>
<blockquote>
<p>吾輩は猫である。名前はまだない。<p>
<p>どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</blockquote>

・cite要素
引用した作品名を表す要素です。

<p>以下に、夏目漱石の有名な作品の一節を紹介します。</p>
<blockquote>
<p>吾輩は猫である。名前はまだない。<p>
<p>どこで生れたか頓（とん）と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p><cite>『吾輩は猫である』</cite>より</p>
</blockquote>

・q要素
文中で段落をまたがない比較的短いフレーズを引用する場合に使用します。

<p>有名な小説で、<q>吾輩は猫である。名前はまだない。</q>という一節があったのだけど、あれは誰の作品だったかな？</p>

さいごに

HTMLの要素はまだまだ沢山ありますが、全てを覚える必要は正直ありません。ただ、何を使うにしろ、HTMLのタグでマークアップするということは、そこに何らかの意味を与えるという行為ですので、あらかじめ仕様で決められた定義から外れた使い方をしてはいけない、という点は共通して言えることです。HTMLを覚える時には、とにかくこの点だけしっかり頭に入れておくようにしましょう。

著書が増刷されました♪

本日2020年2月15日、翔泳社さんから発行されている著書『HTML5&CSS3標準デザイン講座 第2版』がおかげさまで第2刷に増刷されました！店頭在庫も順次第2刷に置き換わっていくと思いますので、お買い求めの際は奥付で確認してみてください♪（初版の場合は正誤表のチェックをお願いいたします！）

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】