多人数でマークアップを行う案件の場合、htmlのチェックの方法が大事になってきます。
書面や口頭では個人差が出るため、ルール化いたしました。
# 「コーディングWaveチェックガイドライン」
・Wave.1 コーディング時のチェック(各コーダー)
・Wave.2 バリデーション文法チェック(各コーダー、またはメインコーダー)
・Wave.3 ブラウザ・実機検証(ディレクター&コーダー)
Wave.1 コーディング時のチェック(各コーダー)
【チェック】 インデントを揃える(スペース×4)
vscodeの機能でインデントを揃える
VisualStudioCodeに自動整形機能があった
https://qiita.com/maron8676/items/017cd830ab0c5fb8bcac
【チェック】 HTMLのタグの記述ミス
タグの閉じ忘れや、入れ子の間違いが無いかチェックする
【チェック】 正しいアウトラインがとれているか見出しの文法チェックを行う
見出しタグを使用すると自動で生成される文章の階層構造のアウトラインが正しいかチェックする
Wave.2 バリデーション文法チェック(メインコーダー)
gitのmasterにmergeする前に、バリデーションの文法チェックを行う。
・画像のaltが入っているか
・使用禁止文字を使ってないか
【チェック】 gulpでバリデーションチェックする
JavaScript、HTML、CSSを簡単にLintできる開発環境を作った
https://qiita.com/muraken720/items/468b9f420ab4c900e241【gulp】「gulp-htmlhint」でHTMLの文法をチェックする方法をメモメモ
http://bashalog.c-brains.jp/15/10/08-121056.php[GitHub 奮闘記] gulp で eslint 設定とコード チェック環境の共有
https://qiita.com/ynunokawa/items/5471ff84c83104450ecb
Wave.3 ブラウザ・実機検証(ディレクター&コーダー)
【チェック】 実際に確認する
IE11
IE Edge(最新バージョン)
FireFox(最新バージョン)
Google Chrome(最新バージョン)
Mac Safari(最新バージョン)
iPhone(Safari最新バージョン)
iPad(Safari最新バージョン)
Android(Chrome最新バージョン)
関連
HTML5のアウトラインを極めるための6つのルール
タイトルや見出しの確認など、SEOに便利なブックマークレット
DOEの強み > 凄まじい納品チェック