間違って覚えているかも？HTML

カスタマイズ HTML, CSS, JavaScript

2023/03/06

2023/03/06 2

vanillaice (Akira)

中級者向けトラブル対処 Tips Education LivingStandard

個人的に、htmlやCSSの用語を用いる際にはなるべく『英単語』『日本語対訳』の両方を記すようにこころがけています。その方が誤解釈や誤用が少ないはず。これまでの色々な質疑応答の中での気付きと、ついでに豆知識的なものも織り交ぜて。興味の有る方は御覧ください。

はじめに

テンプレートをカスタマイズしたり、記事を作成する上で、 HTMLやCSSなどを扱うことがあります。特にテンプレートカスタマイズでは避けて通れません。これらweb言語の成り立ちの基礎は英語です。それぞれが擁する専門用語についても英語です。これらコンピュータの言語は全世界共通ですから、日本語圏であろうとスペイン語圏であろうとなんであろうと、英語で書き記します。各国がそれぞれ別の基礎言語でもって書いてしまえばワールドワイドウェブ (World Wide Web) を実現できませんので致し方ないことです。

とは言え、書き記しは英語だとしても、指南や説明までこれらの専門用語を英語呼称のみで扱うと、その他の言語圏の方にとっての学びが非常に厳しい状況になってしまいます。なので当然各国の言語向けの『対訳』が存在します。今回は日本の方へ向けた記事で専門用語は英語と日本語の両方を覚えた方が良いの推進でもあります。

目次へ戻る↑

HTML, CSSはプログラミング言語ではない

その前に、私個人はなんでも小文字で書いてしまう癖があります。例えば『HTML』を『html』みたいに。理由は『その方が早く打てる』それだけなんだけども、今回はちゃんと大文字表記したいと思います ^^;

HTML: マークアップ言語 (markup language)
HyperText Markup Language
CSS: スタイルシート言語 (stylesheet language)
Cascading Style Sheets
JS: プログラミング言語 (programming language)
JavaScript

FC2ブログで記事を書く上で最も使用率の高いのが HTML(えいちてぃーえむえる) です。『見たまま編集』を常に利用しており、HTMLを意識していない方でも、エディターはHTMLの入力を補助するアプリケーションなので実際にはHTMLを使っています。
正式名称は HyperText Markup Language(はいぱーてきすとまーくあっぷらんぐうぃっじ)

次いで使用率の高いのが CSS(しーえすえす) ですね。エディター付随のツールを使用して何らかの装飾を付けたり、テンプレートの色彩や文字サイズなどの見た目を調整するのもCSSです。
正式名称は Cascading Style Sheets(きゃすけいでぃんぐすたいるしーつ)

HTML, CSSのことを稀に『プログラム』『プログラミング』と称する方がいらっしゃいますが、この2種についてはプログラミング言語ではありません。この機会に覚えていってね ( ﾟДﾟ)ﾉ

そしてFC2ブログでは記事内に JS(じぇいえす) を書くこともできますが、使用頻度は高くない、一般ブロガーさんはまず使わないと思います。こちらについては『プログラミング言語』で合ってます。
正式名称は JavaScript(じゃゔぁすくりぷと)

『プログラム (program)』『プログラミング (programming)』というのはコンピュータに何らかの動作・処理を指示したり制御したりすることです。HTMLやCSSの説明で「対象のテキストを表記したり(HTML)、赤くしたり(CSS)大きくする(CSS)など命令をする」という説明がされていることがありますが、HTMLやCSSは命令はしません。HTMLは予め定義されたタグと呼ばれる記しで囲うことで定義の受け継ぎ・構造整理を行い、CSSはそれらをスタイリングするだけです。『命令』という間違った認識のキーワードが氾濫しているので『プログラミング』と誤認してしまうのだろうと思います。

『HTML』『CSS』についてはそれがほぼそのまま言語名だ、という点を知っておけば今後間違えることもありません。

「プログラム(あるいはプログラミング言語)について教えてください。」と依頼されたら、受け取った方は「JSのことかな？C言語はたまたPHPか？」と考えます。HTML, CSSは候補に出てきません。

HTML, CSSは『プログラム』じゃないし『命令』もしないよ。

目次へ戻る↑

空要素

HTMLの指南書などでしばしば空要素という専門用語を目にするかと思います。

