はじめに
ハッカソンでフロントエンドを担当する機会を頂きましたが、理解が乏しいため備忘録として記事に残し、少しでも整理していきたいと思います。
個人的な備忘録です。IT未経験のため間違っている点がありましたらご指摘いただけますと幸いです。
HTMLの書き方について
チームメンバーに相談したところ、HTMLの書き方は人によって違いがあるとのことでした。
調べてみたところ、書き方のスタイルにはセマンティックな書き方とdiv要素を使う書き方の大きく二つあるようです。いろいろなコードを見ていて、「なんで同じような内容なのに書き方が違うんだ？」という疑問が解消されました。
セマンティックな書き方
要素の名前が明示的な意味を表しているHTMLの書き方です。具体的には、<div>を使わず、<header>や<main>などの役割の定まっているタグを使用します。ブラウザ上では<div>を使って記載した場合と見え方は同じなので、あくまで明示的な表現をしているだけということになります。
以下の記事が参考になりました。
- セマンティックなタグの基本や利点について
https://webst8.com/code/html-semantics/ - HTMLタグの詳細な説明について
https://developer.mozilla.org/ja/docs/Web/HTML/Element
メリット
- 可読性が向上する
役割の決まったタグを使用するため、他の人が読んだ時に内容を理解しやすくなります。 - 保守性が向上する
長期的にみて、他の開発者がコードを理解しやすく、修正が容易になります。 - SEOに有利
検索エンジンはセマンティックなHTMLを利用してページ構造を理解するため、適切にタグを使うことで検索順位が向上する可能性があります。
注意点
- 学習コストが少し高い
相対的にというレベルだと思いますが、各タグの正しい使い方を調べるための時間的コストがかかります。
divを多用する書き方
タグ自体は、例えば<main>を使っても<div>を使ってもブラウザ上での見え方は変わらないため、<div>を多用してページを構築することもできます。
メリット
- シンプルで書きやすい
- 速く書ける
注意点
- 可読性が低下する
<div>の入れ子構造が深くなってくると理解しにくくなります。 - 保守性が低下する
まとめ
初学者としては、まずはセマンティックな書き方に挑戦してみようと思いました。ですが、<div>を使った書き方についてもコードをみて理解できるように学習していきたいと思います。