わすれた.log

忘れては検索して、そしてまた忘れるその過ちを繰り返さない為に…

なんかおかしいマークアップ

他の人にわかりやすいとかの目的の場合の書き方について。
タグの意味合いを意識した書き方。

例1:ヘッダーのタイトルとロゴについて

×ダメな例

<header>
	<div class=“logo”>
		<img src=“logo.png”>
	</div>
	<h1>
		Sitetile
	</h1>
</header>

h1 と.classが別物という扱いになってしまう。

○良い例1

<header>
	<div class=“sitelogo”>
		<div class=“logo”>
			<img src=“logo.png”>
		</div>
		<h1>
			Sitetile
		</h1>
	</div>
</header>

.sitelogoでグルーピングしたら同じものという扱いになる

○良い例2

<header>
	<div class=“sitelogo”>
		<h1 class=“logo”>
		<img src=“logo.png”>
			Sitetile
		</h1>
	</div>
</header>

h1に入れて同じボックスに入れても良い。

例2:記事のmoreボタン

×ダメな例

<div class=“content-box”>
	<div class=“text”>
		tex text
	</div>
	<div class=“text-more”>
		TEXTETXT
	</div>
</div>
<p class=“btn-more”>More</p>

記事のグループ.content-boxから.btn-moreがはみ出ている。
マークアップ的に.content-boxと.btn-moreは関係性のないものということになってしまう。

○良い例

<div class=“content-box”>
	<div class=“text”>
		tex text
	</div>
	<div class=“text-more”>
		TEXTETXT
	</div>
	<p class=“btn-more”>More</p>
</div>

.content-boxに入れて同じグループにする。

例3:h1,h2,h3...に直接スタイルを当てない

×ダメな例

<h1>Title</h1>
h1{
	color: red;
}

理由は忘れたがそうらしい。

○良い例

<h1 class=“sitetitle”>Title</h1>
.sitetitle{
	color: red;
}