みなさん『空 (から)』の英語対訳で一番最初に思いつくのは何でしょうか。私が思うにそれは恐らく『empty』ではないかと思います。で、実際のHTMLではどうかというと何を指しているかによって2つあります。

void element (ゔぉいどえれめんと) --- 空要素
empty element (えんぷてぃえれめんと) --- 空要素

比較的よく知られている『empty』の他に『void』もあるんですね。しかしいずれも日本語対訳としては『空要素』となってしまいます。英語だとこの2つの区別が割と明確なんですが、日本語だとそれが難しい。

まず『empty』はご存知の通り『(中身が)空っぽ』『ガラガラ』という意味です。

This box is empty.
この箱は空だ。

The street was empty.
通りには誰もいなかった(ガラガラだった)

一方『void』は『無』『がらんどう』という意味で、『存在しない』ことを表します。

The hole in the ground is a void.
地面の穴は空洞だ。

She stared into the void.
彼女は虚空を見つめた。

HTML的にどうかというと、まずHTMLの基本の図を掲載します。

HTMLの成り立ちを踏まえて以下のような span要素があるとします。

<span>あいうえお</span>

これは至って単純でよくある形の構文です。下記はどうでしょうか。

<span></span>

開始タグ(opening tag) <span> と終了タグ(closing tag) </span> の間の内容(content) が無い、という状態です。これが empty element です。

では以下の場合はどうでしょうか。画像掲載時に利用する一般的なHTMLです。

<img src="https://xxx.jpg" width="500" height="300" loading="lazy" alt>

HTMLの成り立ち基本の開始タグはありますが、終了タグはありません。そして内容にあたるものもありません。ですがこれが正しい形です。これは void element です。void elementの定義では内容(content)・終了タグ(closing tag) 共に持てない、持ってはいけないとされています。

HTMLタグはその内容に対して定義づけをおこなうための『記し』です。開始タグと終了タグでもって『どこからどこまでが内容となるか』を示しますが、void element は内容を持たないので終了タグは『必要ない』というよりも『持ってはいけない』というルールです。

構文エラー

<img src="https://xxx.jpg" width="500" height="300" loading="lazy" alt></img>

emptyの場合もvoidの場合も日本語ではいずれも『空要素』となってしまうんですが、その本質は全く異なります。実は『empty element』と『void element』に関して、HTML5以前は定義説明が曖昧だったんですが、HTML5になり、現在では Living Standard になり、という過程で void element について以前よりもわかりやすく言及されるようになっています。

emptyとvoidの違いは実践の場では明確に区分する必要があります。一つの理由としては :empty というCSSの擬似クラス (pseudo class) があること。
* pseudo 発音: すーどぅ

.xxx:empty {
  display: none;
}

「.xxxが内容(content)を持たない場合は」という分岐条件です。これはあくまでも『empty element』の場合を示すのであって、『void element』に対する宣言(declaration)ではありません。
*『宣言』の意味については以下の記事を参照のこと

例として、以下のようなCSSがあるとします。

.xxx {
  margin: 2em 0;
  padding: 1em;
  background: red;
  color: white;
}

.xxx:empty {
  background: green;
}

サンプルの高さを確保するためCSSでは padding を設けています。そして通常の背景は赤、『要素に内容が無い場合』には背景を緑に、というものです。

<div class="xxx">これは内容です。</div>

<div class="xxx"></div>

一つ目のdiv要素には内容があり、もう一つのdiv要素には内容が無い、つまり empty element の状態です。以下が実際の描画です。

これは内容です。

:empty は割と使いどころがありますので、ご利用中のテンプレートのスタイルシートにももしかしたらこの記述があるかもしれませんね。使用ヒントとしては『内容が無いため何も表記されないが、paddingやmarginが生きているため微妙に場所を取っている』など。空のときは display: none とかに指定すれば解消できますね。

ちなみに擬似クラスをvoid elementに適用することはできません。たまに誤用されていますが、擬似クラスの特性は『ある特定の範囲の最初(::before)あるいは最後(::after)の子要素を擬似的に作成する』ことにあり、『ある範囲』の始点と終点とはつまり開始タグと終了タグのことです。

void elementは内容を持てない、つまり何も入れ子できないですし、終了タグも持たないのですから疑似要素を持たせることはできません。よくある誤用は『hr要素に擬似クラスを指定して線を増やす』とか。確かFC2ブログの古い方の新投稿画面でも使われていました(追記がタブで分かれていなかった頃だと記憶しています)

