4.1.1 HTMLを正しく記述する
適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
どのブラウザから読まれても正常に動作するよう、HTMLを正しく記述する。HTMLが正しく記述されていないと、一部のブラウザで表示がおかしくなってしまう。スクリーンリーダーなどの支援技術でも正しく解釈できない。
HTMLを記述する時は、以下の点に注意する。
- 開始タグと終了タグを正しく記述する
- 入れ子にするタグの要素はHTML仕様通りに記述する
- 各要素に設定するID属性はページ内で重複していない
テスト・チェック方法
以下のツールを用いて、セルフやコードレビューなどでチェックする。
負担を減らすため、テキストエディタやCIと連携させてチェックを自動化することが望ましい。
- AtomLinter/linter-eslint
- roadhump/SublimeLinter-eslint
- mtscout6/syntastic-local-eslint.vim
- Microsoft/vscode-eslint
- WebStorm → Preferences → Languages & Frameworks → JavaScript → ESLint
実装方法
悪い実装例
要素の閉じタグが無い
<div>文章です
<div>文章です2
要素の使い方が間違っている
<ul>
<a href="#menu1"><li>メニュー1</li></a>
<a href="#menu2"><li>メニュー2</li></a>
</ul>
IDが重複している
<h2 id="contents">コンテンツ1</h2>
<h2 id="contents">コンテンツ2</h2>
良い実装例
要素の閉じタグがある
<div>文章です</div>
<div>文章です2</div>
要素の使い方が正しい
<ul>
<li><a href="#menu1">メニュー1</a></li>
<li><a href="#menu2">メニュー2</a></li>
</ul>
IDが重複していない
<h2 id="contents1">コンテンツ1</h2>
<h2 id="contents2">コンテンツ2</h2>