世界一「雑」に説明するセマンティック・マークアップの手順(1)
Progate卒業生のみなさん、こんにちは。「Progateが教えてくれないフロントエンドの基礎知識」シリーズの第一弾、第二弾が比較的好評だったようなので、調子に乗って第三弾を投下します。
今回は、見出しだけではなく一般的なWebページ全体を最低限セマンティックにマークアップするための、世界一(?)雑な説明をお届けします(笑)
見出し(h1〜h6)
前回の記事に書いたとおり、一番基本的なHTMLのセマンティックを担保するための要素は「見出し」です。
1に見出し、2に見出し、3・4が無くて5に見出し。
そのくらい見出しは大事です。ぶっちゃけ他が適当でも見出しさえちゃんとできてれば半分くらいは何とかなります。頑張ろう、見出し。
(基本的な考え方は前回の記事を参照してください)
箇条書き要素(ul / ol)
見出し以外の要素で分かりやすいのは「箇条書き」です。
Webサイトの場合、各所にナビゲーションが配置されていると思いますが、そういうのは縦並びだろうが横並びだろうが基本的に全部ul要素でいいです。この辺は機械的にちゃちゃっとやっちゃいましょう。
ただ、「箇条書き」要素は「ul」の他に「ol」というものもあって、微妙に用途が違います。ulはアイテムの並び順に特にしばりがない順不同リスト、olはアイテムの並び順に意味があるリストという違いです。
ここを厳密に考えるのであれば、ナビゲーション類の中でも唯一パンくずリストだけはもしかしたらolの方がベターかも?な気もします。(ただまぁ、olにしたところでそれが階層構造を意味することなどは表現できないのでぶっちゃけどっちでもいいです。)
ナビゲーション以外のコンテンツでは、日常生活上「箇条書き」として認識しているようなもの(名詞や短文、画像類など、同じカテゴリとして集められたひとかたまりの並列コンテンツ)は全て箇条書き要素の対象です。そこもあまり難しく考えなくても「見たまんま」で大丈夫です。
ただちょっと難しいのがカード型レイアウトが並んでるような大型の一覧系コンテンツの場合ですね。。これは正直、箇条書き派とそうでない派に大きく二分されて人によって判断分かれるところだと思います。一般的に「箇条書き」というのはひとつひとつのアイテムの情報量がさほど多くないものをひとまとめにして一覧性をもたせるものであるという認識があるのですが、
箇条書きアイテム1つに許容される情報量に決まりがあるわけでは無いので、そこはもう、各自の判断におまかせです。
個人的には、「カードの中に見出し要素を必要とするような、ある程度まとまったコンテンツ量があるもの」であればul要素ではなく後に説明するセクション要素を使ってマークアップする派です。
ul要素っていうのはあくまで並列に並んだアイテムがひとつの意味のある固まりになるはずなので、その中に見出し要素が入っちゃってるとアウトライン的にひとつひとつのアイテムが分断されちゃうように思われるので、私はやらないです。(※あくまで個人の判断です)
記述リスト(dl)
「記述リスト(昔は定義リストと呼ばれてました)」も「箇条書き」の一種です。ただし、単なる箇条書きではなくて「項目」と「その内容」がワンセットになった形で情報が並ぶタイプの箇条書きになります。
とても良く使う要素なのですが、なぜかProgateでは出てこなかったはずなので、簡単にタグ構造を示しておきますね。
<dl>
<dt>ハンドル名</dt>
<dd>にゃんこ@マークアップの人</dd>
<dt>出身地</dt>
<dd>愛知県</dd>
<dt>趣味</dt>
<dd>Twitter徘徊</dd>
</dl>
特別な役割を持ったよく使う要素たち
見出しと箇条書きが決まったら、次に何か特別や役割や構造をもったコンテンツがないかどうかを探します。
Webページの中にはよく見ると結構いろんな情報が詰まってて、構造や用途が決まってるHTML要素を使って意味合いを明確化したり、機能をもたせたりすることができます。ただ、そのためにはHTMLの要素にどんなものがあるのか把握している必要があるため、ある程度HTMLの語彙を増やす努力は必要になるかと思います。Progateの学習だけではこの部分がかなり弱いので、一度サラッとで良いのでHTMLのタグリファレンスなどを流し読みしてみると良いと思います。
とはいえ一般的な商業用Webサイトのマークアップで絶対必要となりそうな要素に限ればさほど数は多くないので、まずは次の要素を覚えて、当てはまりそうなコンテンツを見かけたら割り当てていくようにすると良いかと思います。(※詳細は各自調べて下さい)
【商用webサイトでよく使われる要素】
●表組み(table要素)
複数列・複数行のセルを格子状に配置してデータ表示をするための要素。表組み。
●図版(figure要素)
コンテンツから参照されるいわゆる「図版」を明示するための要素。図版のキャプションとして任意でfigcaption要素を配置できます。キャプション付きの写真や解説用のグラフ・図・ソースコード等が典型的な使用例です。
●連絡先情報(address要素)
コンテンツ中に配置される各種連絡先(住所・電話番号・メールアドレス・URL・SNSアカウント・地図座標など)の情報を表します。
●フォーム部品(form/input/select/textarea)
意味付けというよりこれは入力・送信機能を実現するためにどうしても必要。
段落要素(p)
さてここまでで「見出し」「箇条書き(ul/ol/dl)」「その他の特別な要素(tableとかfigureとかaddressとか)」の割当が決まったかと思います。そうすると残ったテキスト情報のほとんどはリード文や記事本文、リンクやその他の単発テキスト類といったものになるかと思います。そうしたらとりあえず残ったテキスト類は全部p要素にぶちこんでおきましょう。
p要素は「段落」と翻訳されるので、「リード文」「本文テキスト」といったいわゆる国語的な意味での「段落」に該当するところだけにしか適用できないようなイメージをもつ人がいるかもしれませんが、HTMLの場合は単純に「他と区別されたひとかたまりのテキストブロック」ということを示すだけなので、単発のリンクやテキストなど、とにかく他の要素で囲まれていないテキストの固まりがあったら全部pに入れてOKです。
ポイントは、この時点で何の要素にも囲まれていない生のテキスト情報を残さないことです。また、画像であってもその中にテキスト情報が含まれていて、既に他の要素で囲まれていないのであればそれもp要素に入れておきましょう。
前半戦終了
ここまでの作業で、ページ内のほぼ全てのコンテンツが何らかの要素におさまり、HTML文書としての役割を踏まえたほんとにほんとの最低限のセマンティックなマークアップが完了します。ここまでは、業務でHTMLを触る人全員にたどり着いて欲しいレベル(個人的希望)です。
内容的にはProgateで学んだ内容に少しプラスアルファされた程度になってるはずですので、そこに存在するコンテンツに対して、「これはどの要素を当てはめるのが適切かな?」と考え、迷ったら調べるという癖をつけていくと良いかと思います。
本当は細かいこと言い出したらもっと山程あるんでしょうが、正直最初から「仕様書よめ」とか「MDNよめ」とか言われても情報過多で頭に入らないし、正解がない世界なので迷いだしたらきりがないので、最初は「不適切でなければOK(60点)」くらいを確実にクリアできるようにすることを目指して、そこから徐々に深めていけばいいと個人的には思います。
最後にちょっと力試し
前回の記事と、ここまでの解説をもとに、以下の文書のマークアップを考えてみてください。次回後半戦では、ここから更に文書全体の情報ブロック構造と、コンテンツ内容に対する細部のマークアップの考え方を解説しようと思いますので、お楽しみに〜♪
うちのにゃんこ
うちのにゃんこさんたちのかわいい日常をちらっと紹介しちゃいます♪
・ごあいさつ
・にゃんこ紹介
・飼い主紹介
ごあいさつ
こんにちは!見てくれてありがとうございます。
うちのかわいいにゃんこさんたちを紹介するのでほっこりしてください♪
にゃんこ紹介
●小町
性別:♀
年齢:7歳
毛色:黒
パパママ以外には基本誰にも懐かない超ビビリな性格な女の子。持病の猫喘息の影響でよくそこらじゅうで吐くのでひそかに「ゲロ町」とか言われたりもするけど、おめめくりくり、毛皮つやつやのかわいい奴です。
[小町の写真 キャプション:典型的箱入り娘の小町さん]
●小夏
性別:♀
年齢:6歳
毛色:白
短毛種なのになぜかフッカフカでモッフモフな毛皮を持ち、大型種でもないのに体重6kgオーバーの存在感ありまくりわがままボディな女の子。常にニャーニャースリスリゴロゴロしてかまって攻撃激しい甘えん坊さんです。
[小夏の写真 キャプション:子守もおまかせ小夏さん]
飼い主紹介
ハンドル名:にゃんこ@マークアップの人
職業:日々マークアップしたりCSS書いたりする人
趣味:Twitter徘徊
©Copyright xxxxxxxxx All Rights Reserved.
宣伝タイム♪
今回の文書(と大体同じ)のマークアップ参考解答とか、そこからのCSSでのレイアウト調整とか、より本格的な文書のマークアップ&CSSレイアウトとか、面倒だからまとめてガッと勉強したい方はこちらもどうぞ〜。
よろしければサポートお願いします!いただいたサポートは大切に使わせていただきます♪