date_range
2026/03/30
見出しタグとセクションタグの重要性
date_range
2024/04/30
日々の活動日記エンジニアインターン
こんにちは！！
京都開発研究所、Webプログラマーコースの長期インターン生、松木智哉です！！
本日は、セマンティックhtmlについて調べ、学習をしました。
そこで、重要である見出し(<h1>,...,<h6>)とセクション(<section)について書いていきます！！
・セマンティックの重要性
まずセマンティックとは、Webページの構造を意味ある方法で構築することを言います。すなわち適切なタグを用いて構築していくことです。
このようなことがなぜ重要なのでしょうか？？ それは、アクセシビリティの向上、SEO対策、メンテナンスの容易さ、異なるデバイス、ブラウザ間で一貫した表示を実現させるためです。 ・見出しとセクション 見出し 見出しタグはコンテンツの階層と重要性を示します。例えば、<h1>はページの主題を示し、それに続く見出し(<h2>、<h3>、…)とサブトピックや関連する情報を整理するために使います！！ 見出しは、基本的にそのページ内容の要約となっているので、そのページを訪れた人が、ページの内容を理解し、興味のある項目を素早く見つけることを手助けしています！ セクション セクションタグは、関連するコンテンツをグループ化します！そうすることで、それぞれのセクションに明確な意味を持たすことができます！！ 見出しとセクションの相互関係 見出しとセクションタグを両方使うことは、ページのコンテンツを論理的に、そして意味ある流れで構成するのに大事です！！ それにより、ページに訪れた人が直感的にそのページの内容を理解する手助けができます！！ 例えば、<section>タグは、そのセクションの内容を要約している見出しタグ(h2)で始まります！！そして、内容に応じて見出しタグをつけていきます！！ <section> <h2>ここにそのセクションの見出しを書く</h2> ・ ・ ・ </section> これら見出しタグとセクションタグを用いることで、検索エンジンに主要なトピックを明示するのに役立っていると言われています！！ これからも、ページの内容の理解しやすさを意識し、正しいタグを使っていきたいです！！ ----------------------------------------------- G!FIT公式Instagram：https://www.instagram.com/gfit_gdn/ G!FIT公式Twitter：https://twitter.com/gfit_gdn
＊コメント＊
NEW
-
-
date_range 2026/02/27
【長期インターン】卒業...
-
date_range 2026/02/27
【長期インターン】「作...
-
date_range 2026/02/24
【長期インターン】イン...
-
date_range 2026/02/24
【インターン生春休み活...
＊COMMENT＊
下川 春樹
＊コメント＊
ここの構造のところ難しいですよね。
いまだに完全に理解しきれていません。。。
まだまだここまで考えてパーツを作れていないので、頑張って理解していきますー٩( 'ω' )و
＊コメント＊
石川 航
＊コメント＊
HTMLの見出しタグは、本で言えば表示や章、段落などにあたる部分です
図書館で本を探す場面をイメージすると分かりやすいです
本の表示を見て開いてみたら、中の文章と全然違うという状態だと困りますよね？
セクションと見出しを適切に使って、人にも検索エンジンにも見やすいサイトを目指していきましょう
＊コメント＊
恩田 かおり
＊コメント＊
日記を読んで、私もセマンティックHTMLの重要性を改めて実感しました。
特に、見出しとセクションの相互関係を例を用いて説明されている点が、とても理解しやすかったです。
私も今後は、この日記で学んだことを参考に、セマンティックHTMLを意識したWebページ制作を心掛けていきたいと思います。
＊コメント＊