::before はかろうじて「ここ…か？」と思わせる位置はありますが(そんな感じがするだけで実際はもちろん違います)、::after に関しては完全に行き場がないのが図でわかるかと思います。

ブラウザが臨機応変すぎると </hr> と、存在しないものを誤補完して誤擬似クラスを実現してくれたりします(笑)
ただこの臨機応変も5〜6年ぐらい前まで。今は違反の擬似クラスは描画されないかと思います。描画が実現されずに構文エラーだけが残る、という何の得もない状態になるのでやめましょう。

というわけで、日本語だけでは説明が難儀でも英語を交えると上手く通じる、ということが往々にしてあります。

empty element は良くないのか

ついでに「empty elementは妥当か否か」の議論というのが昔からよく交わされています。個人的結論については「正当と言えなくとも妥当」です。仕様書を読んだ上での個人解釈であり、現場・実践の場での解釈でもあります。ただし div要素と span要素に限る。

div span は特に意味を持たないので、例えば p の空要素とは本質が異なります。p要素には『段落』という明確な定義があるのに、その意味を定義しておいて内容が空っぽ、というのは裏返せばそもそも定義する必要が無い、つまり無駄ですよね。

とはいえ各ブログサービスのエディターの仕組みによってはpのemptyが発生してしまうことも。Enter/ Return を押下すると

<p></p>

または

<p>&nbsp;</p>

みたいに。これは個人的に「なんか嫌だなぁ」と思います。
FC2ブログの場合はdivで形成されるので

<div></div>

になります。これなら全然良い、と思います。pの空より精神衛生上健全でいられる。「しのびねぇな」「構わんよ」的な(トータルテンボスさん大好き)

ビジュアルエディター(visual editor)、FC2ブログで言うところでは『新投稿画面の見たまま編集』を利用している方の中に「勝手にdivが〜」「ゴミタグdivが〜」と言う方が少なくないんですが、私からすると「何故そんなに嫌がるのかわからんなぁ (´・ω・｀)」という感じです。そのあたりについては以下の記事をご参照ください。

英語名を同時に覚えておくと理解の大きな手助けになるよ。

目次へ戻る↑

終了タグが無いイコール void element ではありません

せっかくvoid elementを説明サンプルに利用したので、誤解を招かないよう説明を加えたいと思います。

void element は現在の Living Standard (WHATWG組織が策定するHTMLの規格・仕様) では以下の13要素のみです。 <area> <base> <br> <col> <embed> <hr> <img> <input> <link> <meta> <source> <track> <wbr>

上記以外は『void elementではない』で確定なんですが、ごく簡単な table要素の例をみてみましょう。生真面目に書くと以下のようになります。

<table>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>みかん</td>
      <td>いちご</td>
    </tr>
    <tr>
      <td>apple</td>
      <td>orange</td>
      <td></td>
    </tr>
  </tbody>
</table>

緑の部位は省略可能です。tr と td は終了タグ省略可能で、tbody については開始タグも終了タグも省略可能です。
* tbody開始タグ省略は thead,tfoot が無く、table内tableの入れ子が無い場合のみ可

<table>
  <tr>
    <td>りんご
    <td>みかん
    <td>いちご
  <tr>
    <td>apple
    <td>orange
    <td>
</table>

上記でも正確な構文なんですね。この中の

<td>りんご

などは当然 void element ではありません。ただ単に終了タグを省略して楽して書いてる、というだけ。そもそも内容をもってますしね。また、以下の行

<td>

これは empty element にあたりますね。内容も終了タグも無いからといって決して void element ではないわけです。table要素は結構このパターン (内容が無いパターン)があるんじゃないでしょうか。いわゆる『空のセル』状態。終了タグがないと、開始タグがポツンとあるだけなので初心者の方が見たら逆に混乱するかもしれないですね ^^;

なんで省略できるかというと、後続となるタグが厳格に決まっているため、次のタグが開始されるとブラウザが自動で直前に終了タグを補完してくれるからです。例えば table の td の場合だと、後続の開始タグが <td> であるならば、先行の <td> は完結しているのが確定するので自動で </td><td> になります。先行の <td> が完結していないのに新規の <td> が始まるはずがない、という厳格な入れ子のルールに従っているわけですね。

