Bullet Group Advent Calendar 2020 8日目の記事です。
「えぇい！とりあえず全部pとspanで囲っちゃえ！」
「ちょっと待って！そのHTML、もっと面白くできない？」
ただHTMLを書くだけじゃなく、
何故そのタグを使うのか？
考えながら書くと、きっともっとHTMLが楽しくなるはずです！
はじめまして
自己紹介が遅れました。デザインチームでコーダーをしているawagatusmaです。
コーダーと名乗っていますが、マークアップエンジニアという肩書でいたいくらいマークアップが好きです。専門学生時代はクラスメイトとHTML/CSSを擬人化したりして、他のクラスメイトに変な目で見られていました。
なので、今回は触りだけにはなりますが、その面白さについて少しでもお伝えできればなと思っております。
数多くの要素から成り立っている
皆さんご存知の通り、SEOからの観点から「文書構造を理解してマークアップする」ことは必要不可欠です。
この文書において、どこが見出しなのか。どこが本文で、どこを一番に伝えたくて、どこが注釈になるのか… 一つの文書/区分の中には、考えれば考えるほど数多くの要素が含まれています。
pとspanだけではなかなか表せないんです。 ※もちろんpやspanで完結する要素もあります。
何故そこにそのタグを使うの？
結論から言うと、「何故？」を考えながらマークアップするとHTMLは途端に面白くなる！と私は思っています。
例えば… 私がHTMLを学び始めた頃は、サイト名/ロゴをh1で囲うと学んでいました。
ですが、最近だと「そのページで本当にサイト名を伝えたいの？」という考え方が主流になっています。
実際、トップページでh1を使用せずに第二階層のページから使っているサイトも今では珍しくありません。
「それって本当に必要？これって何で書いてるの？」
……あー、これを考えるだけでもワクワクしませんか？私はしますね！！
余談ですが、私はdlタグを好んで多用してしまいがちです。
どうすれば全ての人に伝わる？
私がマークアップをする際に特に意識しているのは、主にこの2つです。
- このページで何をどう伝えたい/見せたいのか
- 目の不自由な方が見た時に、音だけでサイトの内容を伝えられるか
1つ目は先ほど書いた通りですね。
そして、それ以上に私が意識しているのが2つ目になります。
目の不自由な方が見ても伝わるWebサイト。
これは「Webアクセシビリティ」において、必要不可欠な考え方です。Webに限らずに言うと「ユニバーサルデザイン」とも呼びます。
画面が見えなくても、音だけでサイトの内容を伝えるにはどうしたらいいか。
この意識を常に持っていれば、文書構造を理解しつつマークアップをする癖がついてくるので、個人的にオススメしたい考え方です。
具体的な例として、alt属性の設定をあげます。
この画像にalt属性を記述する時、あなたはどうしますか？
- alt="猫"
- alt="パソコンの上に乗って作業を邪魔する子猫の写真"
- alt=猫 子猫 ペット パソコン リモートワーク"
- alt=""
- 記述なし
この場合、②が最適だと私は考えます。
どのような写真なのかが、実際に写真を見なくても浮かんできませんか？
SEOの観点からも、ここでどのような画像が使われているのかがalt属性のみで伝わります。
他の記述についても触れておきます！
1.alt="猫"
単語のみの記述ですと、それこそ音声リーダーでWebサイトを閲覧した際に画像なのかテキストなのか…判断がつかなくなってしまいます。 画像の説明としては最適ではないと考えます。
3.alt=猫 子猫 ペット パソコン リモートワーク"
多数のキーワードを記述するのも避けた方が良いです。 画像の説明が伝わりにくくなってしまったり、画像にそぐわないキーワードが入ってしまう可能性もあり、伝わりづらくなってしまいます。
4.alt=""
装飾で使用している写真/画像など、意味がない要素の場合には空で記述しておきます。率直に、これ説明いらないなーと思ったら空にしておけばOKだと思います。
5.記述なし
altの記述をなしにしてしまうと、ファイル名が読み上げられてしまいます。 そのため、④の記述は必須と考えていいでしょう。
どの言語にも当てはまりますが、最適ではないけど間違いではない…というところが、難しくもあり面白い部分です。
マークアップって面白いんです！
HTMLマークアップに正解はありません。
ですが、毎日のように書いているHTML。
少しでも面白く・楽しく書ける考え方をしていきませんか？
