無性にHTML5のアウトライン構造が正しいのか不安になる時があるので、備忘録としてまとめました

# WEB制作

2020.01.25

夜布団をかぶった後、

  • あれ、呼吸ってどうするんだっけ?
  • 舌の位置ってどこに置いていたっけ?
  • 目をつぶっても瞼の裏をみているだけじゃないか……

と不安に陥るときがありますよね。

いままで当たり前にできていたことを改めて考えてしまい、いつも通りにできていないように感じることが。

わたしはソースを書きつつ、そんな不安に駆られることが時々。

「あれ、よく考えると、ボディって体なのに、どうしてヘッダー=頭を入れるのか?」

先日コーディングをしつつ、そんなことを考え、思考がぐるぐると止まらなくなりました。

結果、いろいろなウェブ制作会社のソースを見ることで間違えていなかったという確証を持つことができ、先に進めたのですが、今後またこうならない可能性はないので、HTML5のアウトラインをまとめることにしました。

HTML5のアウトライン構造は?

HTML5のアウトラインを本に例えてみた

正しいアウトライン構造を調べていると、非常にわかりやすい解説がありました。

1部追記したうえで、引用させていただきます。

タグ 内容 本に例えると
body ボディ
header ヘッダー 表紙
footer フッター 背表紙
nav ナビゲーション 目次
main 主たるコンテンツ 表紙、背表紙、目次を除いたもの
section コンテンツのまとまり 章や節
article 独立できるsection 別冊付録にできる章や節
aside 補足コンテンツ 本の最後や欄外の注釈文など
h1~h6 見出し 見出し

html5のアウトライン – Qiita

ソースで構造化してみた

とこんな具合。

個人的に本によく触れるので、本を使用したたとえはよくわかりました。

コーディングをしていて、不意に不安になった時の備忘録として記述させていただきました。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~