HTMLについての基本的な考え方などをおさらいすること Hypertext Markup Languageの略称。ここでいうMarkupは「目印付け」を意味しており、デザインをするためのマークアップとは別物。 あくまでもHTMLはwebページ上の文章の構成要素の役割を記述する、いわばページの骨格を形成するもの。なので、ブラウザで見たときに、この見出しが h1 だと大きくて嫌だから h3 にしよう、だとか、ここに隙間が欲しいから br を入れよう、ここに線を入れたいから hr を入れようみたいなことはしてはいけません。 人間はHTMLが変換された結果を読み、HTMLはコンピュータが読み込む。そのため、様々な環境の差異(フォントとか)を吸収するためにHTMLという世界的に統一された規格に基づく言語による記述が必要。 公式ページはこちら↓2WHATWG(Web Hypertext Application Technology Working Group)が定めています(少し前までW3Cと規格がごちゃごちゃだったものがWHATWGに統一された) こちらは発見したHTML要素のチートシート。このようなものを無料で公開いただいている方がいることに頭があがりません。。。 参考: 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皿分 )
調味料
作り方
ポイント
このレシピの生い立ち
コメント
ただ、コードとしては見にくいです。以下のように、アウトラインの階層に合わせてhタグの数字(レベル)をふると、その数字を見ただけで階層がすぐにわかり、コードとして読みやすくなります。 アウトラインの階層に合わせると、以下の様になります。 dl は説明リストを表すタグなのですが、dl の中にある dt dd が一つ一つの項目なります。今回のようなマークアップだと、dl が一つの項目ごとに区切られてしまっているので、リストにならなくなってしまいます。また、dl には、dt (説明をするもの)、dd(説明)がセットである必要があります。dl のよく使われるシチュエーションとして、商品説明やブログ記事などのmetaデータに使います。
例えば小説の通販サイトでは、こういうのをよく書きます。 上記ご指摘頂いたため、olリストに修正しました(20220305) 文章のアウトラインを表す主な要素 < HTML | HTML+CSSまとめページ https://developer.mozilla.org/ja/docs/Web/HTML/Element/dl 今回はここまでになります!
お付き合いいただきありがとうございました!
目的
前提
HTMLとは?
HTMLで記述するにあたっての心得
アウトラインとは
カレーのレシピ
レシピの作者
材料 ( 8皿分 )
調味料
作り方
ポイント
このレシピの生い立ち
コメント
カレーのレシピ
レシピの作者
材料 ( 8皿分 )
調味料
作り方
ポイント
このレシピの生い立ち
コメント
実際に書いてみた
修正
参考