模写コーディングをやっている最中、新しい学びがあったので。
特に一番最初の学習をprogateでやった人は陥りがちなポイントかも知れないのでぜひ読んでいだたければ。
そもそもSEOとは？
検索エンジン最適化、なんて言葉で言うそうですが、
簡単に言えば｢いかにGoogle先生に見つけてもらいやすくするか｣です。
どんなに良いデザインのサービスもサイトも、見つけてもらえないと意味がない。
一人でも多くのユーザーにサイトを訪れてもらうため、こういった工夫がなされているわけです。
タグ分けしたほうが良いものとその例
適切なHTMLタグを使用することで、検索エンジンがコンテンツを理解しやすくなります。以下はSEOに役立つタグとその例です。
<section>タグ
Webページの内容を論理的に区分するためのタグ。
大まかな章分けをする際に使用する。
<section>
<h2>サービス概要</h2>
<p>私たちのサービスは…</p>
</section>
<dl>,<dt>,<dd>タグ
定義リストを表すタグ。
用語や説明をわかりやすく整理できるのでFAQや製品仕様などに役立つ。
<dl>
<dt>Web開発</dt>
<dd>Webサイトやアプリケーションを作成するプロセス。</dd>
</dl>
<article>タグ
独立したコンテンツを示すタグ。
ブログ記事やニュース記事の個別のページに設定するのに適している。
<article>
<h2>最新のテクノロジー</h2>
<p>最近の技術進歩について…</p>
</article>
<div>タグを使ったほうが良いケース
<div>タグは特別な意味を持たないため、単純にコンテンツをまとめるために使います。
単に複数の要素をグループ化してCSSでデザインを調整する際に便利です。
使用例
<div class="container">
<div class="row">
<div class="column">内容1</div>
<div class="column">内容2</div>
</div>
</div>
ポイント: 他のタグ（<section>や<article>など）は特定の意味を持ち、検索エンジンが内容を理解しやすくします。一方、<div>タグは意味を持たないため、デザインを整えるときや要素を単にグループ化するときに使うのが適しています。
まとめ
progateで僕は最初HTMLやCSSのインプットをしたわけですが、基本的に全部divタグで書く事が多かったのでその存在すら知りませんでした。
実際すべて<div>タグで書いても同じ見た目のものはできるのでしょうが、得られる訪問者などには差が生じるのでしょう。
模写コーディングはもちろん、実務でも当然使う機会が多いと思われるので少しでも役に立てば。