2月の半分過ぎて行ってますが、体調はいかがでしょうか？

まだまだ寒さが続いていますが、風邪ひいたりとかはしていませんか？

今月は冬季オリンピックがあと数日で終わりを迎えるころ、日本選手がすごく活躍していますね。

メダル獲得もほとんど「銅」メダル！

金メダルが1個増えて4個目！

欧州国がホンマに強いんですね！

さてと、話を取り戻して…

main article sectionの使い方

大手企業のWebサイトはほとんど、<div>のタグを囲んでるところがみられますね。

でも、下層ページにはどうなってるかいろいろググったら、たまには<article>、<section>のタグを使って囲んでるところも見かけます。

しかし、中堅企業のタグはどうなってるか、検索をしたところ、まったく使われていないところが多く見られますね。

零細企業はホンマに、凄いタグの使い方！

<main>、<article>、<section>などのタグの使い方をしているんですね。

いろんなWebページのコーディングを見てみると一つの囲い方の意味合いがあるんですね。

こっちは、HTML5の時代が突入したときは、タグの使い方がいろいろあって、どこに入れ子を使ったらいいのか悩んだ時期がありました。

例えば、
（あるペットショップの一部抜粋です。部分改変してます。）

<div class="sub_content">
	<h2 class="sub_title">見出しタイトル</h2>

	<div class="text_area">
		<div class="picture">
			<img src="./img/photo01" alt="サンプルイメージ（猫の写真）" width="auto" />
		</div>

		<p class="text">これは猫の写真です。猫の写真についてのテキストです。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
	</div>
</div>

このようなコーディングをHTML Living Standardのようなコーディングをすると…

<article class="sub_content">
	<h1 class="sub_title">見出しタイトル</h1>

	<section class="text_area">
		<figure class="picture">
			<img src="./img/photo01" alt="サンプルイメージ（猫の写真）" width="auto" />
		</figure>

		<p class="text">これは猫の写真です。猫の写真についてのテキストです。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。サンプルテキスト。</p>
	</section>
</article>

というような感じになります。

1つのWebページに<h1>のタグが複数使えるようになります。

・article … 独立したコンテンツを持つときに使われるタグ

・section … ページの中に論理的なコンテンツ（章・節）に区切りたいときに使う。

ただ、逆にsectionの中に、articleを使うこともありますが、記事の中の独立性を持つコンテンツの意味が必要になります。

SEO的にも一番いいらしいです。

こちらもまだ未検証ですが…

もし、このようなタグの使い方で効果発揮できたら、調べたいものが検索上位にヒットしますね。

でも、articleの中に見出しタイトル（h1 ～ h6）が必ず必要になります。

1ページの中に、articleが複数の囲いがあれば、記事の独立が成立しますね。

いろいろ、悩み種とかありますが、経験を積み重ねて、使い方の意味が分かればの話です。

たまに、1ページの中にarticleが1つだけのところもありますが、次から別の記事が追加する可能性があるかもしれませんね。

ページの中の文章構造を考えながら、タグの使い方を工夫をしとかないとだめですね。

Webサイトの中身のコーディングを見ていろんな使い方の意味合いを考えることも大事なんですね。

では、また！