個人的には「省略は上級者向けでその他の方へは非推奨」と常に言っていますが、tableに関しては単純な表なら初心者さんも積極的に省略しても良いかもしれません。だってtableのソースコードって部品が多くて見ただけで嫌になりますよねぇ (∵`)

他にもよく使うところでは li dt dd あたりも終了タグを省略できます。これらも入れ子のルールが厳格(後続要素が確定している)なものです。FC2ブログでは p要素の入れ子ルールを間違える人がかなり多いので個人的には上級者以外省略非推奨。

目次へ戻る↑

brの連続は妥当か

これはですねぇ、過去にも関連記事を書いており、当時は「正直良いか悪いかわからん、どっちでも良いのでは…」みたいな感じにしてあるんですが、2023年現時点で再度答えるならば極力避けたいです。

クローラー解釈と視聴覚サポートは関連が深いので、これらのサポートと照らしてクラーラーのことを考えるとわかりやすいかと思います。

div要素や p要素でブロック化された文章の音声読み上げと、br による任意改行が行われている文章の音声読み上げは全く異なります。

<p>あのイーハトーヴォのすきとおった風、</p>
<p>夏でも底に冷たさをもつ青いそら、</p>
<p>うつくしい森で飾られたモリーオ市、</p>
<p>郊外のぎらぎらひかる草の波。</p>

あのイーハトーヴォのすきとおった風、<br>
夏でも底に冷たさをもつ青いそら、<br>
うつくしい森で飾られたモリーオ市、<br>
郊外のぎらぎらひかる草の波。

宮沢賢治氏による実際の文章は一段落で構成されていますが、サンプルとして4行に分割しました。

ブロック化された文章の場合は4行4段落の構成、つまり4ブロックになっています。この場合音声読み上げは1ブロックを読んだら少し間を空けてから次のブロックを読み上げます。

br改行の文章は4行の1ブロックです。この場合は全て間を空けることなく読み上げが行われます。

* 読み上げアプリケーションによって基準は異なりますがあくまでも一般的な例です。

つまりブロック化を行わずにbr改行だけで記事を書き上げてしまうと、全文章がダラダラと抑揚なく読み上げられてしまうわけです。耳を頼りに理解する際は『音読時の区切り』がとても重要ですよね。区切りの無い文章というのはクローラーも同じように解釈している可能性が低くないということです。

新投稿画面についての記事でも触れていますが、『ブロック化する』というのは結構重要度が高いんですね。なので「divタグよりbrで改行した方がすっきりして綺麗」という方はちょっと勘違いしているのかな、と思います。それは見た目に文字数が少ないだけであって、すっきり綺麗とは程遠い。ブロック化されている方が整理整頓されていると言えます。なので見たまま編集で自動挿入されるdivは決してゴミではないし気にするな、と。『HTML編集』と『見たまま』の行き来で全てが横つなぎになって見づらい〜云々というのはまた別の話しです。

brで前後要素との距離を取る、というのは実際は問題外。margin や padding を利用して余白作成した方が良いんですが、HTML, CSSの知識があまり無い、という方へは酷な話しなので、自己責任の範疇で利用すれば良いと思います。利用中のテンプレート製作者と話しをする機会があれば相談してみても良いかもしれませんね。

結局のところHTMLの構文ルールを守るというのは大事なことで。一般的なブラウザというのは晴眼者に対して非常に寛容というか、構文が間違っていてもそれなりに表示してくれることがほとんどです。けれども音声読み上げを行うとめちゃくちゃでわけがわからない、ということも。するともしかしてクローラーも「わけわかんねぇな」と感じているかもです。適切なHTMLを利用することで音声読み上げはとても聞きやすくなります。当然クローラーも文書構造を理解しやすくなります。

そしてこれまた何度も書いていますが今回も。

Enter/ Return キー押下は改段落
Shift + Enter/ Return キー押下は改行

FC2ブログの新エディター『見たまま編集』で改段落を行えば

<div></div>

のHTMLがバックグラウンドで表記されますし、改行を行えば

<br>

のHTMLが表記されます。「空(empty)divだらけで〜」と文句を言っている方はきちんと正しい改行を行えば「brだらけ」に変更できます。そして今私は「brだらけより空divだらけの方がなんぼかマシよ。」とお伝えしています(笑)

最初の <div> と最後の </div> は必ず付きますので避けられません。

新エディターは『見たまま編集』でもp要素を作成できるようになっていますが、難しいなぁ、と感じる方は無理に使う必要は無いと思います。そこで無理して苦労するよりも無意味な改行を避けるように気を使う方が得策です。ここで言う『改行』はあるいは『改段落』かもしれませんが、やたらに行を変えるというのはあまり良くはない。何故なら本人が思っているほど読みやすくないからです。文章は『見た目』よりも『内容のまとまり』で考えた方がずっと読みやすいし伝わりやすいです。

目次へ戻る↑

記号の読み方

個人的な話しですが、「この語句って違うよなぁ…」と感じながらもそう言わないと通じない、という場面が多々あります。例えば # この記号は『シャープ(sharp)』ではなく『ハッシュ(hash)』なんですが、シャープって言わないと理解してもらえない、とか。大きく表示すると
# がハッシュ＃がシャープ。

実際のコーディングの現場だとこれ間違えると仕事にならないので用語を正しく使って欲しいんだけども、日本ではなかなか… (∵`)
あと正直、間違っているけれどもわざとそれを使う、とかも。でないと通じない(笑)
ハッシュについてはTwitterのおかげでだいぶましにはなってきていますが。

