マークアップルール

本コンテンツは、ある程度コーディング知識のある（実務経験のある）マークアップエンジニアをターゲットとしていますので、基本的なマークアップのルール・知識についての解説は割愛します。
また、実際にマークアップについては決めているルールは特にありません。
ですので、マークアップルールについては特に解説することはない・・・と言いたいところですが、それでも公開されているWebサイトのソースコードを見ると、気になる（マークアップが正しくない・好ましくない）ソースコードが多々出てきます。
これらをいくつか紹介します。

div要素の入れ子が多すぎる

次のソースコードは、ある公開されているWebサイトのソースコードの一部を抜粋したものです。

<div class="js-fade fadeInUp">
	<div class="bg-lightgrey link-main-contents">
		<div class="box-card-01 wrp-container">
			<div class="grid-row">
				<div class="grid-col--6 js-fade fadeInUp">
					<a href="xxx class="box-card-01__inner js-mh-item">
						<span class="box-card-01__content">
							<span class="box-card-01__content__detail">
								<span class="box-card-01__title">タイトル</span>
								<span class="box-card-01__text">テキスト</span>
							</span>
						</span>
						<span class="btn btn--link btn--white"><span>リンク</span></span>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>

div要素の入れ子が5つもあります。
このWebサイトはある企業のコーポレートサイトですが、経験上、コーポレートサイトでdiv要素が5つも入れ子になることはまずあり得ないでしょう。
div要素の入れ子が多く、さらにそれぞれインデントを付けてしまうと、美しくもありません。
マークアップを見直す必要があります。

h1〜h6要素のマークアップ

次のソースコードも、ある公開されているWebサイトのソースコードの一部を抜粋したものです。

<div class="text">
	<p class="category">カテゴリテキスト</p>
	<h3 class="title">タイトル</h3>
	<p class="period">日程テキスト</p>
</div>

上のソースコードを見て、どこが正しくないマークアップなのかわかるでしょうか。

h1〜h6要素の直前にp要素が来るということは、マークアップ上、正しくありません。
マークアップで最も見かけるケースかもしれません。
h1〜h6要素は、ヘッディング・コンテンツと呼ばれ、section要素もしくはarticle要素の内部の最初に必ず配置されます。

h1〜h6要素を配置すると、そこからセクションが始まる。
h1〜h6要素が存在しないセクションはない。
セクションの内部の最初には必ずh1〜h6要素で始まる。

基本的な知識だと思いますが、意外と守れていない最も多いマークアップです。
ただし、次のようなマークアップは問題ありません。

<section>
<div>
<h2>タイトル</h2>
<p>テキスト</p>
</div>
</section>

section要素の内部の最初にdiv要素が配置されているケースです。
レイアウトや装飾に必要なためによくこのように配置されますが、div要素は特に意味を持たない要素ですので、問題ありません。

以上が、気になったコードです。
細かいところではまだまだ出てきますが、それらは基本的にクリアされている・・・という前提で本コンテンツは進めます。
ただ、今後気になったコードが出てきましたら、更新したいと思います。