はじめに
コーダー歴2年目で、HTML・CSS実装について現状固まっている指針を明文化しようとしたものです。
記事の対象 読者の対象レベル
・HTMLが多少かけるようになった
・HTML5、セマンティックHTML手を出している、興味がある
・現場に配属された新人Cod
・監修する立場にある人（Dir）
HTML
例
<body>
<header>
</header>
<main>
<!-- <h1>はメイン内に配置 -->
<h1></h1>
<!-- <section>を使う場合 -->
<section>
<h2></h2>
</section>
<section>
<h2></h2>
<section>
<h3></h3>
</section>
</section>
<!-- 使わない場合 -->
<div class="sect">
<h2></h2>
<div class="subsect">
<h3></h3>
</div>
</div>
</main>
<footer>
</footer>
</body>
業務で実装する場合、新規作成か更新かで多少方針が変わる。
新規で作るのであれば、<section>タグと<h1>~<h6>タグでセクションを作る。
更新（一部新規要素の追加）の場合、そのページのHTMLの雰囲気に合わせた実装をする。
(当然だが、<ul>、<ol>、<li>、<dl>、<dt>、<dd>を必要に応じて適切に使用する。)
ポイント
・HTML5の要素によるセマンティックな実装
・妥協
HTML5の要素によるセマンティックな実装
・<h1>はメイン内に配置
チームの実装方針にもよるだろうが、基本的に<h1>は<main>内の最初のほうで、そのページの実質的なタイトルに当たる文章を指定する。
（ヘッダーのロゴに<h1>を指定するのは、アウトラインで考えたときに違和感がある。）
・<section>を使える場合は、<section>で区切って実装する
・<section>を使わない場合は、
<section>に当たる<div>にsectionのようなニュアンスのクラスを指定する。
構造的・視覚的に理解しやすくする。
HTMLはHTMLだけで成立するように記述すべきであるため、<section>の範囲はデザイン（見た目）と乖離する場合がある。
妥協
元の造りから乖離しないように実装する。
・いつでも改修できるわけでもない。
・結局納期に間に合わせるのが大事。
・直せと言われた場所以外を修正すると、その分確認事項が増える。
加えて、以下のような状況で、自分だけがセマンティックHTMLに改修しようとしても意味が薄い。
・厳密なコーディングルールがなく、コーダーがそれぞれの解釈で制作している。
（製作チーム内にセマンティックHTMLが定着していない）
・クライアントがアクセシビリティやSEOに力を入れていない。
・コードをレビュー（口出し）できる、レベルの高い人間がいない。
CSS
命名法則
個人的に採用している命名法則はPDFLOCSS（FLOCSSの派生型）
参考：明日から使えるCSS設計【PDFLOCSS】
https://zenn.dev/wagashi_osushi/books/94efd21a66ccaa
メリット
・SCSSで実装しやすい。（階層が深くならない）
・詳細度を気にしなくていい。（基本的にセレクタがクラスを1つ指定するだけ）
・命名基準がわかりやすい。
デメリット
・複数人で作業する場合は、共通認識が持てていないとただの難解な命名になる。
・クラス名が長くなりがちで、コードが横に長くなる。
・現場で採用されている可能性は低い。
セレクタ
・HTMLの要素は基本的にすべてクラスをつける。
・基本的にクラス名で指定する。
・要素名で指定しない。
・スコープをしっかり意識して実装する。←何よりも大切
終わりに
今の案件でDirチェックがaltやデザインの確認がメインで、コーディングチェックは行わない（＝それができるほどHTMLなどを理解していない）ため、コーディング面ではコーダーの私に裁量・責任があるためです。
（というより歴の長いCodがいない）
この記事の対象にDirを含めたのは、そういう理由です。
まだ明文化できていない項目がありますが、自分の中で明確に基準ができたら別の記事で書こうと思います。