Tech Hotoke Blog

IT観音とは私のことです。

【HTML】再入門

f:id:TechHotoke:20220304174154p:plain

目的

HTMLについての基本的な考え方などをおさらいすること

前提

  • HTMLを用いたコーディング経験が既にあること
  • 詳細な説明(タグなど)については行わない

HTMLとは?

  • Hypertext Markup Languageの略称。ここでいうMarkupは「目印付け」を意味しており、デザインをするためのマークアップとは別物。

  • あくまでもHTMLはwebページ上の文章の構成要素の役割を記述する、いわばページの骨格を形成するもの。なので、ブラウザで見たときに、この見出しが h1 だと大きくて嫌だから h3 にしよう、だとか、ここに隙間が欲しいから br を入れよう、ここに線を入れたいから hr を入れようみたいなことはしてはいけません。

  • 人間はHTMLが変換された結果を読み、HTMLはコンピュータが読み込む。そのため、様々な環境の差異(フォントとか)を吸収するためにHTMLという世界的に統一された規格に基づく言語による記述が必要。

公式ページはこちら↓2WHATWG(Web Hypertext Application Technology Working Group)が定めています(少し前までW3Cと規格がごちゃごちゃだったものがWHATWGに統一された)

html.spec.whatwg.org

こちらは発見したHTML要素のチートシート。このようなものを無料で公開いただいている方がいることに頭があがりません。。。

htmlls.docs-share.com

HTMLで記述するにあたっての心得

  • 人間が理解しやすい文章構成になっていること
    • 論理構造が明確
    • 適切なハイライト
    • 主題を表すタイトル
    • 作者・更新情報
  • それぞれのタグは意味を持っているため、適切なメタデータ(headタグの情報など)やh1、dfnタグなどを用いることで索引や目次の自動生成などの処理を実現できるため、曖昧なタグの仕様や情報の過不足には注意を払う必要がある
  • 要素を選ぶときはセマンティクス(コードの断片の意味を指します。たとえば、「JavaScript でその行を実行すると、どのような効果があるのか?」、「その HTML 要素には、どのような目的や役割があるのか?」 (「どのように見えるのか?」ではなく)。)を基準にする。見た目はCSSで調整すること。

参考:

Dublin Core(ダブリン・コア): ウェブ資源メタデータの共通語彙

HTML は既定の表示スタイルに基づくのではなく、入力されるデータを表現するためにコーディングするべきです。プレゼンテーション (どのように見えるか) は、完全に CSS の責任です。

セマンティックなマークアップを書くことの利点の中には、次のようなものがあります。 検索エンジンが内容を重要なキーワードとして理解し、ページの検索ランキングを上げる (SEO を参照) 読み上げソフトが、目の不自由なユーザーがページを操作するのを補助するための標識として利用することができる 意味のあるコードのブロックを見つけることは、セマンティックまたは名前空間のついたクラスがあるにしろないにしろ、延々と div の中を検索するより明らかに簡単である 開発者に目立たせるデータの種類を提案することができる セマンティックな名前は、正しいカスタム要素やコンポーネントの名前を反映する どのマークアップを使用するか迷ったときは、自分自身に「どの要素が掲載しようとしているデータを最もよく説明または表現しているか」と自問してみてください。例えば、これはデータのリストか?順序付きか順序なしか?これは節と関連情報の補足から成る記事か?定義の一覧になっているか?キャプションを必要としている図または画像か?サイト内でグローバルのヘッダーおよびフッターに加えてヘッダーやフッターを持つべきか?などです。

引用:

Semantics (セマンティクス) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

アウトラインとは

  • アウトラインとは、 生物 哺乳類 猫 アメリカンショートヘアー うちで飼ってるタマ 犬 ブルドック うちで飼ってるイギー このように、情報の分類と階層になります。

階層に関しては、「の」を付けて矛盾をしない関係になるもの、と考えるとわかりやすいです。

生物の哺乳類 哺乳類の猫 猫のアメリカンショートヘアー 「の」を付けて矛盾が起きません。

もし、以下のようなアウトラインだった場合、

カレーのレシピ

レシピの作者 材料 ( 8皿分 ) 調味料 作り方 ポイント このレシピの生い立ち コメント レシピの作者の材料 ( 8皿分 )

レシピの作者の調味料

レシピの作者の作り方

