見出しタグとセクションタグの重要性

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

メンバー紹介ページ:https://guardian.jpn.com/member/tomoya_matsuki/




*COMMENT*

  • 下川 春樹

    下川 春樹

    更新日:2024-04-30 18:19

    *コメント*

    お疲れ様です。
    ここの構造のところ難しいですよね。
    いまだに完全に理解しきれていません。。。
    まだまだここまで考えてパーツを作れていないので、頑張って理解していきますー٩( 'ω' )و

    *コメント*

  • 中澤 めぐみ

    中澤 めぐみ

    更新日:2024-04-30 18:44

    *コメント*

    セマンティックウェブ方式、ガーディアンへ来て初めて存在を知りました。
    単に表示をきちんとするだけでなく、SEOにまで気を配って書く必要があるとは、奥が深いなぁと思います・・・。
    説明がとってもわかりやすいです!😊

    *コメント*

  • 石川 航

    石川 航

    更新日:2024-04-30 19:35

    *コメント*

    お疲れ様です
    HTMLの見出しタグは、本で言えば表示や章、段落などにあたる部分です
    図書館で本を探す場面をイメージすると分かりやすいです
    本の表示を見て開いてみたら、中の文章と全然違うという状態だと困りますよね?

    セクションと見出しを適切に使って、人にも検索エンジンにも見やすいサイトを目指していきましょう

    *コメント*

  • 菅谷 たかの

    菅谷 たかの

    更新日:2024-04-30 21:02

    *コメント*

    どのタグが相応しいかを瞬時に判断して構築するのって大変ですよね💦私自身課題をやりながら、どのタグがいいんだろうといつも頭を悩ませています(笑)お互い頑張りましょう!!

    *コメント*

  • 赤塚 亮太

    赤塚 亮太

    更新日:2024-04-30 21:18

    *コメント*

    CSSはとても数が多くて新たなものを学ぶのは楽しいですよね!
    ※見た目の変化を見ながら構築する自分も好きでした

    どんどん調べて学んでいきましょう!

    *コメント*

  • 野村 健人

    野村 健人

    更新日:2024-05-01 07:58

    *コメント*

    どこで<section>タグを使い、どのようにして<div>タグと使い分けるのかは、HTMLを学び始めた人の多くが躓くポイントかと思います。
    今のうちに徹底的に調べて理解をしておくと今後の構築で迷わずに済むと思います。大変かと思いますが頑張りましょー!

    *コメント*

  • 恩田 かおり

    恩田 かおり

    更新日:2024-05-01 08:10

    *コメント*

    松木さん、セマンティックHTMLの見出しとセクションについて、分かりやすく解説していただきありがとうございます!

    日記を読んで、私もセマンティックHTMLの重要性を改めて実感しました。
    特に、見出しとセクションの相互関係を例を用いて説明されている点が、とても理解しやすかったです。

    私も今後は、この日記で学んだことを参考に、セマンティックHTMLを意識したWebページ制作を心掛けていきたいと思います。

    *コメント*

  • 福田 純大

    福田 純大

    更新日:2024-05-01 08:13

    *コメント*

    見出しやセクションの重要性がよくわかりました。普段の学習ではどうしてこれらが重要であるかあまり考えてこなかったので、なぜ重要であるかまで考えることが大切だと改めて気づかされました。

    *コメント*

  • 水落 えり

    水落 えり

    更新日:2024-05-01 08:17

    *コメント*

    智哉くん、本日はセマンティックHTMLについての学習内容をとてもわかりやすくまとめられていますね!

    HTMLマークアップの意味や目的を理解し、適切に使い分けることができれば、ユーザーにとってもGoogleボットにとっても理解しやすいWebサイトを作るということですね!!

    HTMLはどうも難しいという先入観からなかなか頭に入ってこないのですが、智哉くんのアウトプットはとても分かりやすく読みやすいです✨
    次回も楽しみにしています!!

    *コメント*

  • 北原 ゆきの

    北原 ゆきの

    更新日:2024-05-01 09:31

    *コメント*

    最初は言われるままにコードを書いていたのが、少し余裕が出てきて、一つ一つの意味を調べるととても納得できた記憶があります。

    本当は最初から、意味をしりながら覚えられるのがベストかな、と思いますので(人によっていろいろだとは思いますが)、
    丁寧にご説明頂きありがとうございます!

    課題にまだ手をつけられていないので思い出しつつがんばります。

    *コメント*

  • 岡田 のりこ

    岡田 のりこ

    更新日:2024-05-01 09:32

    *コメント*

    とてもわかりやすい解説をありがとうございます!
    まだまだ自分自身の理解が追いついていないので
    見た目だけ良ければ良し、ではなく、
    適切なタグを用いて構築できるよう
    学び、実践できるよう頑張ります!

    *コメント*

  • 渡邊 ひろみ

    渡邊 ひろみ

    更新日:2024-05-01 09:42

    *コメント*

    セマンティックの重要性、見出し・セクションタグについて判りやすく解説いただきありがとうございます。
    正しいタグを使う事で、見やすく、SEO対策にもなるという事ですね。意識してweb制作をしていこうと思います。

    *コメント*

*コメント*

*ログイン*

メールアドレス
パスワード