他にも _ の記号は『アンダーバー』ではなく『アンダースコア (underscore)』と言います。『アンダーバー』はたぶん日本でしか通じないと思います。

コーディングは目で見て実際のコードを書けても、打ち合わせやディスカッションができない、ということもあるんですよね。何らかのプロジェクトに属しているとかそういったことがなければHTMLの専門用語を口で話すという機会はなかなか無いですからね (∵`)
けれども両方(英語 + 日本語)で覚えておけば最強ですよ。最強。もちろん英語で言い換えることができる、といった浅いことではなくその英語の意味を理解する。するといままでぼんやりしていたものが英単語を見てようやく理解できた、とかもあります。たぶん。例えば div なんかは読み方『でぃゔ』だけれどもそれって何、とか。

div = division (でぃゔぃじょん) の略, divisionの意味は『分割』

ね？どうですか？

目次へ戻る↑

opacityは透明度ではなく不透明度

割と間違えて覚えられがち。opacity (おぅぱしてぃ) というCSSプロパティは『透明度』の指定ではなく実際は『不透明度』なので真逆なんですが、何故かみなさん間違って覚えているにも関わらず使いこなせているという不思議(笑)

小数点以前の 0 は省略できます。『不透明度』なので値 1 が完全不透明つまり『全く透けない』、値 0 が完全透明で『完全に透ける』です。『透明度』ならば逆ですよね。

opaque (おぅぺいく) --- 不透明
transparent (とらんすぱぁれんと) --- 透明

そもそもの英語を見れば一目瞭然です。opacityというのはopaqueの度合い(degree, でぃぐりー)を意味します。つまり『不透明度』

目次へ戻る↑

void elementの末尾スラッシュ

<img src="https://xxx.jpg" width="500" height="300" loading="lazy" alt />

<meta name="robots" content="noindex, nofollow" />

<br />

末尾の斜線 / をトレイリングスラッシュ (trailing slash) と言います。日本語だと『閉じスラッシュ』とかも使うでしょうか。trailingとは『末尾の』という意味です。

みなさんの利用テンプレートが XHTML以外ならばトレイリングスラッシュは不要です。寧ろ書かないでください。

XHTML での規格統一化が図られた時期もあったんですが、現在では頓挫、廃れた言語です。現在の規格は Living Standard(りゔぃんぐすたんだーど) と呼ばれます。その前が HTML5 で、両者の間に大きな違いはありません。策定管理団体がW3C(だぶるゆーすりーしー)からWHATWG(わっとだぶるゆーじー)に変わったのと、旧来のように『草案 → 勧告』などの手続きを行わなくなった等の変更はありますが、HTML自体の仕様については大きな変化はありません。

トレイリングスラッシュが必須なのはXHTMLなので、FC2ブログで配布されるほとんどのテンプレートは該当しません。中にはいくつかあると思いますが、その場合は『XHTML使用』等の注意があるかもしれません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

テンプレートHTMLの書き出し、この部位を doctype (document type definition, どきゅめんとたいぷでぃふぃにしょん, 文書タイプ宣言) と言いますが、これが上記ならばXHTMLなので利用を避けましょう。また、

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

上記はHTML4です。こちらも古いHTMLバージョンですから利用しないようにします。

<!DOCTYPE html>

FC2ブログテンプレートで利用を推奨できるのは上記のdoctypeのみです。

エディターのツールを利用してHTMLタグを挿入したり、第三サービスで発行されるソースコードなどにトレイリングスラッシュがついている場合がありますが、これは『XHTMLを利用している人がまだ居るかもしれない』という配慮です。例えば Twitterカードなども

<meta name="twitter:card" content="summary" />

発行コードはこうしてトレイリングスラッシュがついています。HTML5以降では付いていてもエラーになる等の害は生じませんが、不要なのですから書かなくとも良い (∵`)