レシピの作者のポイント

レシピの作者のこのレシピの生い立ち

レシピの作者のコメント

は、おかしいです。

材料は、レシピの作者の材料ではなく、カレーの材料になります。 なので、レシピの作者 と 材料 ( 8皿分 ) は親子関係を築けません。 ほかも同様です。

例えば、このようなアウトラインにすると、

カレーのレシピ レシピの作者 材料 ( 8皿分 ) 調味料 作り方 ポイント このレシピの生い立ち コメント 「の」を付けると、

カレーのレシピの(レシピの)作者 カレー(のレシピ)の材料 ( 8皿分 ) カレー(のレシピ)の調味料 (この)カレーのレシピ(による)作り方 カレーのレシピのポイント カレーのレシピの(このレシピの)生い立ち カレーのレシピのコメント と、矛盾が起きません。

厳密にはアウトラインの親子関係は、セクションに内包される情報を見て親子関係であるかを判断するのであって、一つの簡単なヒントを得るために、「の」の関係を見る、ことを提案しましたが、実際の見出しに使われている言葉が「の」の関係を正しい日本語の形で接続しないことが通常です。

なので、「の」関係に矛盾がないかを調べる際は上記のように、見出しの言葉をアレンジする必要がありますが、その点は本質ではなく、セクションに内包される情報を見て親子関係であるかを判断する、ということが重要です。

また、以下のようなアウトラインの設計をした方も結構います。

例)

カレーのレシピ レシピの作者 材料 ( 8皿分 ) 調味料 作り方 ポイント このレシピの生い立ち コメント 例)

カレーのレシピの(レシピの)作者 カレー(のレシピ)の材料 ( 8皿分 ) 材料 ( 8皿分 )の調味料 (この)カレーのレシピ(による)作り方 作り方のポイント カレーのレシピの(このレシピの)生い立ち カレーのレシピのコメント これも矛盾がないですね。 どれが正しいかは、文章を読んだ上で、その文章の情報から

どのような設計が読み手に対して理解しやすいか 作者はどのような意思を持ってこの文書を書いたか を考え、マークアップします。 つまり、明らかな間違いはありますが、人の解釈によって設計は異なってくるので、唯一の正解はない、ということになります。

これが、アウトラインになります。

アウトラインに合わせた h タグをふることも重要です。

以下のアウトラインだった場合、

カレーのレシピ レシピの作者 材料 ( 8皿分 ) 調味料 作り方 ポイント このレシピの生い立ち コメント section の入れ子構造でアウトラインを表現すれば、hタグは何にしてブラウザの解釈は変わりません。

全てをh1にしても、

カレーのレシピ

レシピの作者

材料 ( 8皿分 )

調味料

作り方

ポイント

このレシピの生い立ち

コメント

以下のように解釈されます。

カレーのレシピ レシピの作者 材料 ( 8皿分 ) 調味料 作り方 ポイント このレシピの生い立ち コメント ただ、コードとしては見にくいです。以下のように、アウトラインの階層に合わせてhタグの数字(レベル)をふると、その数字を見ただけで階層がすぐにわかり、コードとして読みやすくなります。

アウトラインの階層に合わせると、以下の様になります。

カレーのレシピ

レシピの作者

材料 ( 8皿分 )

調味料

作り方

ポイント

このレシピの生い立ち

コメント

ここで重要なのが、hタグのレベルとコンテンツの重要さは関係ないことです。これは大事ではないから、h5を使う、というのは間違いです。

実際に書いてみた

HTMLの練習(このレシピにマークアップをしてみましょう)

修正

dl は説明リストを表すタグなのですが、dl の中にある dt dd が一つ一つの項目なります。今回のようなマークアップだと、dl が一つの項目ごとに区切られてしまっているので、リストにならなくなってしまいます。また、dl には、dt (説明をするもの)、dd(説明)がセットである必要があります。dl のよく使われるシチュエーションとして、商品説明やブログ記事などのmetaデータに使います。 例えば小説の通販サイトでは、こういうのをよく書きます。

上記ご指摘頂いたため、olリストに修正しました(20220305)

参考

HTML5マークアップの心得と作法

文章のアウトラインを表す主な要素 < HTML | HTML+CSSまとめページ

https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl

今回はここまでになります! お付き合いいただきありがとうございました!