Web制作の世界へようこそ！HTMLを書き始めたばかりの頃って、「結局どのタグを使えばいいの？」「`

`だけで良くない？」なんて悩みますよね。

実は、Webページを組み立てることは、「本を書くこと」や「整理整頓されたクローゼットを作ること」にとても似ているんです。今日は、ブラウザやスクリーンリーダー（視覚障がい者のための読み上げソフト）が、あなたの書いたHTMLをどう読み解いているのか、その「頭の中」を覗いてみましょう。

—

想像してみてください。あなたは今、巨大な本屋さんにいます。もし、すべての本にタイトルが書かれておらず、中身も章立てがめちゃくちゃだったら、お目当ての情報にたどり着くのは不可能ですよね。

Webページも同じです。ブラウザは、私たちが書いたHTMLタグを見て、「ここは見出しで、ここはその詳細だよ」「ここは全体のまとめだよ」という「目次（アウトライン）」を脳内で自動生成しています。

この構造がしっかりしていると、Googleの検索エンジンも「あ、この記事はこういうことが書いてあるんだな」と正しく理解してくれますし、何よりユーザーにとって「今、自分がどこを読んでいるのか」が分かりやすい親切なページになるんです。

—

HTML5から導入された「セクション要素」は、いわば「情報の仕切り板」です。それぞれの役割を、身近な例えで見ていきましょう。

これらを適材適所で使うだけで、ブラウザは「ああ、ここは大事な場所なんだな」と優先順位をつけて読み込んでくれるようになります。

—

では、これらを組み合わせて、一つのページを作ってみましょう。難しく考えすぎず、「大きな箱の中に小さな箱を入れる」イメージで書いてみてくださいね。

おいしいコーヒーの淹れ方ブログ

コーヒーの魅力

コーヒーは世界中で愛されている飲み物です…

まずは豆を挽いてみましょう…

—

初めてのうちは、「`section`と`article`、どっちを使うべきかな？」と迷うこともあると思います。でも、大丈夫。あまり難しく考えすぎなくていいんです！

今のHTMLのルールでは、「見出し（h1〜h6タグ）を使って、正しく階層を作ること」が一番大切です。
`h1`の下に`h2`があり、その中に`h3`がある。この親子関係さえ守られていれば、ブラウザは十分に「お、きれいな目次ができているな」と理解してくれます。

「見た目を整えるためだけに、セクション要素を使うのは避けましょう」。
あくまで「情報の意味づけ」のためにタグを使うのが、プロへの第一歩です。見た目の調整は、CSSの仕事ですからね。

—

HTMLのアウトラインを意識することは、「未来の自分」や「ページを訪れる誰か」に対する、ちょっとした思いやりです。「ここが一番大事だよ」「ここは補足情報だよ」と、タグを通じて優しく教えてあげる感覚ですね。

完璧を目指して最初から複雑にする必要はありません。まずは、`

`、`