<meta name="twitter:card" content="summary">

上記でOKです。

書いても書かなくても良いとはいえ、整理しておく方が良いですね。特に head要素内で

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="author" content="hoo" />
<link rel="stylesheet" href="https://xxx.css" media="all">
<link rel="alternate" type="application/rss+xml" href="xxx?xml" title="RSS" />
.
.
.

こんな感じでところどころ有ったり無かったり。こういうのは見た目に美しくないですし、見た目が悪いということはつまりは管理しづらいコードです。

ただし、私のテンプレートもそうですが、一部にトレイリングスラッシュが付いていることがあります。これらについては部分的なXML文書であったり(svgなど)、ルールに則って記していますので、削除してしまわないようにしてください。ブロガーのみなさんが注意するのは <meta> <img> <br> など限られたもののみで良いと思います。

HTML文書なら空(void)要素のトレイリングスラッシュは不要だよ。

目次へ戻る↑

やたらなtitle属性

事前理解として alt属性と title属性は用途が違いますので、区別するようにしてください。

よく見かけるんですが、例えば以下のリンクようなパターン(パソコンでの閲覧を推奨します)

The other way round

テキストに『The other way round』とあり、マウスを乗せるとtitle属性の値がツールチップ表示されて『The other way round』と。これに何の意味があるのか (∵`)

title属性というのは基本的に視聴覚サポートのアクセシビリティ(accessibility, 便利さ・利用しやすさ)には貢献しません。晴眼者に対してなら貢献する可能性はあります。

The other way round

マウスを乗せると『別タブで開きます』とツールチップ表示されます。これなら意味があります。ユーザー導線のガイドになりえますよね。

FC2ブログのプラグイン『リンク』『カテゴリ』なんかはリンクマウスオーバーで表記テキストと同じものがツールチップ表示されるようになっているわけなんですが、はっきり言って見た目に鬱陶しいだけで何の必要性もない。だって既にテキストとして表示されているのだから、同じものをツールチップで表示させることに何の意味があろうか (´・ω・｀)

で、記事内やサイドメニューなんかにリンクを掲載するときにいちいちtitle属性付けてる方を結構見かけるんですが、テキストと全く同じ文言を指定するのならソースが長くなるだけで無意味なのでやらなくて良いと思います。

FC2ブログを舞台とし、現時点でtitle属性が推奨されるのはズバリ動画のiframe です。画像は alt属性を付与できるので画像の内容(何を写しているのか, 何のためか等)の適切な説明を付けられるんですが、iframe要素にalt属性は付与できません。

例えばコロコロ変わるYouTubeの埋め込みコード、2023年3月現時点では以下のような感じです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/xxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

iframeのtitle属性はほとんどの読み上げソフトで読み上げの対象になりますので、アクセシビリティに貢献します。上記だと『YouTubeのプレイヤーが掲載されていますよ』というのが伝わるわけですね。同じようにクローラーも『外部コンテンツであり、そしてそれはYouTubeプレイヤーである』ちゃんと理解します。

ちなみにYouTube埋め込みコード中にある frameborder="0" は古いHTMLへの後方互換であり、現在では frameborder属性は廃止されていますので気になる方は削除を。

他にもUIコントロールに特化した WAI-ARIA(うぇいありあ) と呼ばれる支援技術も存在します。一般的なブログではここまで深く追求する必要は無いと思いますので紹介のみに留めます。
* WAI-ARIA: 正称 Web Accessibility Initiative Accessible Rich Internet Applications (うぇぶあくせしびりてぃいにしゃてぃゔあくせしぶるりっちいんたーねっとあぷりけーしょんず)

目次へ戻る↑