├── CONTRIBUTING.md
├── README.ko.md
├── README.md
└── README.ja.md


/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | Contributing to HTML Best Practice
 2 | ==================================
 3 | 
 4 | Thanks for taking the time to contribute!
 5 | 
 6 | Your new practice must have “Bad” and “Good”code examples. A detailed
 7 | explanation of your new practice should be written in commit message or pull
 8 | request comment.
 9 | 
10 | 
11 | About ToC
12 | ---------
13 | 
14 | ToC is generated by [gfmtoc][1]. You need not update ToC with this tool. I will
15 | update later.
16 | 
17 | 
18 | 日本の方へ
19 | ----------
20 | 
21 | このドキュメントを英語で書いたことにはあまり意味はないので、イシューやプル・リクエストは好きな言語で書いてくれて構いません。新たなベスト・プラクティスの提案も日本語で結構です。マージする際にこちらで適当に英語に訳します。
22 | 
23 | 
24 | [1]: https://github.com/hail2u/node-gfmtoc
25 | 


--------------------------------------------------------------------------------
/README.ko.md:
--------------------------------------------------------------------------------
   1 | Translations: [English (en)](README.md) · [日本語 (ja)](README.ja.md) · [한국어 (ko)](README.ko.md)
   2 | 
   3 | HTML Best Practices
   4 | ===================
   5 | 
   6 | 유지보수 및 확장할 수 있는 HTML 문서를 만들기 위해
   7 | 
   8 | <!-- #toc -->
   9 | 
  10 | * [공통](#공통)
  11 |   * [`DOCTYPE`으로 시작해라](#doctype으로-시작해라) 
  12 |   * [레거시 혹은 폐기된 `DOCTYPE`을 쓰지 마라](#레거시-혹은-폐기된-doctype을-쓰지-마라) 
  13 |   * [XML 선언을 쓰지 말아라](#xml-선언을-쓰지-말아라) 
  14 |   * [문자 레퍼런스를 가능한 한 사용하지 말아라](#문자-레퍼런스를-가능한-한-사용하지-말아라) 
  15 |   * [`&`, `<`, `>`, `"`, `'`를 문자 레퍼런스로 변환해라](#----를-문자-레퍼런스로-변환해라) 
  16 |   * [제어 문자나 보이지 않는 문자를 제어하기 위해 숫자 문자 레퍼런스를 사용하라](#제어-문자나-보이지-않는-문자를-제어하기-위해-숫자-문자-레퍼런스를-사용하라) 
  17 |   * [주석 내용 주위에 공백을 넣어라](#주석-내용-주위에-공백을-넣어라) 
  18 |   * [닫는 태그를 생략하지 말아라](#닫는-태그를-생략하지-말아라) 
  19 |   * [빈 요소 포맷을 섞지 마라](#빈-요소-포맷을-섞지-마라) 
  20 |   * [태그 및 속성 값 사이에 공백문자를 넣지 말아라](#태그-및-속성-값-사이에-공백문자를-넣지-말아라) 
  21 |   * [대소문자를 섞지 말아라](#대소문자를-섞지-말아라) 
  22 |   * [인용 부호를 섞지 말아라](#인용-부호를-섞지-말아라) 
  23 |   * [속성을 두개 이상의 공백 문자로 나누지 마라](#속성을-두개-이상의-공백-문자로-나누지-마라) 
  24 |   * [불리언 속성값을 생략해라](#불리언-속성값을-생략해라) 
  25 |   * [네임스페이스를 생략해라](#네임스페이스를-생략해라) 
  26 |   * [XML 속성을 쓰지 마라](#xml-속성을-쓰지-마라) 
  27 |   * [`data-*`, 마이크로데이터, RDFa Lite 속성을 일반 속성과 섞어쓰지 마라](#data--마이크로데이터-rdfa-lite-속성을-일반-속성과-섞어쓰지-마라) 
  28 |   * [기본 암시적 ARIA 시맨틱을 선호하라](#기본-암시적-aria-시맨틱을-선호하라) 
  29 | * [루트 요소](#루트-요소)
  30 | * [`lang` 속성을 추가해라](#lang-속성을-추가해라) 
  31 | * [`lang` 속성을 가능하면 짧게 유지해라](#lang-속성을-가능하면-짧게-유지해라) 
  32 | * [`data-*`을 가능한 한 없애라](#data-을-가능한-한-없애라) 
  33 | * [문서 메타데이터](#문서-메타데이터)
  34 |   * [`title` 요소를 넣어라](#title-요소를-넣어라) 
  35 |   * [`base` 요소를 쓰지 마라](#base-요소를-쓰지-마라) 
  36 |   * [마이너한 링크 리소스에 MIME 타입을 정의해라](#마이너한-링크-리소스에-mime-타입을-정의해라) 
  37 |   * [`favicon.ico` 링크하지 마라](#faviconico-링크하지-마라) 
  38 |   * [대체 스타일시트에 `title` 속성을 넣어라](#대체-스타일시트에-title-속성을-넣어라) 
  39 |   * [URL을 위해서 `link` 요소를 써라](#url을-위해서-link-요소를-써라) 
  40 |   * [문서의 문자 인코딩을 정의해라](#문서의-문자-인코딩을-정의해라) 
  41 |   * [레거시 인코딩 포맷을 쓰지 마라](#레거시-인코딩-포맷을-쓰지-마라) 
  42 |   * [문자 인코딩을 처음으로 선언해라](#문자-인코딩을-처음으로-선언해라) 
  43 |   * [UTF-8을 써라](#utf-8을-써라) 
  44 |   * [CSS를 위한 `type` 속성을 생략해라](#css를-위한-type-속성을-생략해라) 
  45 |   * [`style` 요소의 내용을 주석처리하지 마라](#style-요소의-내용을-주석처리하지-마라) 
  46 |   * [CSS와 JavaScript 태그를 섞지 말아라](#css와-javascript-태그를-섞지-말아라) 
  47 | * [섹션](#섹션)
  48 |   * [`body` 요소를 넣어라](#body-요소를-넣어라) 
  49 |   * [`hgroup` 요소는 잊어라](#hgroup-요소는-잊어라) 
  50 |   * [`address` 요소는 콘택트 정보를 제공하는 데만 써라](#address-요소는-콘택트-정보를-제공하는-데만-써라) 
  51 | * [그룹 콘텐츠](#그룹-콘텐츠)
  52 |   * [`pre` 요소에서 새 줄로 시작하지 말아라](#pre-요소에서-새-줄로-시작하지-말아라) 
  53 |   * [`blockquote` 요소에 적절한 요소를 써라](#blockquote-요소에-적절한-요소를-써라) 
  54 |   * [`blockquote` 요소 안에 직접 포함하지 마라](#blockquote-요소-안에-직접-포함하지-마라) 
  55 |   * [한 줄에 한 리스트 아이템을 써라](#한-줄에-한-리스트-아이템을-써라) 
  56 |   * [`ol` 요소에 `type` 속성을 써라](#ol-요소에-type-속성을-써라) 
  57 |   * [다이얼로그를 위해 `dl`을 쓰지 마라](#다이얼로그를-위해-dl을-쓰지-마라) 
  58 |   * [`figcaption` 요소를 `figure` 요소의 첫째 or 마지막 자식요소로 써라](#figcaption--요소를-figure-요소의-첫째-or-마지막-자식요소로-써라) 
  59 |   * [`main` 요소를 써라](#main-요소를-써라) 
  60 |   * [`div` 요소를 가능한 한 많이 없애라](#div-요소를-가능한-한-많이-없애라) 
  61 | * [Text-level 시맨틱](#Text-level-시맨틱)
  62 |   * [그룹 가능한 동일 링크를 분리하지 마라](#그룹-가능한-동일-링크를-분리하지-마라) 
  63 |   * [리소스를 다운하고자 할 때 `download` 속성을 사용하라](#리소스를-다운하고자-할-때-download-속성을-사용하라) 
  64 |   * [필요하다면 `rel`, `hreflang`, `type` 속성을 사용해라](#필요하다면-rel-hreflang-type-속성을-사용해라) 
  65 |   * [링크 텍스트를 명확히 하라](#링크-텍스트를-명확히-하라) 
  66 |   * [경고나 주의를 위해 `em`을 사용하지 말아라](#경고나-주의를-위해-em을-사용하지-말아라) 
  67 |   * [`s`, `i`, `b`, `u` 요소를 가능한 한 없애라](#s-i-b-u-요소를-가능한-한-없애라) 
  68 |   * [`q `요소에 따옴표를 넣지 말아라](#q-요소에-따옴표를-넣지-말아라) 
  69 |   * [`abbr` 요소에 `title` 속성을 써라](#abbr-요소에-title-속성을-써라) 
  70 |   * [`ruby` 요소를 자세히 마크업해라](#ruby-요소를-자세히-마크업해라) 
  71 |   * [기계가 읽을 수 없는 `time` 요소에 `datetime` 속성을 추가해라](#기계가-읽을-수-없는-time-요소에-datetime-속성을-추가해라) 
  72 |   * [`class` 속성 접두어로 `language-`를 넣어 code 언어를 정의하라](#class-속성-접두어로-language-를-넣어-code-언어를-정의하라) 
  73 |   * [`kbd` 요소를 가능한 한 단순하게 둬라](#kbd-요소를-가능한-한-단순하게-둬라) 
  74 |   * [`span` 요소를 가능한 한 많이 제거해라.](#span-요소를-가능한-한-많이-제거해라) 
  75 |   * [`br` 요소 뒤에 줄바꿈해라](#br-요소-뒤에-줄바꿈해라) 
  76 |   * [프레젠테이션 목적으로만 `br` 요소를 쓰지 마라](#프레젠테이션-목적으로만-br-요소를-쓰지-마라) 
  77 | * [에디트](#에디트)
  78 |   * [`ins`와 `del` 요소로 다른 요소를 뛰어넘지 마라](#ins와-del-요소로-다른-요소를-뛰어넘지-마라) 
  79 | * [Embedded 콘텐츠](#Embedded-콘텐츠)
  80 |   * [`picture` 요소의 폴백으로 `img` 요소를 제공해라](#picture-요소의-폴백으로-img-요소를-제공해라) 
  81 |   * [만약 필요하다면 `img` 요소에 `alt` 속성을 추가해라](#만약-필요하다면-img-요소에-alt-속성을-추가해라) 
  82 |   * [가능한 경우 `alt` 속성을 비워둬라](#가능한-경우-alt-속성을-비워둬라) 
  83 |   * [가능한 경우 `alt` 속성을 생략해라](#가능한-경우-alt-속성을-생략해라) 
  84 |   * [`iframe` 요소를 비워둬라](#iframe-요소를-비워둬라) 
  85 |   * [`map` 요소 콘텐츠도 마크업해라](#map-요소-콘텐츠도-마크업해라) 
  86 |   * [`audio`나 `video` 요소를 위한 폴백 콘텐츠를 제공해라.](#audio나-video-요소를-위한-폴백-콘텐츠를-제공해라) 
  87 | * [테이블 데이터](#테이블-데이터)
  88 |   * [한 줄에 한 셀만 써라](#한-줄에-한-셀만-써라) 
  89 |   * [`th` 요소를 헤더 셀로 써라](#th-요소를-헤더-셀로-써라) 
  90 | * [폼](#폼)
  91 |   * [폼 컨트롤을 `label` 요소로 감싸라](#폼-컨트롤을-label-요소로-감싸라) 
  92 |   * [가능한 경우 `for` 속성을 생략해라](#가능한-경우-for-속성을-생략해라) 
  93 |   * [`input` 요소에 적절한 `type` 속성을 사용해라](#input-요소에-적절한-type-속성을-사용해라) 
  94 |   * [`input type="submit"`에 `value` 속성을 넣어라](#input-typesubmit에-value-속성을-넣어라) 
  95 |   * [`input` 요소에 `pattern` 속성이 있는 경우 `title` 속성을 추가해라](#input-요소에-pattern-속성이-있는-경우-title-속성을-추가해라) 
  96 |   * [레이블하기 위해 `placeholder` 속성을 쓰지 마라](#레이블하기-위해-placeholder-속성을-쓰지-마라) 
  97 |   * [한 줄에 한 `option` 요소만 사용해라](#한-줄에-한-option-요소만-사용해라) 
  98 |   * [`progress` 요소에 `max` 속성을 추가해라](#progress-요소에-max-속성을-추가해라) 
  99 |   * [`meter` 요소에 `min`, `max` 속성을 추가해라](#meter-요소에-min-max-속성을-추가해라) 
 100 |   * [`legend` 요소를 `fieldset` 요소의 첫번째 자식으로 둬라.](#legend-요소를-fieldset-요소의-첫번째-자식으로-둬라) 
 101 | * [스크립트](#스크립트)
 102 |   * [자바스크립트를 위한 `type` 속성을 생략해라](#자바스크립트를-위한-type-속성을-생략해라) 
 103 |   * [`script` 요소의 내용을 주석처리하지 마라](#script-요소의-내용을-주석처리하지-마라) 
 104 |   * [스크립트가 삽입된 `script` 요소를 쓰지 마라](#스크립트가-삽입된-script-요소를-쓰지-마라) 
 105 | * [기타](#기타)
 106 |   * [일관된 들여쓰기](#일관된-들여쓰기) 
 107 |   * [내부 링크에 절대 경로를 사용해라](#내부-링크에-절대-경로를-사용해라) 
 108 | <!-- /toc -->
 109 | 
 110 | 
 111 | 공통
 112 | -------
 113 | 
 114 | ### DOCTYPE으로 시작해라
 115 | 
 116 | DOCTYPE은 표준 모드를 활성화하기 위해 필요하다.
 117 | 
 118 | Bad:
 119 | 
 120 |     <html>
 121 |       ...
 122 |     </html>
 123 | 
 124 | Good:
 125 | 
 126 |     <!DOCTYPE html>
 127 |     <html>
 128 |       ...
 129 |     </html>
 130 | 
 131 | 
 132 | ### 레거시 혹은 폐기된 DOCTYPE을 쓰지 마라
 133 | 
 134 | DOCTYPE은 더 이상 DTD가 아니다, 간단해져라
 135 | 
 136 | Bad:
 137 | 
 138 |     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 139 |       "http://www.w3.org/TR/html4/strict.dtd">
 140 | 
 141 | Good:
 142 | 
 143 |     <!DOCTYPE html>
 144 | 
 145 | 
 146 | ### XML 선언을 쓰지 말아라
 147 | 
 148 | 정말 XHTML을 쓸거니?
 149 | 
 150 | Bad:
 151 | 
 152 |     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 153 |     <!DOCTYPE html>
 154 | 
 155 | Good:
 156 | 
 157 |     <!DOCTYPE html>
 158 | 
 159 | 
 160 | ### 문자 레퍼런스를 가능한 한 사용하지 말아라
 161 | 
 162 | 만약 HTML문서를 UTF-8로 작성하고 있다면, 
 163 | 대부분의 문자(이모티콘 포함)를 직접적으로 쓸 수 있다.
 164 | 
 165 | Bad:
 166 | 
 167 |     <p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
 168 | 
 169 | Good:
 170 | 
 171 |     <p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
 172 | 
 173 | 
 174 | ### `&`, `<`, `>`, `"`, `'`를 문자 레퍼런스로 변환해라
 175 | 
 176 | 이 문자들은 버그가 없는 HTML 문서를 만들기위해 반드시 변환해두어야한다.
 177 | 
 178 | Bad:
 179 | 
 180 |     <h1>The "&" character</h1>
 181 | 
 182 | Good:
 183 | 
 184 |     <h1>The &quot;&amp;&quot; character</h1>
 185 | 
 186 | 
 187 | ### 제어 문자나 보이지 않는 문자를 제어하기 위해 숫자 문자 레퍼런스를 사용하라
 188 | 
 189 | 이 문자들은 다른 문자로 쉽게 오인된다.
 190 | spec은 이러한 문자에 대해 사람이 읽을 수 있는 이름을 정의하는 걸 보장하지 않는다.
 191 | 
 192 | Bad:
 193 | 
 194 |     <p>This book can read in 1 hour.</p>
 195 | 
 196 | Good:
 197 | 
 198 |     <p>This book can read in 1&#xA0;hour.</p>
 199 | 
 200 | 
 201 | ### 주석 내용 주위에 공백을 넣어라
 202 | 
 203 | 일부 문자는 주석의 여는 태그 바로 뒤나 닫는 태그 바로 앞에 붙어서 넣을 수 없다.
 204 | 
 205 | Bad:
 206 | 
 207 |     <!--This section is non-normative-->
 208 | 
 209 | Good:
 210 | 
 211 |     <!-- This section is non-normative -->
 212 | 
 213 | 
 214 | ### 닫는 태그를 생략하지 말아라
 215 | 
 216 | 내 생각엔 닫는 태그 생략 룰에 대해 이해하지 못했을 가능성이 높다.
 217 | 
 218 | Bad:
 219 | 
 220 |     <html>
 221 |       <body>
 222 |         ...
 223 | 
 224 | Good:
 225 | 
 226 |     <html>
 227 |       <body>
 228 |         ...
 229 |       </body>
 230 |     </html>
 231 | 
 232 | 
 233 | ### 빈 요소 포맷을 섞지 마라
 234 | 
 235 | 일관성은 가독성의 핵심이다.
 236 | 
 237 | Bad:
 238 | 
 239 |     <img alt="HTML Best Practices" src="/img/logo.png">
 240 |     <hr />
 241 | 
 242 | Good:
 243 | 
 244 |     <img alt="HTML Best Practices" src="/img/logo.png">
 245 |     <hr>
 246 | 
 247 | 
 248 | ### 태그 및 속성 값 사이에 공백문자를 넣지 말아라
 249 | 
 250 | 그럴 이유가 없다.
 251 | 
 252 | Bad:
 253 | 
 254 |     <h1 class=" title " >HTML Best Practices</h1>
 255 | 
 256 | Good:
 257 | 
 258 |     <h1 class="title">HTML Best Practices</h1>
 259 | 
 260 | 
 261 | ### 대소문자를 섞지 말아라
 262 | 
 263 | 일관성을 줄거다.
 264 | 
 265 | Bad:
 266 | 
 267 |     <a HREF="#general">General</A>
 268 | 
 269 | Good:
 270 | 
 271 |     <a href="#general">General</a>
 272 | 
 273 | Also Good:
 274 | 
 275 |     <A HREF="#general">General</A>
 276 | 
 277 | 
 278 | ### 인용 부호를 섞지 말아라
 279 | 
 280 | 위와 같다.
 281 | 
 282 | Bad:
 283 | 
 284 |     <img alt="HTML Best Practices" src='/img/logo.jpg'>
 285 | 
 286 | Good:
 287 | 
 288 |     <img alt="HTML Best Practices" src="/img/logo.jpg">
 289 | 
 290 | 
 291 | ### 속성을 두개 이상의 공백 문자로 나누지 마라
 292 | 
 293 | 이상한 규칙이 누군가를 혼란하게 한다.
 294 | 
 295 | Bad:
 296 | 
 297 |     <input   name="q"  type="search">
 298 | 
 299 | Good:
 300 | 
 301 |     <input name="q" type="search">
 302 | 
 303 | 
 304 | ### 불리언 속성값을 생략해라
 305 | 
 306 | 작성하기 쉽다, 안그래?
 307 | 
 308 | Bad:
 309 | 
 310 |     <audio autoplay="autoplay" src="/audio/theme.mp3">
 311 | 
 312 | Good:
 313 | 
 314 |     <audio autoplay src="/audio/theme.mp3">
 315 | 
 316 | 
 317 | ### 네임스페이스를 생략해라
 318 | 
 319 | HTML5 문서에서 SVG와 MathML은 바로 쓸 수 있다.
 320 | 
 321 | Bad:
 322 | 
 323 |     <svg xmlns="http://www.w3.org/2000/svg">
 324 |       ...
 325 |     </svg>
 326 | 
 327 | Good:
 328 | 
 329 |     <svg>
 330 |       ...
 331 |     </svg>
 332 | 
 333 | 
 334 | ### XML 속성을 쓰지 마라
 335 | 
 336 | 우린 HTML 문서를 쓰고있다.
 337 | 
 338 | Bad:
 339 | 
 340 |     <span lang="ja" xml:lang="ja">...</span>
 341 | 
 342 | Good:
 343 | 
 344 |     <span lang="ja">...</span>
 345 | 
 346 | 
 347 | ### `data-*`, 마이크로데이터, RDFa Lite 속성을 일반 속성과 섞어쓰지 마라
 348 | 
 349 | 태그 문자열이 아주 복잡할 수 있다.
 350 | 이 간단한 규칙은 태그 문자열을 더 읽기 쉽게한다.
 351 | 
 352 | Bad:
 353 | 
 354 |     <img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
 355 | 
 356 | Good:
 357 | 
 358 |     <img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
 359 | 
 360 | 
 361 | ### 기본 암시적 ARIA 시맨틱을 선호하라
 362 | 
 363 | 일부 요소에서는 HTML 문서에서 ARIA `role`을 가지므로 지정하지 마라.
 364 | 
 365 | Bad:
 366 | 
 367 |     <nav role="navigation">
 368 |       ...
 369 |     </nav>
 370 |     
 371 |     <hr role="separator">
 372 | 
 373 | Good:
 374 | 
 375 |     <nav>
 376 |       ...
 377 |     </nav>
 378 |     
 379 |     <hr>
 380 | 
 381 | 
 382 | 루트 요소
 383 | ----------------
 384 | 
 385 | ### `lang` 속성을 추가해라
 386 | 
 387 | `lang` 속성이 HTML 문서를 번역하는 데 도움을 줄거다.
 388 | 
 389 | Bad:
 390 | 
 391 |     <html>
 392 | 
 393 | Good:
 394 | 
 395 |     <html lang="en-US">
 396 | 
 397 | 
 398 | ### `lang` 속성을 가능하면 짧게 유지해라
 399 | 
 400 | 일본어는 Japan만 사용해라. 국가 코드는 필요없다.
 401 | 
 402 | Bad:
 403 | 
 404 |     <html lang="ja-JP">
 405 | 
 406 | Good:
 407 | 
 408 |     <html lang="ja">
 409 | 
 410 | 
 411 | ### `data-*`을 가능한 한 없애라
 412 | 
 413 | 적절한 속성은 브라우저에서 처리할 수 있다.
 414 | 
 415 | Bad:
 416 | 
 417 |     <span data-language="french">chemises</span>
 418 |     ...
 419 |     <strong data-type="warning">Do not wash!</strong>
 420 | 
 421 | Good:
 422 | 
 423 |     <span title="French"><span lang="fr-FR">chemises</span></span>
 424 |     ...
 425 |     <strong class="warning">Do not wash!</strong>
 426 | 
 427 | 
 428 | 문서 메타데이터
 429 | -----------------
 430 | 
 431 | ### `title` 요소를 넣어라
 432 | 
 433 | `title` 요소 값은 브라우저뿐만 아니라 다양한 어플리케이션에서 사용한다.
 434 | 
 435 | Bad:
 436 | 
 437 |     <head>
 438 |       <meta charset="UTF-8">
 439 |     </head>
 440 | 
 441 | Good:
 442 | 
 443 |     <head>
 444 |       <meta charset="UTF-8">
 445 |       <title>HTML Best Practices</title>
 446 |     </head>
 447 | 
 448 | 
 449 | ### `base` 요소를 쓰지 마라
 450 | 
 451 | 절대 경로나 URL은 개발자와 유저 모두에게 안전하다
 452 | 
 453 | Bad:
 454 | 
 455 |     <head>
 456 |       ...
 457 |       <base href="/blog/">
 458 |       <link href="hello-world" rel="canonical">
 459 |       ...
 460 |     </head>
 461 | 
 462 | Good:
 463 | 
 464 |     <head>
 465 |       ...
 466 |       <link href="/blog/hello-world" rel="canonical">
 467 |       ...
 468 |     </head>
 469 | 
 470 | 
 471 | ### 마이너한 링크 리소스에 MIME 타입을 정의해라
 472 | 
 473 | 어플리케이션에서 리소스를 어떻게 처리하는 가에 대한 힌트다.
 474 | 
 475 | Bad:
 476 | 
 477 |     <link href="/pdf" rel="alternate">
 478 |     <link href="/feed" rel="alternate">
 479 |     <link href="/css/screen.css" rel="stylesheet">
 480 | 
 481 | Good:
 482 | 
 483 |     <link href="/pdf" rel="alternate" type="application/pdf">
 484 |     <link href="/feed" rel="alternate" type="application/rss+xml">
 485 |     <link href="/css/screen.css" rel="stylesheet">
 486 | 
 487 | 
 488 | ### `favicon.ico` 링크하지 마라
 489 | 
 490 | 대부분의 브라우저에서 `/favicon.ico`를 자동으로 비동기방식으로 가져온다.
 491 | 
 492 | Bad:
 493 | 
 494 |     <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
 495 | 
 496 | Good:
 497 | 
 498 |     <!-- Place `favicon.ico` in the root directory. -->
 499 | 
 500 | 
 501 | ### 대체 스타일시트에 `title` 속성을 넣어라
 502 | 
 503 | 사람이 읽을 수 있는 레이블은 스타일시트를 선택하는 데 도움을 줄거다.
 504 | 
 505 | Bad:
 506 | 
 507 |     <link href="/css/screen.css" rel="stylesheet">
 508 |     <link href="/css/high-contrast.css" rel="alternate stylesheet">
 509 | 
 510 | Good:
 511 | 
 512 |     <link href="/css/screen.css" rel="stylesheet">
 513 |     <link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
 514 | 
 515 | 
 516 | ### URL을 위해서 `link` 요소를 써라
 517 | 
 518 | `href` 속성 값이 URL로 해석된다.
 519 | 
 520 | Bad:
 521 | 
 522 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 523 |       <meta content="https://example.com/blog/hello" itemprop="url">
 524 |       ...
 525 |     </section>
 526 | 
 527 | Good:
 528 | 
 529 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 530 |       <link href="/blog/hello" itemprop="url">
 531 |       ...
 532 |     </section>
 533 | 
 534 | 
 535 | ### 문서의 문자 인코딩을 정의해라
 536 | 
 537 | 아직 UTF-8이 모든 브라우저에서 기본이 아니다.
 538 | 
 539 | Bad:
 540 | 
 541 |     <head>
 542 |       <title>HTML Best Practices</title>
 543 |     </head>
 544 | 
 545 | Good:
 546 | 
 547 |     <head>
 548 |       <meta charset="UTF-8">
 549 |       <title>HTML Best Practices</title>
 550 |     </head>
 551 | 
 552 | 
 553 | ### 레거시 인코딩 포맷을 쓰지 마라
 554 | 
 555 | HTTP 헤더는 서버에서 정의해야하며, 아주 쉽다.
 556 | 
 557 | Bad:
 558 | 
 559 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 560 | 
 561 | Good:
 562 | 
 563 |     <meta charset="UTF-8">
 564 | 
 565 | 
 566 | ### 문자 인코딩을 처음으로 선언해라
 567 | 
 568 | 스펙상 문자 인코딩이 문서의 첫 1024 바이트 내에 지정되어있어야 한다.
 569 | 
 570 | Bad:
 571 | 
 572 |     <head>
 573 |       <meta content="width=device-width" name="viewport">
 574 |       <meta charset="UTF-8">
 575 |       ...
 576 |     </head>
 577 | 
 578 | Good:
 579 | 
 580 |     <head>
 581 |       <meta charset="UTF-8">
 582 |       <meta content="width=device-width" name="viewport">
 583 |       ...
 584 |     </head>
 585 | 
 586 | 
 587 | ### UTF-8을 써라
 588 | 
 589 | UTF-8과 함께라면, 이모티콘을 자유롭게 쓸 수 있다.
 590 | 
 591 | Bad:
 592 | 
 593 |     <meta charset="Shift_JIS">
 594 | 
 595 | Good:
 596 | 
 597 |     <meta charset="UTF-8">
 598 | 
 599 | 
 600 | ### CSS를 위한 `type` 속성을 생략해라
 601 | 
 602 | HTML5에서, `style` 요소의 기본 `type` 속성 값은 `text/css`다.
 603 | 
 604 | Bad:
 605 | 
 606 |     <style type="text/css">
 607 |       ...
 608 |     </style>
 609 | 
 610 | Good:
 611 | 
 612 |     <style>
 613 |       ...
 614 |     </style>
 615 | 
 616 | 
 617 | ### `style` 요소의 내용을 주석처리하지 마라
 618 | 
 619 | 이는 오랜 브라우저를 위한 것이다.
 620 | 
 621 | Bad:
 622 | 
 623 |     <style>
 624 |     <!--
 625 |       ...
 626 |       -->
 627 |     </style>
 628 | 
 629 | Good:
 630 | 
 631 |     <style>
 632 |       ...
 633 |     </style>
 634 | 
 635 | 
 636 | ### CSS와 JavaScript 태그를 섞지 말아라
 637 | 
 638 | 때론 `script` 요소가 DOM 구성을 막기도 한다.
 639 | 
 640 | Bad:
 641 | 
 642 |     <script src="/js/jquery.min.js"></script>
 643 |     <link href="/css/screen.css" rel="stylesheet">
 644 |     <script src="/js/main.js"></script>
 645 | 
 646 | Good:
 647 | 
 648 |     <link href="/css/screen.css" rel="stylesheet">
 649 |     <script src="/js/jquery.min.js"></script>
 650 |     <script src="/js/main.js"></script>
 651 | 
 652 | Also good:
 653 | 
 654 |     <script src="/js/jquery.min.js"></script>
 655 |     <script src="/js/main.js"></script>
 656 |     <link href="/css/screen.css" rel="stylesheet">
 657 | 
 658 | 
 659 | 섹션
 660 | --------
 661 | 
 662 | ### `body` 요소를 넣어라
 663 | 
 664 | 때로 `body`를 브라우저에서 넣을 때 원치 않은 위치에 있기도 한다.
 665 | 
 666 | Bad:
 667 | 
 668 |     <html>
 669 |       <head>
 670 |         ...
 671 |       </head>
 672 |       ...
 673 |     </html>
 674 | 
 675 | Good:
 676 | 
 677 |     <html>
 678 |       <head>
 679 |         ...
 680 |       </head>
 681 |       <body>
 682 |         ...
 683 |       </body>
 684 |     </html>
 685 | 
 686 | 
 687 | ### `hgroup` 요소는 잊어라
 688 | 
 689 | W3C 스펙에서 삭제되었다.
 690 | 
 691 | Bad:
 692 | 
 693 |     <hgroup>
 694 |       <h1>HTML Best Practices</h1>
 695 |       <h2>For writing maintainable and scalable HTML documents.</h2>
 696 |     </hgroup>
 697 | 
 698 | Good:
 699 | 
 700 |     <h1>HTML Best Practices</h1>
 701 |     <p>For writing maintainable and scalable HTML documents.</p>
 702 | 
 703 | 
 704 | ### `address` 요소는 콘택트 정보를 제공하는 데만 써라
 705 | 
 706 | `address` 요소는 이메일 주소, 소셜 네트워크 계정, 주소, 전화번호 등 직접 연락할 수 있는 항목이다.
 707 | 
 708 | Bad:
 709 | 
 710 |     <address>No rights reserved.</address>
 711 | 
 712 | Good:
 713 | 
 714 |     <address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
 715 | 
 716 | 
 717 | 그룹 콘텐츠
 718 | ----------------
 719 | 
 720 | ### `pre` 요소에서 새 줄로 시작하지 말아라
 721 | 
 722 | 첫번째 줄바꿈은 브라우저에서 무시하지만, 두번째부터는 렌더링된다.
 723 | 
 724 | Bad:
 725 | 
 726 |     <pre>
 727 |     &lt;!DOCTYPE html&gt;
 728 |     </pre>
 729 | 
 730 | Good:
 731 | 
 732 |     <pre>&lt;!DOCTYPE html&gt;
 733 |     </pre>
 734 | 
 735 | 
 736 | ### `blockquote` 요소에 적절한 요소를 써라
 737 | 
 738 | `blockquote` 요소의 콘텐츠은 인용한 내용이지, 문장 덩어리가 아니다.
 739 | 
 740 | Bad:
 741 | 
 742 |     <blockquote>For writing maintainable and scalable HTML documents.</blockquote>
 743 | 
 744 | Good:
 745 | 
 746 |     <blockquote>
 747 |       <p>For writing maintainable and scalable HTML documents.</p>
 748 |     </blockquote>
 749 | 
 750 | 
 751 | ### `blockquote` 요소 안에 직접 포함하지 마라
 752 | 
 753 | `blockquote` 요소의 콘텐츠는 인용구다.
 754 | 
 755 | Bad:
 756 | 
 757 |     <blockquote>
 758 |       <p>For writing maintainable and scalable HTML documents.</p>
 759 | 
 760 |       <p>— HTML Best Practices</p>
 761 |     </blockquote>
 762 | 
 763 | Good:
 764 | 
 765 |     <blockquote>
 766 |       <p>For writing maintainable and scalable HTML documents.</p>
 767 |     </blockquote>
 768 |     
 769 |     <p>— HTML Best Practices</p>
 770 | 
 771 | Also good (recommended by WHATWG):
 772 | 
 773 |     <figure>
 774 |       <blockquote>
 775 |         <p>For writing maintainable and scalable HTML documents.</p>
 776 |       </blockquote>
 777 |     
 778 |       <figcaption>— HTML Best Practices</figcaption>
 779 |     </figure>
 780 | 
 781 | Also good too (recommended by W3C):
 782 | 
 783 |     <blockquote>
 784 |       <p>For writing maintainable and scalable HTML documents.</p>
 785 |     
 786 |       <footer>— HTML Best Practices</footer>
 787 |     </blockquote>
 788 | 
 789 | 
 790 | ### 한 줄에 한 리스트 아이템을 써라
 791 | 
 792 | 기이ㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣㅣ인
 793 | 라인은 너무ㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜㅜ 읽기 힘들다.
 794 | 
 795 | Bad:
 796 | 
 797 |     <ul>
 798 |       <li>General</li><li>The root Element</li><li>Sections</li>...
 799 |     </ul>
 800 | 
 801 | Good:
 802 | 
 803 |     <ul>
 804 |       <li>General</li>
 805 |       <li>The root Element</li>
 806 |       <li>Sections</li>
 807 |       ...
 808 |     </ul>
 809 | 
 810 | 
 811 | ### `ol` 요소에 `type` 속성을 써라
 812 | 
 813 | 때로는 주변 콘텐츠에 의해 마커가 참조된다. 만약 `type`  속성으로 마커를 변경한다면,
 814 | 참조하는 것이 안전하다.
 815 | 
 816 | Bad:
 817 | 
 818 |     <head>
 819 |       <style>
 820 |         .toc {
 821 |           list-style-type: upper-roman;
 822 |         }
 823 |       </style>
 824 |     </head>
 825 |     <body>
 826 |       <ol class="toc">
 827 |         <li>General</li>
 828 |         <li>The root Element</li>
 829 |         <li>Sections</li>
 830 |         ...
 831 |       </ol>
 832 |     </body>
 833 | 
 834 | Good:
 835 | 
 836 |     <body>
 837 |       <ol type="I">
 838 |         <li>General</li>
 839 |         <li>The root Element</li>
 840 |         <li>Sections</li>
 841 |         ...
 842 |       </ol>
 843 |     </body>
 844 | 
 845 | 
 846 | ### 다이얼로그를 위해 `dl`을 쓰지 마라
 847 | 
 848 | `dl` 요소는 HTML5의 연결 목록으로 제한한다.
 849 | 
 850 | Bad:
 851 | 
 852 |     <dl>
 853 |       <dt>Costello</dt>
 854 |       <dd>Look, you gotta first baseman?</dd>
 855 |       <dt>Abbott</dt>
 856 |       <dd>Certainly.</dd>
 857 |       <dt>Costello</dt>
 858 |       <dd>Who’s playing first?</dd>
 859 |       <dt>Abbott</dt>
 860 |       <dd>That’s right.</dd>
 861 |       <dt>Costello becomes exasperated.</dd>
 862 |       <dt>Costello</dt>
 863 |       <dd>When you pay off the first baseman every month, who gets the money?</dd>
 864 |       <dt>Abbott</dt>
 865 |       <dd>Every dollar of it.</dd>
 866 |     </dl>
 867 | 
 868 | Good:
 869 | 
 870 |     <p>Costello: Look, you gotta first baseman?</p>
 871 |     <p>Abbott: Certainly.</p>
 872 |     <p>Costello: Who’s playing first?</p>
 873 |     <p>Abbott: That’s right.</p>
 874 |     <p>Costello becomes exasperated.</p>
 875 |     <p>Costello: When you pay off the first baseman every month, who gets the money?</p>
 876 |     <p>Abbott: Every dollar of it.</p>
 877 | 
 878 | 
 879 | ### `figcaption`  요소를 `figure` 요소의 첫째 or 마지막 자식요소로 써라
 880 | 
 881 | 스펙 (WHATWG 버전)에서 `figcaption` 요소를 `figure` 요소 중간에 두는 걸 허용하지 않는다.
 882 | 
 883 | Bad:
 884 | 
 885 |     <figure>
 886 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 887 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 888 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 889 |     </figure>
 890 | 
 891 | Good:
 892 | 
 893 |     <figure>
 894 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 895 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 896 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 897 |     </figure>
 898 | 
 899 | 
 900 | ### `main` 요소를 써라
 901 | 
 902 | `main` 요소는 콘텐츠를 감쌀 때 쓸 수 있다.
 903 | 
 904 | Bad:
 905 | 
 906 |     <div id="content">
 907 |       ...
 908 |     </div>
 909 | 
 910 | Good:
 911 | 
 912 |     <main>
 913 |       ...
 914 |     </main>
 915 | 
 916 | 
 917 | ### `div` 요소를 가능한 한 많이 없애라
 918 | 
 919 | `div` 요소는 최후의 수단이다.
 920 | 
 921 | Bad:
 922 | 
 923 |     <div class="chapter">
 924 |       ...
 925 |     </div>
 926 | 
 927 | Good:
 928 | 
 929 |     <section>
 930 |       ...
 931 |     </section>
 932 | 
 933 | 
 934 | Text-level 시맨틱
 935 | --------------------
 936 | 
 937 | ### 그룹 가능한 동일 링크를 분리하지 마라
 938 | 
 939 | `a` 요소는 대부분의 요소를 감쌀 수 있다. (`a` 요소 자신이나 컨트롤같은 인터렉티브 요소는 제외한다)
 940 | 
 941 | Bad:
 942 | 
 943 |     <h1><a href="https://whatwg.org/">WHATWG</a></h1>
 944 |     
 945 |     <p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
 946 | 
 947 | Good:
 948 | 
 949 |     <a href="https://whatwg.org/">
 950 |       <h1>WHATWG</h1>
 951 |     
 952 |       <p>A community maintaining and evolving HTML since 2004.</p>
 953 |     </a>
 954 | 
 955 | 
 956 | ### 리소스를 다운하고자 할 때 `download` 속성을 사용하라
 957 | 
 958 | 브라우저에서 연결된 리소스를 스토리지에서 다운받으려 할거다.
 959 | 
 960 | Bad:
 961 | 
 962 |     <a href="/downloads/offline.zip">offline version</a>
 963 | 
 964 | Good:
 965 | 
 966 |     <a download href="/downloads/offline.zip">offline version</a>
 967 | 
 968 | 
 969 | ### 필요하다면 `rel`, `hreflang`, `type` 속성을 사용해라
 970 | 
 971 | 이러한 힌트는 어플리케이션에서 연결된 리소스를 제어하는 데 사용한다.
 972 | 
 973 | Bad:
 974 | 
 975 |     <a href="/ja/pdf">Japanese PDF version</a>
 976 | 
 977 | Good:
 978 | 
 979 |     <a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
 980 | 
 981 | 
 982 | ### 링크 텍스트를 명확히 하라
 983 | 
 984 | 링크 텍스트는 연결된 리소스의 레이블이어야한다.
 985 | 
 986 | Bad:
 987 | 
 988 |     <p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
 989 | 
 990 | Good:
 991 | 
 992 |     <p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
 993 | 
 994 | 
 995 | ### 경고나 주의를 위해 `em`을 사용하지 말아라
 996 | 
 997 | 이것들은 심각하다. 따라서 `storng` 요소가 더 적절하다.
 998 | 
 999 | Bad:
1000 | 
1001 |     <em>Caution!</em>
1002 | 
1003 | Good:
1004 | 
1005 |     <strong>Caution!</strong>
1006 | 
1007 | 
1008 | ### `s`, `i`, `b`, `u` 요소를 가능한 한 없애라
1009 | 
1010 | 이 요소의 시맨틱은 사람과 아주 다르다.
1011 | 
1012 | Bad:
1013 | 
1014 |     <i class="icon-search"></i>
1015 | 
1016 | Good:
1017 | 
1018 |     <span class="icon-search" aria-hidden="true"></span>
1019 | 
1020 | 
1021 | ### `q` 요소에 따옴표를 넣지 말아라
1022 | 
1023 | 브라우저에서 제공한다.
1024 | 
1025 | Bad:
1026 | 
1027 |     <q>“For writing maintainable and scalable HTML documents”</q>
1028 | 
1029 | Good:
1030 | 
1031 |     <q>For writing maintainable and scalable HTML documents</q>
1032 | 
1033 | Also good:
1034 | 
1035 |     “For writing maintainable and scalable HTML documents”
1036 | 
1037 | 
1038 | ### `abbr` 요소에 `title` 속성을 써라
1039 | 
1040 | 무엇의 함축어인 지 달리 설명할 길이 없다.
1041 | 
1042 | Bad:
1043 | 
1044 |     <abbr>HBP</abbr>
1045 | 
1046 | Good:
1047 | 
1048 |     <abbr title="HTML Best Practices">HBP</abbr>
1049 | 
1050 | 
1051 | ### `ruby` 요소를 자세히 마크업해라
1052 | 
1053 | `ruby` 요소를 모든 모던 브라우저에서 완전하게 지원하는 게 아니다.
1054 | 
1055 | Bad:
1056 | 
1057 |     <ruby>HTML<rt>えいちてぃーえむえる</ruby>
1058 | 
1059 | Good:
1060 | 
1061 |     <ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
1062 | 
1063 | 
1064 | ### 기계가 읽을 수 없는 `time` 요소에 `datetime` 속성을 추가해라
1065 | 
1066 | `datetime` 속성이 없을 때, `time` 요소의 포맷은 제한된다.
1067 | 
1068 | Bad:
1069 | 
1070 |     <time>Dec 19, 2014</time>
1071 | 
1072 | Good:
1073 | 
1074 |     <time datetime="2014-12-19">Dec 19, 2014</time>
1075 | 
1076 | 
1077 | ### `class` 속성 접두어로 `language-`를 넣어 code 언어를 정의하라
1078 | 
1079 | 일반적이진 않지만, spec에 언급되어있다.
1080 | 
1081 | Bad:
1082 | 
1083 |     <code>&lt;!DOCTYPE html&gt;</code>
1084 | 
1085 | Good:
1086 | 
1087 |     <code class="language-html">&lt;!DOCTYPE html&gt;</code>
1088 | 
1089 | 
1090 | ### `kbd` 요소를 가능한 한 단순하게 둬라
1091 | 
1092 | `kbd` 요소를 감싸는 건 사람과 다르다.
1093 | 
1094 | Bad:
1095 | 
1096 |     <kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
1097 | 
1098 | Good:
1099 | 
1100 |     <kbd>Ctrl+F5</kbd>
1101 | 
1102 | 
1103 | ### `span` 요소를 가능한 한 많이 제거해라.
1104 | 
1105 | `span` 요소는 최후의 수단이다.
1106 | 
1107 | Bad:
1108 | 
1109 |     HTML <span class="best">Best</span> Practices
1110 | 
1111 | Good:
1112 | 
1113 |     HTML <em>Best</em> Practices
1114 | 
1115 | 
1116 | ### `br` 요소 뒤에 줄바꿈해라
1117 | 
1118 | `br` 요소를 사용하면 줄바꿈 하는 게 좋다.
1119 | 
1120 | Bad:
1121 | 
1122 |     <p>HTML<br>Best<br>Practices</p>
1123 | 
1124 | Good:
1125 | 
1126 |     <p>HTML<br>
1127 |     Best<br>
1128 |     Practices</p>
1129 | 
1130 | 
1131 | ### 프레젠테이션 목적으로만 `br` 요소를 쓰지 마라
1132 | 
1133 | `br` 요소는 줄바꿈을 위해서가 아니라, 콘텐츠의 라인 구분을 위해 사용한다.
1134 | 
1135 | Bad:
1136 | 
1137 |     <p><label>Rule name: <input name="rule-name" type="text"></label><br>
1138 |     <label>Rule description:<br>
1139 |     <textarea name="rule-description"></textarea></label></p>
1140 | 
1141 | Good:
1142 | 
1143 |     <p><label>Rule name: <input name="rule-name" type="text"></label></p>
1144 |     <p><label>Rule description:<br>
1145 |     <textarea name="rule-description"></textarea></label></p>
1146 | 
1147 | 
1148 | 에디트
1149 | -----
1150 | 
1151 | ### `ins`와 `del` 요소로 다른 요소를 뛰어넘지 마라
1152 | 
1153 | 요소는 다른 요소를 넘을 수 없다.
1154 | 
1155 | Bad:
1156 | 
1157 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
1158 |     
1159 |     <p>Don’t trust!</p></del>
1160 | 
1161 | Good:
1162 | 
1163 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
1164 |     
1165 |     <del><p>Don’t trust!</p></del>
1166 | 
1167 | 
1168 | Embedded 콘텐츠
1169 | ----------------
1170 | 
1171 | ### `picture` 요소의 폴백으로 `img` 요소를 제공해라
1172 | 
1173 | `picture` 요소 지원율이 아직 그렇게 높지 않다.
1174 | 
1175 | Bad:
1176 | 
1177 |     <picture>
1178 |       <source srcset="/img/logo.webp" type="image/webp">
1179 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1180 |       <source srcset="/img/logo.jp2" type="image/jp2">
1181 |       <source srcset="/img/logo.jpg" type="image/jpg">
1182 |     </picture>
1183 | 
1184 | Good:
1185 | 
1186 |     <picture>
1187 |       <source srcset="/img/logo.webp" type="image/webp">
1188 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1189 |       <source srcset="/img/logo.jp2" type="image/jp2">
1190 |       <img src="/img/logo.jpg">
1191 |     </picture>
1192 | 
1193 | 
1194 | ### 만약 필요하다면 `img` 요소에 `alt` 속성을 추가해라
1195 | 
1196 | `alt` 속성은 이미지를 처리할 수 없거나 불러오지 못했을 때 도움을 준다.
1197 | 
1198 | Bad:
1199 | 
1200 |     <img src="/img/logo.png">
1201 | 
1202 | Good:
1203 | 
1204 |     <img alt="HTML Best Practices" src="/img/logo.png">
1205 | 
1206 | 
1207 | ### 가능한 경우 `alt` 속성을 비워둬라
1208 | 
1209 | 본문을 보충하는 이미지라면, 근처에 동일한 콘텐츠가 있다.
1210 | 
1211 | Bad:
1212 | 
1213 |     <img alt="Question mark icon" src="/img/icon/help.png"> Help
1214 | 
1215 | Good:
1216 | 
1217 |     <img alt="" src="/img/icon/help.png"> Help
1218 | 
1219 | 
1220 | ### 가능한 경우 `alt` 속성을 생략해라
1221 | 
1222 | 때때로 어떤 텍스트가 alt 속성에 적합한 지 모를 수 있다.
1223 | (역주) spec에서 `alt` 속성은 특수한 케이스가 아니라면 필수 속성이므로 빈값으로 넣어주세요.
1224 | 
1225 | Bad:
1226 | 
1227 |     <img alt="CAPTCHA" src="captcha.cgi?id=82174">
1228 | 
1229 | Good:
1230 | 
1231 |     <img src="captcha.cgi?id=82174" title="CAPTCHA">
1232 |     (If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
1233 | 
1234 | 
1235 | ### `iframe` 요소를 비워둬라
1236 | 
1237 | 콘텐츠에 몇가지 제한사항이 있다. 비워두면 항상 안전하다.
1238 | 
1239 | Bad:
1240 | 
1241 |     <iframe src="/ads/default.html">
1242 |       <p>If your browser support inline frame, ads are displayed here.</p>
1243 |     </iframe>
1244 | 
1245 | Good:
1246 | 
1247 |     <iframe src="/ads/default.html"></iframe>
1248 | 
1249 | 
1250 | ### `map` 요소 콘텐츠도 마크업해라
1251 | 
1252 | 스크린 리더의 콘텐츠 프리셋으로 쓰인다.
1253 | 
1254 | Bad:
1255 | 
1256 |     <map name="toc">
1257 |       <a href="#general">General</a>
1258 |       <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1259 |       <a href="#the_root_element">The root element</a>
1260 |       <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1261 |       <a href="#sections">Sections</a>
1262 |       <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1263 |     </map>
1264 | 
1265 | Good:
1266 | 
1267 |     <map name="toc">
1268 |       <p>
1269 |         <a href="#general">General</a>
1270 |         <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1271 |         <a href="#the_root_element">The root element</a>
1272 |         <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1273 |         <a href="#sections">Sections</a>
1274 |         <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1275 |       </p>
1276 |     </map>
1277 | 
1278 | 
1279 | ### `audio`나 `video` 요소를 위한 폴백 콘텐츠를 제공해라.
1280 | 
1281 | HTML5에 새로 추가된 요소들을 위해 폴백 콘텐츠가 필요하다.
1282 | 
1283 | Bad:
1284 | 
1285 |     <video>
1286 |       <source src="/mov/theme.mp4" type="video/mp4">
1287 |       <source src="/mov/theme.ogv" type="video/ogg">
1288 |       ...
1289 |     </video>
1290 | 
1291 | Good:
1292 | 
1293 |     <video>
1294 |       <source src="/mov/theme.mp4" type="video/mp4">
1295 |       <source src="/mov/theme.ogv" type="video/ogg">
1296 |       ...
1297 |       <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
1298 |     </video>
1299 | 
1300 | 
1301 | 테이블 데이터
1302 | ------------
1303 | 
1304 | ### 한 줄에 한 셀만 써라
1305 | 
1306 | 긴 라인은 스캔하기 힘들다.
1307 | 
1308 | Bad:
1309 | 
1310 |     <tr>
1311 |       <td>General</td><td>The root Element</td><td>Sections</td>
1312 |     </tr>
1313 | 
1314 | Good:
1315 | 
1316 |     <tr>
1317 |       <td>General</td>
1318 |       <td>The root Element</td>
1319 |       <td>Sections</td>
1320 |     </tr>
1321 | 
1322 | 
1323 | ### `th` 요소를 헤더 셀로 써라
1324 | 
1325 | 안 쓸 이유가 없다.
1326 | 
1327 | Bad:
1328 | 
1329 |     <table>
1330 |       <thead>
1331 |         <tr>
1332 |           <td><strong>Element</strong></td>
1333 |           <td><strong>Empty</strong></td>
1334 |           <td><strong>Tag omission</strong></td>
1335 |         </tr>
1336 |       </thead>
1337 |       <tbody>
1338 |         <tr>
1339 |           <td><strong><code>pre</code></strong></td>
1340 |           <td>No</td>
1341 |           <td>Neither tag is omissible</td>
1342 |         </tr>
1343 |         <tr>
1344 |           <td><strong><code>img</code></strong></td>
1345 |           <td>Yes</td>
1346 |           <td>No end tag</td>
1347 |         </tr>
1348 |       </tbody>
1349 |     </table>
1350 | 
1351 | Good:
1352 | 
1353 |     <table>
1354 |       <thead>
1355 |         <tr>
1356 |           <th>Element</th>
1357 |           <th>Empty</th>
1358 |           <th>Tag omission</th>
1359 |         </tr>
1360 |       </thead>
1361 |       <tbody>
1362 |         <tr>
1363 |           <th><code>pre</code></th>
1364 |           <td>No</td>
1365 |           <td>Neither tag is omissible</td>
1366 |         </tr>
1367 |         <tr>
1368 |           <th><code>img</code></th>
1369 |           <td>Yes</td>
1370 |           <td>No end tag</td>
1371 |         </tr>
1372 |       </tbody>
1373 |     </table>
1374 | 
1375 | 
1376 | 폼
1377 | -----
1378 | 
1379 | ### 폼 컨트롤을 `label` 요소로 감싸라
1380 | 
1381 | `label` 요소가 폼 요소에 포커스를 주는 데 도움을 준다
1382 | 
1383 | Bad:
1384 | 
1385 |     <p>Query: <input name="q" type="text"></p>
1386 | 
1387 | Good:
1388 | 
1389 |     <p><label>Query: <input name="q" type="text"></label></p>
1390 | 
1391 | 
1392 | ### 가능한 경우 `for` 속성을 생략해라
1393 | 
1394 | `label` 요소는 몇가지 폼 요소를 감쌀 수 있다.
1395 | 
1396 | Bad:
1397 | 
1398 |     <label for="q">Query: </label><input id="q" name="q" type="text">
1399 | 
1400 | Good:
1401 | 
1402 |     <label>Query: <input name="q" type="text"></label>
1403 | 
1404 | 
1405 | ### `input` 요소에 적절한 `type` 속성을 사용해라
1406 | 
1407 | 적절한 `type`을 사용하면, 브라우저에서 `input` 요소에 작은 기능을 제공한다.
1408 | 
1409 | Bad:
1410 | 
1411 |     <label>Search keyword: <input name="q" type="text"></label>
1412 | 
1413 | Good:
1414 | 
1415 |     <label>Search keyword: <input name="q" type="search"></label>
1416 | 
1417 | 
1418 | ### `input type="submit"`에 `value` 속성을 넣어라
1419 | 
1420 | submit 버튼의 기본 레이블은 브라우저 및 언어 사이 표준이 없다.
1421 | 
1422 | Bad:
1423 | 
1424 |     <input type="submit">
1425 | 
1426 | Good:
1427 | 
1428 |     <input type="submit" value="Search">
1429 | 
1430 | 
1431 | ### `input` 요소에 `pattern` 속성이 있는 경우 `title` 속성을 추가해라
1432 | 
1433 | 입력한 텍스트가 `pattern` 속성과 매치하지 않는 경우,
1434 | `title` 속성의 값이 힌트가 될거다.
1435 | 
1436 | Bad:
1437 | 
1438 |     <input name="security-code" pattern="[0-9]{3}" type="text">
1439 | 
1440 | Good:
1441 | 
1442 |     <input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
1443 | 
1444 | 
1445 | ### 레이블하기 위해 `placeholder` 속성을 쓰지 마라
1446 | 
1447 | `label` 요소가 레이블을 위한 요소고, `placeholder` 속성은 짧은 힌트를 위한 속성이다.
1448 | 
1449 | Bad:
1450 | 
1451 |     <input name="email" placeholder="Email" type="text">
1452 | 
1453 | Good:
1454 | 
1455 |     <label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
1456 | 
1457 | 
1458 | ### 한 줄에 한 `option` 요소만 사용해라
1459 | 
1460 | 긴 라인은 읽기 힘들다.
1461 | 
1462 | Bad:
1463 | 
1464 |     <datalist id="toc">
1465 |       <option label="General"><option label="The root element"><option label="Sections">
1466 |     </datalist>
1467 | 
1468 | Good:
1469 | 
1470 |     <datalist id="toc">
1471 |       <option label="General">
1472 |       <option label="The root element">
1473 |       <option label="Sections">
1474 |     </datalist>
1475 | 
1476 | 
1477 | ### `progress` 요소에 `max` 속성을 추가해라
1478 | 
1479 | `max` 속성을 통해, `value` 속성을 쉬운 포맷으로 쓸 수 있다.
1480 | 
1481 | Bad:
1482 | 
1483 |     <progress value="0.5"> 50%</progress>
1484 | 
1485 | Good:
1486 | 
1487 |     <progress max="100" value="50"> 50%</progress>
1488 | 
1489 | 
1490 | ### `meter` 요소에 `min`, `max` 속성을 추가해라
1491 | 
1492 | `min`, `max` 속성을 통해, `value` 속성을 쉬운 포맷으로 쓸 수 있다.
1493 | 
1494 | Bad:
1495 | 
1496 |     <meter value="0.5"> 512GB used (1024GB total)</meter>
1497 | 
1498 | Good:
1499 | 
1500 |     <meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
1501 | 
1502 | 
1503 | ### `legend` 요소를 `fieldset` 요소의 첫번째 자식으로 둬라.
1504 | 
1505 | 스펙 필수 사항이다.
1506 | 
1507 | Bad:
1508 | 
1509 |     <fieldset>
1510 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1511 |       ...
1512 |       <legend>About "General"</legend>
1513 |     </fieldset>
1514 | 
1515 | Good:
1516 | 
1517 |     <fieldset>
1518 |       <legend>About "General"</legend>
1519 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1520 |       ...
1521 |     </fieldset>
1522 | 
1523 | 
1524 | 스크립트
1525 | ---------
1526 | 
1527 | ### 자바스크립트를 위한 `type` 속성을 생략해라
1528 | 
1529 | HTML5에서, `script` 요소의 기본 `type` 속성값은 `text/javascript`다.
1530 | 
1531 | Bad:
1532 | 
1533 |     <script type="text/javascript">
1534 |       ...
1535 |     </script>
1536 | 
1537 | Good:
1538 | 
1539 |     <script>
1540 |       ...
1541 |     </script>
1542 | 
1543 | 
1544 | ### `script` 요소의 내용을 주석처리하지 마라
1545 | 
1546 | 이는 오랜 브라우저를 위한 것이다.
1547 | 
1548 | Bad:
1549 | 
1550 |     <script>
1551 |     /*<![CDATA[*/
1552 |       ...
1553 |     /*]]>*/
1554 |     </script>
1555 | 
1556 | Also bad:
1557 | 
1558 |     <script>
1559 |     <!--
1560 |       ...
1561 |     // -->
1562 |     </script>
1563 | 
1564 | Good:
1565 | 
1566 |     <script>
1567 |       ...
1568 |     </script>
1569 | 
1570 | 
1571 | ### 스크립트가 삽입된 `script` 요소를 쓰지 마라
1572 | 
1573 | `async` 속성은 성능면으로나 단순성면으로나 최고다.
1574 | 
1575 | Bad:
1576 | 
1577 |     <script>
1578 |       var script = document.createElement("script");
1579 |       script.async = true;
1580 |       script.src = "//example.com/widget.js";
1581 |       document.getElementsByTagName("head")[0].appendChild(script);
1582 |     </script>
1583 | 
1584 | Good:
1585 | 
1586 |     <script async defer src="//example.com/widget.js"></script>
1587 | 
1588 | 
1589 | 기타
1590 | -----
1591 | 
1592 | ### 일관된 들여쓰기
1593 | 
1594 | 일관성은 가독성에 중요하다.
1595 | 
1596 | Bad:
1597 | 
1598 |     <html>
1599 |     	<head>
1600 |     	  ...
1601 |     	</head>
1602 |       <body>
1603 |         ...
1604 |       </body>
1605 |     </html>
1606 | 
1607 | Good:
1608 | 
1609 |     <html>
1610 |       <head>
1611 |         ...
1612 |       </head>
1613 |       <body>
1614 |         ...
1615 |       </body>
1616 |     </html>
1617 | 
1618 | 
1619 | ### 내부 링크에 절대 경로를 사용해라
1620 | 
1621 | 절대 경로는 인터넷 연결 없이도 localhost에서도 동작한다.
1622 | 
1623 | Bad:
1624 | 
1625 |     <link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
1626 |     ...
1627 |     <p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
1628 | 
1629 | Good:
1630 | 
1631 |     <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
1632 |     ...
1633 |     <p>You can find more at <a href="/contact.html">contact page</a>.</p>
1634 | 
1635 | 
1636 | Contributors
1637 | ------------
1638 | 
1639 | - [@hail2u]
1640 | - [@momdo]
1641 | - [@techhtml]
1642 | 
1643 | 
1644 | License
1645 | -------
1646 | 
1647 | [CC0]
1648 | 
1649 | 
1650 | [@hail2u]: https://github.com/hail2u
1651 | [@momdo]:  https://github.com/momdo
1652 | [@techhtml]:  https://github.com/techhtml
1653 | [CC0]:     http://creativecommons.org/publicdomain/zero/1.0/
1654 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
   1 | Translations: [English (en)](README.md) · [日本語 (ja)](README.ja.md) · [한국어 (ko)](README.ko.md)
   2 | 
   3 | HTML Best Practices
   4 | ===================
   5 | 
   6 | For writing maintainable and scalable HTML documents
   7 | 
   8 | <!-- #toc -->
   9 | 
  10 | * [General](#general)
  11 |   * [Start with DOCTYPE](#start-with-doctype)
  12 |   * [Don’t use legacy or obsolete DOCTYPE](#dont-use-legacy-or-obsolete-doctype)
  13 |   * [Don’t use XML Declaration](#dont-use-xml-declaration)
  14 |   * [Don’t use character references as much as possible](#dont-use-character-references-as-much-as-possible)
  15 |   * [Escape `&`, `<`, `>`, `"`, and `'` with named character references](#escape-----and--with-named-character-references)
  16 |   * [Use numeric character references for control or invisible characters](#use-numeric-character-references-for-control-or-invisible-characters)
  17 |   * [Put white spaces around comment contents](#put-white-spaces-around-comment-contents)
  18 |   * [Don’t omit closing tag](#dont-omit-closing-tag)
  19 |   * [Don’t mix empty element format](#dont-mix-empty-element-format)
  20 |   * [Don’t put white spaces around tags and attribute values](#dont-put-white-spaces-around-tags-and-attribute-values)
  21 |   * [Don’t mix character cases](#dont-mix-character-cases)
  22 |   * [Don’t mix quotation marks](#dont-mix-quotation-marks)
  23 |   * [Don’t separate attributes with two or more white spaces](#dont-separate-attributes-with-two-or-more-white-spaces)
  24 |   * [Omit boolean attribute value](#omit-boolean-attribute-value)
  25 |   * [Omit namespaces](#omit-namespaces)
  26 |   * [Don’t use XML attributes](#dont-use-xml-attributes)
  27 |   * [Don’t mix `data-*`, Microdata, and RDFa Lite attributes with common attributes](#dont-mix-data--microdata-and-rdfa-lite-attributes-with-common-attributes)
  28 |   * [Prefer default implicit ARIA semantics](#prefer-default-implicit-aria-semantics)
  29 | * [The root element](#the-root-element)
  30 |   * [Add `lang` attribute](#add-lang-attribute)
  31 |   * [Keep `lang` attribute value as short as possible](#keep-lang-attribute-value-as-short-as-possible)
  32 |   * [Avoid `data-*` as much as possible](#avoid-data--as-much-as-possible)
  33 | * [Document metadata](#document-metadata)
  34 |   * [Add `title` element](#add-title-element)
  35 |   * [Don’t use `base` element](#dont-use-base-element)
  36 |   * [Specify MIME type of minor linked resources](#specify-mime-type-of-minor-linked-resources)
  37 |   * [Don’t link to `favicon.ico`](#dont-link-to-faviconico)
  38 |   * [Add `title` attribute to alternate stylesheets](#add-title-attribute-to-alternate-stylesheets)
  39 |   * [For URL, use `link` element](#for-url-use-link-element)
  40 |   * [Specify document character encoding](#specify-document-character-encoding)
  41 |   * [Don’t use legacy character encoding format](#dont-use-legacy-character-encoding-format)
  42 |   * [Specify character encoding at first](#specify-character-encoding-at-first)
  43 |   * [Use UTF-8](#use-utf-8)
  44 |   * [Omit `type` attribute for CSS](#omit-type-attribute-for-css)
  45 |   * [Don’t comment out contents of `style` element](#dont-comment-out-contents-of-style-element)
  46 |   * [Don’t mix tag for CSS and JavaScript](#dont-mix-tag-for-css-and-javascript)
  47 | * [Sections](#sections)
  48 |   * [Add `body` element](#add-body-element)
  49 |   * [Forget about `hgroup` element](#forget-about-hgroup-element)
  50 |   * [Use `address` element only for contact information](#use-address-element-only-for-contact-information)
  51 | * [Grouping content](#grouping-content)
  52 |   * [Don’t start with newline in `pre` element](#dont-start-with-newline-in-pre-element)
  53 |   * [Use appropriate element in `blockquote` element](#use-appropriate-element-in-blockquote-element)
  54 |   * [Don’t include attribution directly in `blockquote` element](#dont-include-attribution-directly-in-blockquote-element)
  55 |   * [Write one list item per line](#write-one-list-item-per-line)
  56 |   * [Use `type` attribute for `ol` element](#use-type-attribute-for-ol-element)
  57 |   * [Don’t use `dl` for dialogue](#dont-use-dl-for-dialogue)
  58 |   * [Place `figcaption` element as first or last child of `figure` element](#place-figcaption-element-as-first-or-last-child-of-figure-element)
  59 |   * [Use `main` element](#use-main-element)
  60 |   * [Avoid `div` element as much as possible](#avoid-div-element-as-much-as-possible)
  61 | * [Text-level semantics](#text-level-semantics)
  62 |   * [Don’t split same link that can be grouped](#dont-split-same-link-that-can-be-grouped)
  63 |   * [Use `download` attribute for downloading a resource](#use-download-attribute-for-downloading-a-resource)
  64 |   * [Use `rel`, `hreflang`, and `type` attribute if needed](#use-rel-hreflang-and-type-attribute-if-needed)
  65 |   * [Clear link text](#clear-link-text)
  66 |   * [Don’t use `em` element for warning or caution](#dont-use-em-element-for-warning-or-caution)
  67 |   * [Avoid `s`, `i`, `b`, and `u` element as much as possible](#avoid-s-i-b-and-u-element-as-much-as-possible)
  68 |   * [Don’t put quotes to `q` element](#dont-put-quotes-to-q-element)
  69 |   * [Add `title` attribute to `abbr` element](#add-title-attribute-to-abbr-element)
  70 |   * [Markup `ruby` element verbosely](#markup-ruby-element-verbosely)
  71 |   * [Add `datetime` attribute to non-machine-readable `time` element](#add-datetime-attribute-to-non-machine-readable-time-element)
  72 |   * [Specify code language with `class` attribute prefixed with `language-`](#specify-code-language-with-class-attribute-prefixed-with-language-)
  73 |   * [Keep `kbd` element as simple as possible](#keep-kbd-element-as-simple-as-possible)
  74 |   * [Avoid `span` element as much as possible](#avoid-span-element-as-much-as-possible)
  75 |   * [Break after `br` element](#break-after-br-element)
  76 |   * [Don’t use `br` element only for presentational purpose](#dont-use-br-element-only-for-presentational-purpose)
  77 | * [Edits](#edits)
  78 |   * [Don’t stride `ins` and `del` element over other elements](#dont-stride-ins-and-del-element-over-other-elements)
  79 | * [Embedded content](#embedded-content)
  80 |   * [Provide fallback `img` element for `picture` element](#provide-fallback-img-element-for-picture-element)
  81 |   * [Add `alt` attrbute to `img` element if needed](#add-alt-attrbute-to-img-element-if-needed)
  82 |   * [Empty `alt` attribute if possible](#empty-alt-attribute-if-possible)
  83 |   * [Omit `alt` attribute if possible](#omit-alt-attribute-if-possible)
  84 |   * [Empty `iframe` element](#empty-iframe-element)
  85 |   * [Markup `map` element content](#markup-map-element-content)
  86 |   * [Provide fallback content for `audio` or `video` element](#provide-fallback-content-for-audio-or-video-element)
  87 | * [Tabular data](#tabular-data)
  88 |   * [Write one cell per line](#write-one-cell-per-line)
  89 |   * [Use `th` element for header cell](#use-th-element-for-header-cell)
  90 | * [Forms](#forms)
  91 |   * [Wrap form control with `label` element](#wrap-form-control-with-label-element)
  92 |   * [Omit `for` attribute if possible](#omit-for-attribute-if-possible)
  93 |   * [Use appropriate `type` attribute for `input` element](#use-appropriate-type-attribute-for-input-element)
  94 |   * [Add `value` attribute to `input type="submit"`](#add-value-attribute-to-input-typesubmit)
  95 |   * [Add `title` attribute to `input` element when there is `pattern` attribute](#add-title-attribute-to-input-element-when-there-is-pattern-attribute)
  96 |   * [Don’t use `placeholder` attribute for labeling](#dont-use-placeholder-attribute-for-labeling)
  97 |   * [Write one `option` element per line](#write-one-option-element-per-line)
  98 |   * [Add `max` attribute to `progress` element](#add-max-attribute-to-progress-element)
  99 |   * [Add `min` and `max` attribute to `meter` element](#add-min-and-max-attribute-to-meter-element)
 100 |   * [Place `legend` element as the first child of `fieldset` element](#place-legend-element-as-the-first-child-of-fieldset-element)
 101 | * [Scripting](#scripting)
 102 |   * [Omit `type` attribute for JavaScript](#omit-type-attribute-for-javascript)
 103 |   * [Don’t comment out contents of `script` element](#dont-comment-out-contents-of-script-element)
 104 |   * [Don’t use script-injected `script` element](#dont-use-script-injected-script-element)
 105 | * [Other](#other)
 106 |   * [Indent consistently](#indent-consistently)
 107 |   * [Use absolute path for internal links](#use-absolute-path-for-internal-links)
 108 | * [Contributors](#contributors)
 109 | * [License](#license)
 110 | 
 111 | <!-- /toc -->
 112 | 
 113 | 
 114 | General
 115 | -------
 116 | 
 117 | ### Start with DOCTYPE
 118 | 
 119 | DOCTYPE is required for activating standard mode.
 120 | 
 121 | Bad:
 122 | 
 123 |     <html>
 124 |       ...
 125 |     </html>
 126 | 
 127 | Good:
 128 | 
 129 |     <!DOCTYPE html>
 130 |     <html>
 131 |       ...
 132 |     </html>
 133 | 
 134 | 
 135 | ### Don’t use legacy or obsolete DOCTYPE
 136 | 
 137 | DOCTYPE is not for DTD anymore, be simple.
 138 | 
 139 | Bad:
 140 | 
 141 |     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 142 |       "http://www.w3.org/TR/html4/strict.dtd">
 143 | 
 144 | Good:
 145 | 
 146 |     <!DOCTYPE html>
 147 | 
 148 | 
 149 | ### Don’t use XML Declaration
 150 | 
 151 | Are you sure you want to write XHTML?
 152 | 
 153 | Bad:
 154 | 
 155 |     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 156 |     <!DOCTYPE html>
 157 | 
 158 | Good:
 159 | 
 160 |     <!DOCTYPE html>
 161 | 
 162 | 
 163 | ### Don’t use character references as much as possible
 164 | 
 165 | If you write an HTML document with UTF-8, almost all charaters (including Emoji)
 166 | can be write directly.
 167 | 
 168 | Bad:
 169 | 
 170 |     <p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
 171 | 
 172 | Good:
 173 | 
 174 |     <p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
 175 | 
 176 | 
 177 | ### Escape `&`, `<`, `>`, `"`, and `'` with named character references
 178 | 
 179 | These characters should escape always for a bug-free HTML document.
 180 | 
 181 | Bad:
 182 | 
 183 |     <h1>The "&" character</h1>
 184 | 
 185 | Good:
 186 | 
 187 |     <h1>The &quot;&amp;&quot; character</h1>
 188 | 
 189 | 
 190 | ### Use numeric character references for control or invisible characters
 191 | 
 192 | These characters are easily mistaken for another character. And also spec does
 193 | not guarantee to define a human readable name for these characters.
 194 | 
 195 | Bad:
 196 | 
 197 |     <p>This book can read in 1 hour.</p>
 198 | 
 199 | Good:
 200 | 
 201 |     <p>This book can read in 1&#xA0;hour.</p>
 202 | 
 203 | 
 204 | ### Put white spaces around comment contents
 205 | 
 206 | Some character cannot be used immediately after comment open tag or before
 207 | comment close tag.
 208 | 
 209 | Bad:
 210 | 
 211 |     <!--This section is non-normative-->
 212 | 
 213 | Good:
 214 | 
 215 |     <!-- This section is non-normative -->
 216 | 
 217 | 
 218 | ### Don’t omit closing tag
 219 | 
 220 | I think you don’t understand a rule for omitting closing tag.
 221 | 
 222 | Bad:
 223 | 
 224 |     <html>
 225 |       <body>
 226 |         ...
 227 | 
 228 | Good:
 229 | 
 230 |     <html>
 231 |       <body>
 232 |         ...
 233 |       </body>
 234 |     </html>
 235 | 
 236 | 
 237 | ### Don’t mix empty element format
 238 | 
 239 | Consistency is a key for readability.
 240 | 
 241 | Bad:
 242 | 
 243 |     <img alt="HTML Best Practices" src="/img/logo.png">
 244 |     <hr />
 245 | 
 246 | Good:
 247 | 
 248 |     <img alt="HTML Best Practices" src="/img/logo.png">
 249 |     <hr>
 250 | 
 251 | 
 252 | ### Don’t put white spaces around tags and attribute values
 253 | 
 254 | There is no reason for doing this.
 255 | 
 256 | Bad:
 257 | 
 258 |     <h1 class=" title " >HTML Best Practices</h1>
 259 | 
 260 | Good:
 261 | 
 262 |     <h1 class="title">HTML Best Practices</h1>
 263 | 
 264 | 
 265 | ### Don’t mix character cases
 266 | 
 267 | It gives a consistency also.
 268 | 
 269 | Bad:
 270 | 
 271 |     <a HREF="#general">General</A>
 272 | 
 273 | Good:
 274 | 
 275 |     <a href="#general">General</a>
 276 | 
 277 | Also Good:
 278 | 
 279 |     <A HREF="#general">General</A>
 280 | 
 281 | 
 282 | ### Don’t mix quotation marks
 283 | 
 284 | Same as above.
 285 | 
 286 | Bad:
 287 | 
 288 |     <img alt="HTML Best Practices" src='/img/logo.jpg'>
 289 | 
 290 | Good:
 291 | 
 292 |     <img alt="HTML Best Practices" src="/img/logo.jpg">
 293 | 
 294 | 
 295 | ### Don’t separate attributes with two or more white spaces
 296 | 
 297 | Your weird formatting rule confuses someone.
 298 | 
 299 | Bad:
 300 | 
 301 |     <input   name="q"  type="search">
 302 | 
 303 | Good:
 304 | 
 305 |     <input name="q" type="search">
 306 | 
 307 | 
 308 | ### Omit boolean attribute value
 309 | 
 310 | It’s easy to write, isn’t it?
 311 | 
 312 | Bad:
 313 | 
 314 |     <audio autoplay="autoplay" src="/audio/theme.mp3">
 315 | 
 316 | Good:
 317 | 
 318 |     <audio autoplay src="/audio/theme.mp3">
 319 | 
 320 | 
 321 | ### Omit namespaces
 322 | 
 323 | SVG and MathML can be used directly in an HTML5 document.
 324 | 
 325 | Bad:
 326 | 
 327 |     <svg xmlns="http://www.w3.org/2000/svg">
 328 |       ...
 329 |     </svg>
 330 | 
 331 | Good:
 332 | 
 333 |     <svg>
 334 |       ...
 335 |     </svg>
 336 | 
 337 | 
 338 | ### Don’t use XML attributes
 339 | 
 340 | We write an HTML document.
 341 | 
 342 | Bad:
 343 | 
 344 |     <span lang="ja" xml:lang="ja">...</span>
 345 | 
 346 | Good:
 347 | 
 348 |     <span lang="ja">...</span>
 349 | 
 350 | 
 351 | ### Don’t mix `data-*`, Microdata, and RDFa Lite attributes with common attributes
 352 | 
 353 | A tag string can be very complicated. This simple rule helps reading such tag
 354 | string.
 355 | 
 356 | Bad:
 357 | 
 358 |     <img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
 359 | 
 360 | Good:
 361 | 
 362 |     <img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
 363 | 
 364 | 
 365 | ### Prefer default implicit ARIA semantics
 366 | 
 367 | Some element has an ARIA `role` implicitly in an HTML document, don’t specify it.
 368 | 
 369 | Bad:
 370 | 
 371 |     <nav role="navigation">
 372 |       ...
 373 |     </nav>
 374 |     
 375 |     <hr role="separator">
 376 | 
 377 | Good:
 378 | 
 379 |     <nav>
 380 |       ...
 381 |     </nav>
 382 |     
 383 |     <hr>
 384 | 
 385 | 
 386 | The root element
 387 | ----------------
 388 | 
 389 | ### Add `lang` attribute
 390 | 
 391 | `lang` attribute will help translating an HTML document.
 392 | 
 393 | Bad:
 394 | 
 395 |     <html>
 396 | 
 397 | Good:
 398 | 
 399 |     <html lang="en-US">
 400 | 
 401 | 
 402 | ### Keep `lang` attribute value as short as possible
 403 | 
 404 | Japanese is only used in Japan. So country code is not necessary.
 405 | 
 406 | Bad:
 407 | 
 408 |     <html lang="ja-JP">
 409 | 
 410 | Good:
 411 | 
 412 |     <html lang="ja">
 413 | 
 414 | 
 415 | ### Avoid `data-*` as much as possible
 416 | 
 417 | An appropriate attribute can be handled properly by browsers.
 418 | 
 419 | Bad:
 420 | 
 421 |     <span data-language="french">chemises</span>
 422 |     ...
 423 |     <strong data-type="warning">Do not wash!</strong>
 424 | 
 425 | Good:
 426 | 
 427 |     <span title="French"><span lang="fr-FR">chemises</span></span>
 428 |     ...
 429 |     <strong class="warning">Do not wash!</strong>
 430 | 
 431 | 
 432 | Document metadata
 433 | -----------------
 434 | 
 435 | ### Add `title` element
 436 | 
 437 | A value for `title` element is used by various application not only a browser.
 438 | 
 439 | Bad:
 440 | 
 441 |     <head>
 442 |       <meta charset="UTF-8">
 443 |     </head>
 444 | 
 445 | Good:
 446 | 
 447 |     <head>
 448 |       <meta charset="UTF-8">
 449 |       <title>HTML Best Practices</title>
 450 |     </head>
 451 | 
 452 | 
 453 | ### Don’t use `base` element
 454 | 
 455 | An absolute path or URL is safer for both developers and users.
 456 | 
 457 | Bad:
 458 | 
 459 |     <head>
 460 |       ...
 461 |       <base href="/blog/">
 462 |       <link href="hello-world" rel="canonical">
 463 |       ...
 464 |     </head>
 465 | 
 466 | Good:
 467 | 
 468 |     <head>
 469 |       ...
 470 |       <link href="/blog/hello-world" rel="canonical">
 471 |       ...
 472 |     </head>
 473 | 
 474 | 
 475 | ### Specify MIME type of minor linked resources
 476 | 
 477 | This is a hint how application handles this resource.
 478 | 
 479 | Bad:
 480 | 
 481 |     <link href="/pdf" rel="alternate">
 482 |     <link href="/feed" rel="alternate">
 483 |     <link href="/css/screen.css" rel="stylesheet">
 484 | 
 485 | Good:
 486 | 
 487 |     <link href="/pdf" rel="alternate" type="application/pdf">
 488 |     <link href="/feed" rel="alternate" type="application/rss+xml">
 489 |     <link href="/css/screen.css" rel="stylesheet">
 490 | 
 491 | 
 492 | ### Don’t link to `favicon.ico`
 493 | 
 494 | Almost all browsers fetch `/favicon.ico` automatically and asynchronously.
 495 | 
 496 | Bad:
 497 | 
 498 |     <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
 499 | 
 500 | Good:
 501 | 
 502 |     <!-- Place `favicon.ico` in the root directory. -->
 503 | 
 504 | 
 505 | ### Add `title` attribute to alternate stylesheets
 506 | 
 507 | A human readable label helps people selecting proper stylesheet.
 508 | 
 509 | Bad:
 510 | 
 511 |     <link href="/css/screen.css" rel="stylesheet">
 512 |     <link href="/css/high-contrast.css" rel="alternate stylesheet">
 513 | 
 514 | Good:
 515 | 
 516 |     <link href="/css/screen.css" rel="stylesheet">
 517 |     <link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
 518 | 
 519 | 
 520 | ### For URL, use `link` element
 521 | 
 522 | A value of `href` attribute can be resolved as URL.
 523 | 
 524 | Bad:
 525 | 
 526 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 527 |       <meta content="https://example.com/blog/hello" itemprop="url">
 528 |       ...
 529 |     </section>
 530 | 
 531 | Good:
 532 | 
 533 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 534 |       <link href="/blog/hello" itemprop="url">
 535 |       ...
 536 |     </section>
 537 | 
 538 | 
 539 | ### Specify document character encoding
 540 | 
 541 | UTF-8 is not default in all browsers yet.
 542 | 
 543 | Bad:
 544 | 
 545 |     <head>
 546 |       <title>HTML Best Practices</title>
 547 |     </head>
 548 | 
 549 | Good:
 550 | 
 551 |     <head>
 552 |       <meta charset="UTF-8">
 553 |       <title>HTML Best Practices</title>
 554 |     </head>
 555 | 
 556 | 
 557 | ### Don’t use legacy character encoding format
 558 | 
 559 | HTTP headers should be specified by a server, be simple.
 560 | 
 561 | Bad:
 562 | 
 563 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 564 | 
 565 | Good:
 566 | 
 567 |     <meta charset="UTF-8">
 568 | 
 569 | 
 570 | ### Specify character encoding at first
 571 | 
 572 | Spec requires the character encoding is specified within the first 1024 bytes of
 573 | the document.
 574 | 
 575 | Bad:
 576 | 
 577 |     <head>
 578 |       <meta content="width=device-width" name="viewport">
 579 |       <meta charset="UTF-8">
 580 |       ...
 581 |     </head>
 582 | 
 583 | Good:
 584 | 
 585 |     <head>
 586 |       <meta charset="UTF-8">
 587 |       <meta content="width=device-width" name="viewport">
 588 |       ...
 589 |     </head>
 590 | 
 591 | 
 592 | ### Use UTF-8
 593 | 
 594 | With UTF-8, you can free to use Emoji.
 595 | 
 596 | Bad:
 597 | 
 598 |     <meta charset="Shift_JIS">
 599 | 
 600 | Good:
 601 | 
 602 |     <meta charset="UTF-8">
 603 | 
 604 | 
 605 | ### Omit `type` attribute for CSS
 606 | 
 607 | In HTML5, default `type` attribute’s value of `style` element is `text/css`.
 608 | 
 609 | Bad:
 610 | 
 611 |     <style type="text/css">
 612 |       ...
 613 |     </style>
 614 | 
 615 | Good:
 616 | 
 617 |     <style>
 618 |       ...
 619 |     </style>
 620 | 
 621 | 
 622 | ### Don’t comment out contents of `style` element
 623 | 
 624 | This ritual is for the old browser.
 625 | 
 626 | Bad:
 627 | 
 628 |     <style>
 629 |     <!--
 630 |       ...
 631 |       -->
 632 |     </style>
 633 | 
 634 | Good:
 635 | 
 636 |     <style>
 637 |       ...
 638 |     </style>
 639 | 
 640 | 
 641 | ### Don’t mix tag for CSS and JavaScript
 642 | 
 643 | Sometimes `script` element blocks DOM construction.
 644 | 
 645 | Bad:
 646 | 
 647 |     <script src="/js/jquery.min.js"></script>
 648 |     <link href="/css/screen.css" rel="stylesheet">
 649 |     <script src="/js/main.js"></script>
 650 | 
 651 | Good:
 652 | 
 653 |     <link href="/css/screen.css" rel="stylesheet">
 654 |     <script src="/js/jquery.min.js"></script>
 655 |     <script src="/js/main.js"></script>
 656 | 
 657 | Also good:
 658 | 
 659 |     <script src="/js/jquery.min.js"></script>
 660 |     <script src="/js/main.js"></script>
 661 |     <link href="/css/screen.css" rel="stylesheet">
 662 | 
 663 | 
 664 | Sections
 665 | --------
 666 | 
 667 | ### Add `body` element
 668 | 
 669 | Sometimes `body` element is complemented in unexpected position by a browser.
 670 | 
 671 | Bad:
 672 | 
 673 |     <html>
 674 |       <head>
 675 |         ...
 676 |       </head>
 677 |       ...
 678 |     </html>
 679 | 
 680 | Good:
 681 | 
 682 |     <html>
 683 |       <head>
 684 |         ...
 685 |       </head>
 686 |       <body>
 687 |         ...
 688 |       </body>
 689 |     </html>
 690 | 
 691 | 
 692 | ### Forget about `hgroup` element
 693 | 
 694 | W3C spec removes this element.
 695 | 
 696 | Bad:
 697 | 
 698 |     <hgroup>
 699 |       <h1>HTML Best Practices</h1>
 700 |       <h2>For writing maintainable and scalable HTML documents.</h2>
 701 |     </hgroup>
 702 | 
 703 | Good:
 704 | 
 705 |     <h1>HTML Best Practices</h1>
 706 |     <p>For writing maintainable and scalable HTML documents.</p>
 707 | 
 708 | 
 709 | ### Use `address` element only for contact information
 710 | 
 711 | `address` element is for email address, social network account, street address,
 712 | telephone number, or something you can get in touch with.
 713 | 
 714 | Bad:
 715 | 
 716 |     <address>No rights reserved.</address>
 717 | 
 718 | Good:
 719 | 
 720 |     <address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
 721 | 
 722 | 
 723 | Grouping content
 724 | ----------------
 725 | 
 726 | ### Don’t start with newline in `pre` element
 727 | 
 728 | A first newline will ignored in the browsers, but second and later are rendered.
 729 | 
 730 | Bad:
 731 | 
 732 |     <pre>
 733 |     &lt;!DOCTYPE html&gt;
 734 |     </pre>
 735 | 
 736 | Good:
 737 | 
 738 |     <pre>&lt;!DOCTYPE html&gt;
 739 |     </pre>
 740 | 
 741 | 
 742 | ### Use appropriate element in `blockquote` element
 743 | 
 744 | `blockquote` element’s content is a quote, not a chunks of characters.
 745 | 
 746 | Bad:
 747 | 
 748 |     <blockquote>For writing maintainable and scalable HTML documents.</blockquote>
 749 | 
 750 | Good:
 751 | 
 752 |     <blockquote>
 753 |       <p>For writing maintainable and scalable HTML documents.</p>
 754 |     </blockquote>
 755 | 
 756 | 
 757 | ### Don’t include attribution directly in `blockquote` element
 758 | 
 759 | `blockquote` element’s content is a quote.
 760 | 
 761 | Bad:
 762 | 
 763 |     <blockquote>
 764 |       <p>For writing maintainable and scalable HTML documents.</p>
 765 | 
 766 |       <p>— HTML Best Practices</p>
 767 |     </blockquote>
 768 | 
 769 | Good:
 770 | 
 771 |     <blockquote>
 772 |       <p>For writing maintainable and scalable HTML documents.</p>
 773 |     </blockquote>
 774 |     
 775 |     <p>— HTML Best Practices</p>
 776 | 
 777 | Also good (recommended by WHATWG):
 778 | 
 779 |     <figure>
 780 |       <blockquote>
 781 |         <p>For writing maintainable and scalable HTML documents.</p>
 782 |       </blockquote>
 783 |     
 784 |       <figcaption>— HTML Best Practices</figcaption>
 785 |     </figure>
 786 | 
 787 | Also good too (recommended by W3C):
 788 | 
 789 |     <blockquote>
 790 |       <p>For writing maintainable and scalable HTML documents.</p>
 791 |     
 792 |       <footer>— HTML Best Practices</footer>
 793 |     </blockquote>
 794 | 
 795 | 
 796 | ### Write one list item per line
 797 | 
 798 | Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong
 799 | line is hard toooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo read.
 800 | 
 801 | Bad:
 802 | 
 803 |     <ul>
 804 |       <li>General</li><li>The root Element</li><li>Sections</li>...
 805 |     </ul>
 806 | 
 807 | Good:
 808 | 
 809 |     <ul>
 810 |       <li>General</li>
 811 |       <li>The root Element</li>
 812 |       <li>Sections</li>
 813 |       ...
 814 |     </ul>
 815 | 
 816 | 
 817 | ### Use `type` attribute for `ol` element
 818 | 
 819 | Sometimes marker referenced by the contents in the near. If you change marker
 820 | with `type` attribute, you will be safe to reference.
 821 | 
 822 | Bad:
 823 | 
 824 |     <head>
 825 |       <style>
 826 |         .toc {
 827 |           list-style-type: upper-roman;
 828 |         }
 829 |       </style>
 830 |     </head>
 831 |     <body>
 832 |       <ol class="toc">
 833 |         <li>General</li>
 834 |         <li>The root Element</li>
 835 |         <li>Sections</li>
 836 |         ...
 837 |       </ol>
 838 |     </body>
 839 | 
 840 | Good:
 841 | 
 842 |     <body>
 843 |       <ol type="I">
 844 |         <li>General</li>
 845 |         <li>The root Element</li>
 846 |         <li>Sections</li>
 847 |         ...
 848 |       </ol>
 849 |     </body>
 850 | 
 851 | 
 852 | ### Don’t use `dl` for dialogue
 853 | 
 854 | `dl` element is restricted to an association list in HTML5.
 855 | 
 856 | Bad:
 857 | 
 858 |     <dl>
 859 |       <dt>Costello</dt>
 860 |       <dd>Look, you gotta first baseman?</dd>
 861 |       <dt>Abbott</dt>
 862 |       <dd>Certainly.</dd>
 863 |       <dt>Costello</dt>
 864 |       <dd>Who’s playing first?</dd>
 865 |       <dt>Abbott</dt>
 866 |       <dd>That’s right.</dd>
 867 |       <dt>Costello becomes exasperated.</dd>
 868 |       <dt>Costello</dt>
 869 |       <dd>When you pay off the first baseman every month, who gets the money?</dd>
 870 |       <dt>Abbott</dt>
 871 |       <dd>Every dollar of it.</dd>
 872 |     </dl>
 873 | 
 874 | Good:
 875 | 
 876 |     <p>Costello: Look, you gotta first baseman?</p>
 877 |     <p>Abbott: Certainly.</p>
 878 |     <p>Costello: Who’s playing first?</p>
 879 |     <p>Abbott: That’s right.</p>
 880 |     <p>Costello becomes exasperated.</p>
 881 |     <p>Costello: When you pay off the first baseman every month, who gets the money?</p>
 882 |     <p>Abbott: Every dollar of it.</p>
 883 | 
 884 | 
 885 | ### Place `figcaption` element as first or last child of `figure` element
 886 | 
 887 | Spec (WHATWG version) disallows `figcaption` element in the middle of `figure`
 888 | element.
 889 | 
 890 | Bad:
 891 | 
 892 |     <figure>
 893 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 894 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 895 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 896 |     </figure>
 897 | 
 898 | Good:
 899 | 
 900 |     <figure>
 901 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 902 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 903 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 904 |     </figure>
 905 | 
 906 | 
 907 | ### Use `main` element
 908 | 
 909 | `main` element can be used wrapping contents.
 910 | 
 911 | Bad:
 912 | 
 913 |     <div id="content">
 914 |       ...
 915 |     </div>
 916 | 
 917 | Good:
 918 | 
 919 |     <main>
 920 |       ...
 921 |     </main>
 922 | 
 923 | 
 924 | ### Avoid `div` element as much as possible
 925 | 
 926 | `div` element is an element of last resort.
 927 | 
 928 | Bad:
 929 | 
 930 |     <div class="chapter">
 931 |       ...
 932 |     </div>
 933 | 
 934 | Good:
 935 | 
 936 |     <section>
 937 |       ...
 938 |     </section>
 939 | 
 940 | 
 941 | Text-level semantics
 942 | --------------------
 943 | 
 944 | ### Don’t split same link that can be grouped
 945 | 
 946 | `a` element can wrap almost all elements (except interactive elements like form
 947 | controls and `a` element itself).
 948 | 
 949 | Bad:
 950 | 
 951 |     <h1><a href="https://whatwg.org/">WHATWG</a></h1>
 952 |     
 953 |     <p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
 954 | 
 955 | Good:
 956 | 
 957 |     <a href="https://whatwg.org/">
 958 |       <h1>WHATWG</h1>
 959 |     
 960 |       <p>A community maintaining and evolving HTML since 2004.</p>
 961 |     </a>
 962 | 
 963 | 
 964 | ### Use `download` attribute for downloading a resource
 965 | 
 966 | It will force browsers to download linked resource to the storage.
 967 | 
 968 | Bad:
 969 | 
 970 |     <a href="/downloads/offline.zip">offline version</a>
 971 | 
 972 | Good:
 973 | 
 974 |     <a download href="/downloads/offline.zip">offline version</a>
 975 | 
 976 | 
 977 | ### Use `rel`, `hreflang`, and `type` attribute if needed
 978 | 
 979 | These hints helps applications how handle linked resource.
 980 | 
 981 | Bad:
 982 | 
 983 |     <a href="/ja/pdf">Japanese PDF version</a>
 984 | 
 985 | Good:
 986 | 
 987 |     <a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
 988 | 
 989 | 
 990 | ### Clear link text
 991 | 
 992 | Link text should be the label of its linked resource.
 993 | 
 994 | Bad:
 995 | 
 996 |     <p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
 997 | 
 998 | Good:
 999 | 
1000 |     <p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
1001 | 
1002 | 
1003 | ### Don’t use `em` element for warning or caution
1004 | 
1005 | These are seriousness. So, `strong` element is more appropriate.
1006 | 
1007 | Bad:
1008 | 
1009 |     <em>Caution!</em>
1010 | 
1011 | Good:
1012 | 
1013 |     <strong>Caution!</strong>
1014 | 
1015 | 
1016 | ### Avoid `s`, `i`, `b`, and `u` element as much as possible
1017 | 
1018 | These elements’ semantics is too difficult to humans.
1019 | 
1020 | Bad:
1021 | 
1022 |     <i class="icon-search"></i>
1023 | 
1024 | Good:
1025 | 
1026 |     <span class="icon-search" aria-hidden="true"></span>
1027 | 
1028 | 
1029 | ### Don’t put quotes to `q` element
1030 | 
1031 | Quotes are provided by the browser.
1032 | 
1033 | Bad:
1034 | 
1035 |     <q>“For writing maintainable and scalable HTML documents”</q>
1036 | 
1037 | Good:
1038 | 
1039 |     <q>For writing maintainable and scalable HTML documents</q>
1040 | 
1041 | Also good:
1042 | 
1043 |     “For writing maintainable and scalable HTML documents”
1044 | 
1045 | 
1046 | ### Add `title` attribute to `abbr` element
1047 | 
1048 | There is no other way to represent its expansion.
1049 | 
1050 | Bad:
1051 | 
1052 |     <abbr>HBP</abbr>
1053 | 
1054 | Good:
1055 | 
1056 |     <abbr title="HTML Best Practices">HBP</abbr>
1057 | 
1058 | 
1059 | ### Markup `ruby` element verbosely
1060 | 
1061 | `ruby` element support is not completed across the modern browsers.
1062 | 
1063 | Bad:
1064 | 
1065 |     <ruby>HTML<rt>えいちてぃーえむえる</ruby>
1066 | 
1067 | Good:
1068 | 
1069 |     <ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
1070 | 
1071 | 
1072 | ### Add `datetime` attribute to non-machine-readable `time` element
1073 | 
1074 | When `datetime` attribute does not present, the format of `time` element’s
1075 | content is restricted.
1076 | 
1077 | Bad:
1078 | 
1079 |     <time>Dec 19, 2014</time>
1080 | 
1081 | Good:
1082 | 
1083 |     <time datetime="2014-12-19">Dec 19, 2014</time>
1084 | 
1085 | 
1086 | ### Specify code language with `class` attribute prefixed with `language-`
1087 | 
1088 | This is not a formal way, but spec mentions this.
1089 | 
1090 | Bad:
1091 | 
1092 |     <code>&lt;!DOCTYPE html&gt;</code>
1093 | 
1094 | Good:
1095 | 
1096 |     <code class="language-html">&lt;!DOCTYPE html&gt;</code>
1097 | 
1098 | 
1099 | ### Keep `kbd` element as simple as possible
1100 | 
1101 | Nesting `kbd` element is too difficult to humans.
1102 | 
1103 | Bad:
1104 | 
1105 |     <kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
1106 | 
1107 | Good:
1108 | 
1109 |     <kbd>Ctrl+F5</kbd>
1110 | 
1111 | 
1112 | ### Avoid `span` element as much as possible
1113 | 
1114 | `span` element is an element of last resort.
1115 | 
1116 | Bad:
1117 | 
1118 |     HTML <span class="best">Best</span> Practices
1119 | 
1120 | Good:
1121 | 
1122 |     HTML <em>Best</em> Practices
1123 | 
1124 | 
1125 | ### Break after `br` element
1126 | 
1127 | Line break should be needed where `br` element is used.
1128 | 
1129 | Bad:
1130 | 
1131 |     <p>HTML<br>Best<br>Practices</p>
1132 | 
1133 | Good:
1134 | 
1135 |     <p>HTML<br>
1136 |     Best<br>
1137 |     Practices</p>
1138 | 
1139 | 
1140 | ### Don’t use `br` element only for presentational purpose
1141 | 
1142 | `br` element is not for line breaking, it is for line breaks in the contents.
1143 | 
1144 | Bad:
1145 | 
1146 |     <p><label>Rule name: <input name="rule-name" type="text"></label><br>
1147 |     <label>Rule description:<br>
1148 |     <textarea name="rule-description"></textarea></label></p>
1149 | 
1150 | Good:
1151 | 
1152 |     <p><label>Rule name: <input name="rule-name" type="text"></label></p>
1153 |     <p><label>Rule description:<br>
1154 |     <textarea name="rule-description"></textarea></label></p>
1155 | 
1156 | 
1157 | Edits
1158 | -----
1159 | 
1160 | ### Don’t stride `ins` and `del` element over other elements
1161 | 
1162 | Elements cannot be overflow other elements.
1163 | 
1164 | Bad:
1165 | 
1166 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
1167 |     
1168 |     <p>Don’t trust!</p></del>
1169 | 
1170 | Good:
1171 | 
1172 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
1173 |     
1174 |     <del><p>Don’t trust!</p></del>
1175 | 
1176 | 
1177 | Embedded content
1178 | ----------------
1179 | 
1180 | ### Provide fallback `img` element for `picture` element
1181 | 
1182 | The support of `picture` element is not good yet.
1183 | 
1184 | Bad:
1185 | 
1186 |     <picture>
1187 |       <source srcset="/img/logo.webp" type="image/webp">
1188 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1189 |       <source srcset="/img/logo.jp2" type="image/jp2">
1190 |       <source srcset="/img/logo.jpg" type="image/jpg">
1191 |     </picture>
1192 | 
1193 | Good:
1194 | 
1195 |     <picture>
1196 |       <source srcset="/img/logo.webp" type="image/webp">
1197 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1198 |       <source srcset="/img/logo.jp2" type="image/jp2">
1199 |       <img src="/img/logo.jpg">
1200 |     </picture>
1201 | 
1202 | 
1203 | ### Add `alt` attrbute to `img` element if needed
1204 | 
1205 | `alt` attribute helps those who cannot process images or have image loading
1206 | disabled.
1207 | 
1208 | Bad:
1209 | 
1210 |     <img src="/img/logo.png">
1211 | 
1212 | Good:
1213 | 
1214 |     <img alt="HTML Best Practices" src="/img/logo.png">
1215 | 
1216 | 
1217 | ### Empty `alt` attribute if possible
1218 | 
1219 | If the image is supplemental, there is equivalent content somewhere in the near.
1220 | 
1221 | Bad:
1222 | 
1223 |     <img alt="Question mark icon" src="/img/icon/help.png"> Help
1224 | 
1225 | Good:
1226 | 
1227 |     <img alt="" src="/img/icon/help.png"> Help
1228 | 
1229 | 
1230 | ### Omit `alt` attribute if possible
1231 | 
1232 | Sometimes you don’t know what text is suitable for `alt` attribute.
1233 | 
1234 | Bad:
1235 | 
1236 |     <img alt="CAPTCHA" src="captcha.cgi?id=82174">
1237 | 
1238 | Good:
1239 | 
1240 |     <img src="captcha.cgi?id=82174" title="CAPTCHA">
1241 |     (If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
1242 | 
1243 | 
1244 | ### Empty `iframe` element
1245 | 
1246 | There is some restriction in its content. Being empty is always safe.
1247 | 
1248 | Bad:
1249 | 
1250 |     <iframe src="/ads/default.html">
1251 |       <p>If your browser support inline frame, ads are displayed here.</p>
1252 |     </iframe>
1253 | 
1254 | Good:
1255 | 
1256 |     <iframe src="/ads/default.html"></iframe>
1257 | 
1258 | 
1259 | ### Markup `map` element content
1260 | 
1261 | This content presents to a screen reader.
1262 | 
1263 | Bad:
1264 | 
1265 |     <map name="toc">
1266 |       <a href="#general">General</a>
1267 |       <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1268 |       <a href="#the_root_element">The root element</a>
1269 |       <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1270 |       <a href="#sections">Sections</a>
1271 |       <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1272 |     </map>
1273 | 
1274 | Good:
1275 | 
1276 |     <map name="toc">
1277 |       <p>
1278 |         <a href="#general">General</a>
1279 |         <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1280 |         <a href="#the_root_element">The root element</a>
1281 |         <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1282 |         <a href="#sections">Sections</a>
1283 |         <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1284 |       </p>
1285 |     </map>
1286 | 
1287 | 
1288 | ### Provide fallback content for `audio` or `video` element
1289 | 
1290 | Fallback content is needed for newly introduced elements in HTML5.
1291 | 
1292 | Bad:
1293 | 
1294 |     <video>
1295 |       <source src="/mov/theme.mp4" type="video/mp4">
1296 |       <source src="/mov/theme.ogv" type="video/ogg">
1297 |       ...
1298 |     </video>
1299 | 
1300 | Good:
1301 | 
1302 |     <video>
1303 |       <source src="/mov/theme.mp4" type="video/mp4">
1304 |       <source src="/mov/theme.ogv" type="video/ogg">
1305 |       ...
1306 |       <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
1307 |     </video>
1308 | 
1309 | 
1310 | Tabular data
1311 | ------------
1312 | 
1313 | ### Write one cell per line
1314 | 
1315 | Long lines are hard to scan.
1316 | 
1317 | Bad:
1318 | 
1319 |     <tr>
1320 |       <td>General</td><td>The root Element</td><td>Sections</td>
1321 |     </tr>
1322 | 
1323 | Good:
1324 | 
1325 |     <tr>
1326 |       <td>General</td>
1327 |       <td>The root Element</td>
1328 |       <td>Sections</td>
1329 |     </tr>
1330 | 
1331 | 
1332 | ### Use `th` element for header cell
1333 | 
1334 | There is no reason to avoid this.
1335 | 
1336 | Bad:
1337 | 
1338 |     <table>
1339 |       <thead>
1340 |         <tr>
1341 |           <td><strong>Element</strong></td>
1342 |           <td><strong>Empty</strong></td>
1343 |           <td><strong>Tag omission</strong></td>
1344 |         </tr>
1345 |       </thead>
1346 |       <tbody>
1347 |         <tr>
1348 |           <td><strong><code>pre</code></strong></td>
1349 |           <td>No</td>
1350 |           <td>Neither tag is omissible</td>
1351 |         </tr>
1352 |         <tr>
1353 |           <td><strong><code>img</code></strong></td>
1354 |           <td>Yes</td>
1355 |           <td>No end tag</td>
1356 |         </tr>
1357 |       </tbody>
1358 |     </table>
1359 | 
1360 | Good:
1361 | 
1362 |     <table>
1363 |       <thead>
1364 |         <tr>
1365 |           <th>Element</th>
1366 |           <th>Empty</th>
1367 |           <th>Tag omission</th>
1368 |         </tr>
1369 |       </thead>
1370 |       <tbody>
1371 |         <tr>
1372 |           <th><code>pre</code></th>
1373 |           <td>No</td>
1374 |           <td>Neither tag is omissible</td>
1375 |         </tr>
1376 |         <tr>
1377 |           <th><code>img</code></th>
1378 |           <td>Yes</td>
1379 |           <td>No end tag</td>
1380 |         </tr>
1381 |       </tbody>
1382 |     </table>
1383 | 
1384 | 
1385 | Forms
1386 | -----
1387 | 
1388 | ### Wrap form control with `label` element
1389 | 
1390 | `label` element helps focusing form element.
1391 | 
1392 | Bad:
1393 | 
1394 |     <p>Query: <input name="q" type="text"></p>
1395 | 
1396 | Good:
1397 | 
1398 |     <p><label>Query: <input name="q" type="text"></label></p>
1399 | 
1400 | 
1401 | ### Omit `for` attribute if possible
1402 | 
1403 | `label` element can contain some form elements.
1404 | 
1405 | Bad:
1406 | 
1407 |     <label for="q">Query: </label><input id="q" name="q" type="text">
1408 | 
1409 | Good:
1410 | 
1411 |     <label>Query: <input name="q" type="text"></label>
1412 | 
1413 | 
1414 | ### Use appropriate `type` attribute for `input` element
1415 | 
1416 | With appropriate `type`, browsers gives a tiny features to the `input` element.
1417 | 
1418 | Bad:
1419 | 
1420 |     <label>Search keyword: <input name="q" type="text"></label>
1421 | 
1422 | Good:
1423 | 
1424 |     <label>Search keyword: <input name="q" type="search"></label>
1425 | 
1426 | 
1427 | ### Add `value` attribute to `input type="submit"`
1428 | 
1429 | The default label for submit button is not standarized across the browser and
1430 | languages.
1431 | 
1432 | Bad:
1433 | 
1434 |     <input type="submit">
1435 | 
1436 | Good:
1437 | 
1438 |     <input type="submit" value="Search">
1439 | 
1440 | 
1441 | ### Add `title` attribute to `input` element when there is `pattern` attribute
1442 | 
1443 | If input text does not match to `pattern` attribute, the value of `title`
1444 | attribute will be display as a hint.
1445 | 
1446 | Bad:
1447 | 
1448 |     <input name="security-code" pattern="[0-9]{3}" type="text">
1449 | 
1450 | Good:
1451 | 
1452 |     <input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
1453 | 
1454 | 
1455 | ### Don’t use `placeholder` attribute for labeling
1456 | 
1457 | `label` element is for a label, `placeholder` attribute is for a short hint.
1458 | 
1459 | Bad:
1460 | 
1461 |     <input name="email" placeholder="Email" type="text">
1462 | 
1463 | Good:
1464 | 
1465 |     <label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
1466 | 
1467 | 
1468 | ### Write one `option` element per line
1469 | 
1470 | Long lines are hard to scan.
1471 | 
1472 | Bad:
1473 | 
1474 |     <datalist id="toc">
1475 |       <option label="General"><option label="The root element"><option label="Sections">
1476 |     </datalist>
1477 | 
1478 | Good:
1479 | 
1480 |     <datalist id="toc">
1481 |       <option label="General">
1482 |       <option label="The root element">
1483 |       <option label="Sections">
1484 |     </datalist>
1485 | 
1486 | 
1487 | ### Add `max` attribute to `progress` element
1488 | 
1489 | With `max` attribute, the `value` attribute can be write in an easy format.
1490 | 
1491 | Bad:
1492 | 
1493 |     <progress value="0.5"> 50%</progress>
1494 | 
1495 | Good:
1496 | 
1497 |     <progress max="100" value="50"> 50%</progress>
1498 | 
1499 | 
1500 | ### Add `min` and `max` attribute to `meter` element
1501 | 
1502 | With `min` and `max` attribute, the `value` attribute can be write in an easy
1503 | format.
1504 | 
1505 | Bad:
1506 | 
1507 |     <meter value="0.5"> 512GB used (1024GB total)</meter>
1508 | 
1509 | Good:
1510 | 
1511 |     <meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
1512 | 
1513 | 
1514 | ### Place `legend` element as the first child of `fieldset` element
1515 | 
1516 | Spec requires this.
1517 | 
1518 | Bad:
1519 | 
1520 |     <fieldset>
1521 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1522 |       ...
1523 |       <legend>About "General"</legend>
1524 |     </fieldset>
1525 | 
1526 | Good:
1527 | 
1528 |     <fieldset>
1529 |       <legend>About "General"</legend>
1530 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1531 |       ...
1532 |     </fieldset>
1533 | 
1534 | 
1535 | Scripting
1536 | ---------
1537 | 
1538 | ### Omit `type` attribute for JavaScript
1539 | 
1540 | In HTML5, the default `type` attribute’s value of `script` element is
1541 | `text/javascript`.
1542 | 
1543 | Bad:
1544 | 
1545 |     <script type="text/javascript">
1546 |       ...
1547 |     </script>
1548 | 
1549 | Good:
1550 | 
1551 |     <script>
1552 |       ...
1553 |     </script>
1554 | 
1555 | 
1556 | ### Don’t comment out contents of `script` element
1557 | 
1558 | This ritual is for the old browser.
1559 | 
1560 | Bad:
1561 | 
1562 |     <script>
1563 |     /*<![CDATA[*/
1564 |       ...
1565 |     /*]]>*/
1566 |     </script>
1567 | 
1568 | Also bad:
1569 | 
1570 |     <script>
1571 |     <!--
1572 |       ...
1573 |     // -->
1574 |     </script>
1575 | 
1576 | Good:
1577 | 
1578 |     <script>
1579 |       ...
1580 |     </script>
1581 | 
1582 | 
1583 | ### Don’t use script-injected `script` element
1584 | 
1585 | `async` attribute is the best for both simplicity and performance.
1586 | 
1587 | Bad:
1588 | 
1589 |     <script>
1590 |       var script = document.createElement("script");
1591 |       script.async = true;
1592 |       script.src = "//example.com/widget.js";
1593 |       document.getElementsByTagName("head")[0].appendChild(script);
1594 |     </script>
1595 | 
1596 | Good:
1597 | 
1598 |     <script async defer src="//example.com/widget.js"></script>
1599 | 
1600 | 
1601 | Other
1602 | -----
1603 | 
1604 | ### Indent consistently
1605 | 
1606 | Indentation is important for readability.
1607 | 
1608 | Bad:
1609 | 
1610 |     <html>
1611 |     	<head>
1612 |     	  ...
1613 |     	</head>
1614 |       <body>
1615 |         ...
1616 |       </body>
1617 |     </html>
1618 | 
1619 | Good:
1620 | 
1621 |     <html>
1622 |       <head>
1623 |         ...
1624 |       </head>
1625 |       <body>
1626 |         ...
1627 |       </body>
1628 |     </html>
1629 | 
1630 | 
1631 | ### Use absolute path for internal links
1632 | 
1633 | An absolute path works better on your localhost without internet connection.
1634 | 
1635 | Bad:
1636 | 
1637 |     <link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
1638 |     ...
1639 |     <p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
1640 | 
1641 | Good:
1642 | 
1643 |     <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
1644 |     ...
1645 |     <p>You can find more at <a href="/contact.html">contact page</a>.</p>
1646 | 
1647 | 
1648 | Contributors
1649 | ------------
1650 | 
1651 | - [@hail2u]
1652 | - [@momdo]
1653 | - [@techhtml]
1654 | 
1655 | 
1656 | License
1657 | -------
1658 | 
1659 | [CC0]
1660 | 
1661 | 
1662 | [@hail2u]: https://github.com/hail2u
1663 | [@momdo]:  https://github.com/momdo
1664 | [@techhtml]:  https://github.com/techhtml
1665 | [CC0]:     http://creativecommons.org/publicdomain/zero/1.0/
1666 | 


--------------------------------------------------------------------------------
/README.ja.md:
--------------------------------------------------------------------------------
   1 | Translations: [English (en)](README.md) · [日本語 (ja)](README.ja.md) · [한국어 (ko)](README.ko.md)
   2 | 
   3 | 普通のHTMLの書き方
   4 | ==================
   5 | 
   6 | 保守しやすく、規模に依存しないHTML文書のために
   7 | 
   8 | <!-- #toc -->
   9 | 
  10 | * [一般](#%E4%B8%80%E8%88%AC)
  11 |   * [DOCTYPEで始める](#doctype%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B)
  12 |   * [置き換えられるべきまたは旧式のDOCTYPEを使わない](#%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%89%E3%82%8C%E3%82%8B%E3%81%B9%E3%81%8D%E3%81%BE%E3%81%9F%E3%81%AF%E6%97%A7%E5%BC%8F%E3%81%AEdoctype%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  13 |   * [XML宣言を使用しない](#xml%E5%AE%A3%E8%A8%80%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%AA%E3%81%84)
  14 |   * [文字参照はできる限り使わない](#%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7%E3%81%AF%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8A%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  15 |   * [`&`と`<`、`>`、`"`、`'`は名前文字参照を使ってエスケープする](#%E3%81%A8%E3%81%AF%E5%90%8D%E5%89%8D%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%A8%E3%82%B9%E3%82%B1%E3%83%BC%E3%83%97%E3%81%99%E3%82%8B)
  16 |   * [制御文字や不可視文字は数値文字参照を使う](#%E5%88%B6%E5%BE%A1%E6%96%87%E5%AD%97%E3%82%84%E4%B8%8D%E5%8F%AF%E8%A6%96%E6%96%87%E5%AD%97%E3%81%AF%E6%95%B0%E5%80%A4%E6%96%87%E5%AD%97%E5%8F%82%E7%85%A7%E3%82%92%E4%BD%BF%E3%81%86)
  17 |   * [コメントではその内容の前後へ空白文字を置く](#%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A7%E3%81%AF%E3%81%9D%E3%81%AE%E5%86%85%E5%AE%B9%E3%81%AE%E5%89%8D%E5%BE%8C%E3%81%B8%E7%A9%BA%E7%99%BD%E6%96%87%E5%AD%97%E3%82%92%E7%BD%AE%E3%81%8F)
  18 |   * [終了タグを省略しない](#%E7%B5%82%E4%BA%86%E3%82%BF%E3%82%B0%E3%82%92%E7%9C%81%E7%95%A5%E3%81%97%E3%81%AA%E3%81%84)
  19 |   * [空要素の書き方を混ぜない](#%E7%A9%BA%E8%A6%81%E7%B4%A0%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9%E3%82%92%E6%B7%B7%E3%81%9C%E3%81%AA%E3%81%84)
  20 |   * [タグや属性値の前後へ空白文字を置かない](#%E3%82%BF%E3%82%B0%E3%82%84%E5%B1%9E%E6%80%A7%E5%80%A4%E3%81%AE%E5%89%8D%E5%BE%8C%E3%81%B8%E7%A9%BA%E7%99%BD%E6%96%87%E5%AD%97%E3%82%92%E7%BD%AE%E3%81%8B%E3%81%AA%E3%81%84)
  21 |   * [大文字・小文字を混ぜない](#%E5%A4%A7%E6%96%87%E5%AD%97%E5%B0%8F%E6%96%87%E5%AD%97%E3%82%92%E6%B7%B7%E3%81%9C%E3%81%AA%E3%81%84)
  22 |   * [引用符を混ぜない](#%E5%BC%95%E7%94%A8%E7%AC%A6%E3%82%92%E6%B7%B7%E3%81%9C%E3%81%AA%E3%81%84)
  23 |   * [属性を2文字以上の空白文字で区切らない](#%E5%B1%9E%E6%80%A7%E3%82%922%E6%96%87%E5%AD%97%E4%BB%A5%E4%B8%8A%E3%81%AE%E7%A9%BA%E7%99%BD%E6%96%87%E5%AD%97%E3%81%A7%E5%8C%BA%E5%88%87%E3%82%89%E3%81%AA%E3%81%84)
  24 |   * [真偽値を取る属性の値は省略する](#%E7%9C%9F%E5%81%BD%E5%80%A4%E3%82%92%E5%8F%96%E3%82%8B%E5%B1%9E%E6%80%A7%E3%81%AE%E5%80%A4%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
  25 |   * [名前空間は省略する](#%E5%90%8D%E5%89%8D%E7%A9%BA%E9%96%93%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
  26 |   * [XML属性は使わない](#xml%E5%B1%9E%E6%80%A7%E3%81%AF%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  27 |   * [`data-*`とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない](#data-%E3%81%A8microdatardfa-lite%E7%94%A8%E3%81%AE%E5%B1%9E%E6%80%A7%E3%81%A8%E9%80%9A%E5%B8%B8%E3%81%AE%E5%B1%9E%E6%80%A7%E3%82%92%E6%B7%B7%E3%81%9C%E3%81%AA%E3%81%84)
  28 |   * [デフォルトの暗黙的なARIAセマンティックを尊重する](#%E3%83%87%E3%83%95%E3%82%A9%E3%83%AB%E3%83%88%E3%81%AE%E6%9A%97%E9%BB%99%E7%9A%84%E3%81%AAaria%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%82%92%E5%B0%8A%E9%87%8D%E3%81%99%E3%82%8B)
  29 | * [文書要素](#%E6%96%87%E6%9B%B8%E8%A6%81%E7%B4%A0)
  30 |   * [`lang`属性を追加する](#lang%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  31 |   * [`lang`属性の値はできる限り短くする](#lang%E5%B1%9E%E6%80%A7%E3%81%AE%E5%80%A4%E3%81%AF%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8A%E7%9F%AD%E3%81%8F%E3%81%99%E3%82%8B)
  32 |   * [できる限り`data-*`属性は避ける](#%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8Adata-%E5%B1%9E%E6%80%A7%E3%81%AF%E9%81%BF%E3%81%91%E3%82%8B)
  33 | * [文書メタデータ](#%E6%96%87%E6%9B%B8%E3%83%A1%E3%82%BF%E3%83%87%E3%83%BC%E3%82%BF)
  34 |   * [`title`要素を書く](#title%E8%A6%81%E7%B4%A0%E3%82%92%E6%9B%B8%E3%81%8F)
  35 |   * [`base`要素を使わない](#base%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  36 |   * [マイナーな参照先リソースのMIMEタイプを指定する](#%E3%83%9E%E3%82%A4%E3%83%8A%E3%83%BC%E3%81%AA%E5%8F%82%E7%85%A7%E5%85%88%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%81%AEmime%E3%82%BF%E3%82%A4%E3%83%97%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
  37 |   * [`favicon.ico`へリンクしない](#faviconico%E3%81%B8%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%97%E3%81%AA%E3%81%84)
  38 |   * [代替スタイルシートへ`title`属性を追加する](#%E4%BB%A3%E6%9B%BF%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%B7%E3%83%BC%E3%83%88%E3%81%B8title%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  39 |   * [URLには`link`要素を使う](#url%E3%81%AB%E3%81%AFlink%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%81%86)
  40 |   * [文書の文字エンコーディングを指定する](#%E6%96%87%E6%9B%B8%E3%81%AE%E6%96%87%E5%AD%97%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
  41 |   * [置き換えられるべき文字エンコーディング指定フォーマットを使わない](#%E7%BD%AE%E3%81%8D%E6%8F%9B%E3%81%88%E3%82%89%E3%82%8C%E3%82%8B%E3%81%B9%E3%81%8D%E6%96%87%E5%AD%97%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E6%8C%87%E5%AE%9A%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  42 |   * [最初に文字エンコーディングを指定する](#%E6%9C%80%E5%88%9D%E3%81%AB%E6%96%87%E5%AD%97%E3%82%A8%E3%83%B3%E3%82%B3%E3%83%BC%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
  43 |   * [UTF-8を使う](#utf-8%E3%82%92%E4%BD%BF%E3%81%86)
  44 |   * [CSSの`type`属性は省略する](#css%E3%81%AEtype%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
  45 |   * [`style`要素の中をコメントアウトしない](#style%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%AD%E3%82%92%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%A2%E3%82%A6%E3%83%88%E3%81%97%E3%81%AA%E3%81%84)
  46 |   * [CSSとJavaScriptのタグを混ぜない](#css%E3%81%A8javascript%E3%81%AE%E3%82%BF%E3%82%B0%E3%82%92%E6%B7%B7%E3%81%9C%E3%81%AA%E3%81%84)
  47 | * [セクション](#%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3)
  48 |   * [`body`要素を書く](#body%E8%A6%81%E7%B4%A0%E3%82%92%E6%9B%B8%E3%81%8F)
  49 |   * [`hgroup`要素のことは忘れる](#hgroup%E8%A6%81%E7%B4%A0%E3%81%AE%E3%81%93%E3%81%A8%E3%81%AF%E5%BF%98%E3%82%8C%E3%82%8B)
  50 |   * [`address`要素は連絡先情報にのみ使う](#address%E8%A6%81%E7%B4%A0%E3%81%AF%E9%80%A3%E7%B5%A1%E5%85%88%E6%83%85%E5%A0%B1%E3%81%AB%E3%81%AE%E3%81%BF%E4%BD%BF%E3%81%86)
  51 | * [グルーピングコンテンツ](#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%94%E3%83%B3%E3%82%B0%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)
  52 |   * [`pre`要素は改行で始めない](#pre%E8%A6%81%E7%B4%A0%E3%81%AF%E6%94%B9%E8%A1%8C%E3%81%A7%E5%A7%8B%E3%82%81%E3%81%AA%E3%81%84)
  53 |   * [`blockquote`要素内でも適切な要素を使う](#blockquote%E8%A6%81%E7%B4%A0%E5%86%85%E3%81%A7%E3%82%82%E9%81%A9%E5%88%87%E3%81%AA%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%81%86)
  54 |   * [`blockquote`要素内に帰属情報を含めない](#blockquote%E8%A6%81%E7%B4%A0%E5%86%85%E3%81%AB%E5%B8%B0%E5%B1%9E%E6%83%85%E5%A0%B1%E3%82%92%E5%90%AB%E3%82%81%E3%81%AA%E3%81%84)
  55 |   * [リスト項目は1行に1つずつ書く](#%E3%83%AA%E3%82%B9%E3%83%88%E9%A0%85%E7%9B%AE%E3%81%AF1%E8%A1%8C%E3%81%AB1%E3%81%A4%E3%81%9A%E3%81%A4%E6%9B%B8%E3%81%8F)
  56 |   * [`ol`要素では`type`属性を使う](#ol%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%AFtype%E5%B1%9E%E6%80%A7%E3%82%92%E4%BD%BF%E3%81%86)
  57 |   * [`dl`を会話のために使わない](#dl%E3%82%92%E4%BC%9A%E8%A9%B1%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AB%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  58 |   * [`figcaption`要素は`figure`要素の最初か最後に置く](#figcaption%E8%A6%81%E7%B4%A0%E3%81%AFfigure%E8%A6%81%E7%B4%A0%E3%81%AE%E6%9C%80%E5%88%9D%E3%81%8B%E6%9C%80%E5%BE%8C%E3%81%AB%E7%BD%AE%E3%81%8F)
  59 |   * [`main`要素を使う](#main%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%81%86)
  60 |   * [できる限り`div`要素は避ける](#%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8Adiv%E8%A6%81%E7%B4%A0%E3%81%AF%E9%81%BF%E3%81%91%E3%82%8B)
  61 | * [テキストレベルセマンティックス](#%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%AC%E3%83%99%E3%83%AB%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%82%B9)
  62 |   * [グループ化できるリンクは分割しない](#%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%E5%8C%96%E3%81%A7%E3%81%8D%E3%82%8B%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AF%E5%88%86%E5%89%B2%E3%81%97%E3%81%AA%E3%81%84)
  63 |   * [リソースをダウンロードさせる場合は`download`属性を使う](#%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%95%E3%81%9B%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AFdownload%E5%B1%9E%E6%80%A7%E3%82%92%E4%BD%BF%E3%81%86)
  64 |   * [`rel`や`hreflang`、`type`属性を必要ならば使う](#rel%E3%82%84hreflangtype%E5%B1%9E%E6%80%A7%E3%82%92%E5%BF%85%E8%A6%81%E3%81%AA%E3%82%89%E3%81%B0%E4%BD%BF%E3%81%86)
  65 |   * [リンク文字列は明確にする](#%E3%83%AA%E3%83%B3%E3%82%AF%E6%96%87%E5%AD%97%E5%88%97%E3%81%AF%E6%98%8E%E7%A2%BA%E3%81%AB%E3%81%99%E3%82%8B)
  66 |   * [`em`要素を警告や注意に使わない](#em%E8%A6%81%E7%B4%A0%E3%82%92%E8%AD%A6%E5%91%8A%E3%82%84%E6%B3%A8%E6%84%8F%E3%81%AB%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  67 |   * [できる限り`s`や`i`、`b`、`u`要素を避ける](#%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8As%E3%82%84ibu%E8%A6%81%E7%B4%A0%E3%82%92%E9%81%BF%E3%81%91%E3%82%8B)
  68 |   * [`q`要素内へ引用符は置かない](#q%E8%A6%81%E7%B4%A0%E5%86%85%E3%81%B8%E5%BC%95%E7%94%A8%E7%AC%A6%E3%81%AF%E7%BD%AE%E3%81%8B%E3%81%AA%E3%81%84)
  69 |   * [`abbr`要素へ`title`属性を追加する](#abbr%E8%A6%81%E7%B4%A0%E3%81%B8title%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  70 |   * [`ruby`要素は冗長にマークアップする](#ruby%E8%A6%81%E7%B4%A0%E3%81%AF%E5%86%97%E9%95%B7%E3%81%AB%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B)
  71 |   * [機械的に解釈可能でない`time`要素では`datetime`属性を追加する](#%E6%A9%9F%E6%A2%B0%E7%9A%84%E3%81%AB%E8%A7%A3%E9%87%88%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%AA%E3%81%84time%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%AFdatetime%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  72 |   * [コードの言語は`class`属性で`language-`で始めることで指定する](#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%A8%80%E8%AA%9E%E3%81%AFclass%E5%B1%9E%E6%80%A7%E3%81%A7language-%E3%81%A7%E5%A7%8B%E3%82%81%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E6%8C%87%E5%AE%9A%E3%81%99%E3%82%8B)
  73 |   * [できる限り`kbd`要素はシンプルにする](#%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8Akbd%E8%A6%81%E7%B4%A0%E3%81%AF%E3%82%B7%E3%83%B3%E3%83%97%E3%83%AB%E3%81%AB%E3%81%99%E3%82%8B)
  74 |   * [できる限り`span`要素は使わない](#%E3%81%A7%E3%81%8D%E3%82%8B%E9%99%90%E3%82%8Aspan%E8%A6%81%E7%B4%A0%E3%81%AF%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  75 |   * [`br`要素の後ろでは改行する](#br%E8%A6%81%E7%B4%A0%E3%81%AE%E5%BE%8C%E3%82%8D%E3%81%A7%E3%81%AF%E6%94%B9%E8%A1%8C%E3%81%99%E3%82%8B)
  76 |   * [見た目だけのために`br`要素を使わない](#%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%A0%E3%81%91%E3%81%AE%E3%81%9F%E3%82%81%E3%81%ABbr%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  77 | * [編集](#%E7%B7%A8%E9%9B%86)
  78 |   * [`ins`や`del`要素は他の要素をまたがせない](#ins%E3%82%84del%E8%A6%81%E7%B4%A0%E3%81%AF%E4%BB%96%E3%81%AE%E8%A6%81%E7%B4%A0%E3%82%92%E3%81%BE%E3%81%9F%E3%81%8C%E3%81%9B%E3%81%AA%E3%81%84)
  79 | * [エンベディッドコンテンツ](#%E3%82%A8%E3%83%B3%E3%83%99%E3%83%87%E3%82%A3%E3%83%83%E3%83%89%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84)
  80 |   * [`picture`要素ではフォールバックのための`img`要素を提供する](#picture%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%AF%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEimg%E8%A6%81%E7%B4%A0%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B)
  81 |   * [必要な時は`img`要素へ`alt`属性を追加する](#%E5%BF%85%E8%A6%81%E3%81%AA%E6%99%82%E3%81%AFimg%E8%A6%81%E7%B4%A0%E3%81%B8alt%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  82 |   * [可能ならば`alt`属性は空にする](#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0alt%E5%B1%9E%E6%80%A7%E3%81%AF%E7%A9%BA%E3%81%AB%E3%81%99%E3%82%8B)
  83 |   * [可能ならば`alt`属性は省略する](#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0alt%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
  84 |   * [`iframe`要素の中は空にする](#iframe%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%AD%E3%81%AF%E7%A9%BA%E3%81%AB%E3%81%99%E3%82%8B)
  85 |   * [`map`要素の中はマークアップする](#map%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%AD%E3%81%AF%E3%83%9E%E3%83%BC%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97%E3%81%99%E3%82%8B)
  86 |   * [`audio`や`video`要素にフォールバックのためのコンテンツを提供する](#audio%E3%82%84video%E8%A6%81%E7%B4%A0%E3%81%AB%E3%83%95%E3%82%A9%E3%83%BC%E3%83%AB%E3%83%90%E3%83%83%E3%82%AF%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B)
  87 | * [テーブルデータ](#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%83%87%E3%83%BC%E3%82%BF)
  88 |   * [1行に1つのセルを書く](#1%E8%A1%8C%E3%81%AB1%E3%81%A4%E3%81%AE%E3%82%BB%E3%83%AB%E3%82%92%E6%9B%B8%E3%81%8F)
  89 |   * [見出しセルには`th`要素を使う](#%E8%A6%8B%E5%87%BA%E3%81%97%E3%82%BB%E3%83%AB%E3%81%AB%E3%81%AFth%E8%A6%81%E7%B4%A0%E3%82%92%E4%BD%BF%E3%81%86)
  90 | * [フォーム](#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0)
  91 |   * [フォームコントロールは`label`要素で括る](#%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%82%B3%E3%83%B3%E3%83%88%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%AFlabel%E8%A6%81%E7%B4%A0%E3%81%A7%E6%8B%AC%E3%82%8B)
  92 |   * [可能ならば`for`属性は省略する](#%E5%8F%AF%E8%83%BD%E3%81%AA%E3%82%89%E3%81%B0for%E5%B1%9E%E6%80%A7%E3%81%AF%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
  93 |   * [`input`要素では適切な`type`属性を使う](#input%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%AF%E9%81%A9%E5%88%87%E3%81%AAtype%E5%B1%9E%E6%80%A7%E3%82%92%E4%BD%BF%E3%81%86)
  94 |   * [`input type="submit"`には`value`属性を追加する](#input-typesubmit%E3%81%AB%E3%81%AFvalue%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  95 |   * [`pattern`属性を持つ`input`要素には`title`属性を追加する](#pattern%E5%B1%9E%E6%80%A7%E3%82%92%E6%8C%81%E3%81%A4input%E8%A6%81%E7%B4%A0%E3%81%AB%E3%81%AFtitle%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  96 |   * [`placeholder`属性をラベル付けに使わない](#placeholder%E5%B1%9E%E6%80%A7%E3%82%92%E3%83%A9%E3%83%99%E3%83%AB%E4%BB%98%E3%81%91%E3%81%AB%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
  97 |   * [`option`要素は1行に1つ書く](#option%E8%A6%81%E7%B4%A0%E3%81%AF1%E8%A1%8C%E3%81%AB1%E3%81%A4%E6%9B%B8%E3%81%8F)
  98 |   * [`progress`要素には`max`属性を追加する](#progress%E8%A6%81%E7%B4%A0%E3%81%AB%E3%81%AFmax%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
  99 |   * [`meter`要素では`min`及び`max`属性を追加する](#meter%E8%A6%81%E7%B4%A0%E3%81%A7%E3%81%AFmin%E5%8F%8A%E3%81%B3max%E5%B1%9E%E6%80%A7%E3%82%92%E8%BF%BD%E5%8A%A0%E3%81%99%E3%82%8B)
 100 |   * [`legend`要素は`fieldset`要素の最初に置く](#legend%E8%A6%81%E7%B4%A0%E3%81%AFfieldset%E8%A6%81%E7%B4%A0%E3%81%AE%E6%9C%80%E5%88%9D%E3%81%AB%E7%BD%AE%E3%81%8F)
 101 | * [スクリプティング](#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%86%E3%82%A3%E3%83%B3%E3%82%B0)
 102 |   * [JavaScriptでは`type`属性を省略する](#javascript%E3%81%A7%E3%81%AFtype%E5%B1%9E%E6%80%A7%E3%82%92%E7%9C%81%E7%95%A5%E3%81%99%E3%82%8B)
 103 |   * [`script`要素の中をコメントアウトしない](#script%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%AD%E3%82%92%E3%82%B3%E3%83%A1%E3%83%B3%E3%83%88%E3%82%A2%E3%82%A6%E3%83%88%E3%81%97%E3%81%AA%E3%81%84)
 104 |   * [`script`要素を動的に生成するテクニックを使わない](#script%E8%A6%81%E7%B4%A0%E3%82%92%E5%8B%95%E7%9A%84%E3%81%AB%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF%E3%82%92%E4%BD%BF%E3%82%8F%E3%81%AA%E3%81%84)
 105 | * [その他](#%E3%81%9D%E3%81%AE%E4%BB%96)
 106 |   * [一貫した量でインデントする](#%E4%B8%80%E8%B2%AB%E3%81%97%E3%81%9F%E9%87%8F%E3%81%A7%E3%82%A4%E3%83%B3%E3%83%87%E3%83%B3%E3%83%88%E3%81%99%E3%82%8B)
 107 |   * [内部リンクには絶対パスを使う](#%E5%86%85%E9%83%A8%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AB%E3%81%AF%E7%B5%B6%E5%AF%BE%E3%83%91%E3%82%B9%E3%82%92%E4%BD%BF%E3%81%86)
 108 | * [投稿者](#%E6%8A%95%E7%A8%BF%E8%80%85)
 109 | * [ライセンス](#%E3%83%A9%E3%82%A4%E3%82%BB%E3%83%B3%E3%82%B9)
 110 | 
 111 | <!-- /toc -->
 112 | 
 113 | 
 114 | 一般
 115 | ----
 116 | 
 117 | ### DOCTYPEで始める
 118 | 
 119 | DOCTYPEは標準モードを有効にするために必要です。
 120 | 
 121 | 悪い例:
 122 | 
 123 |     <html>
 124 |       ...
 125 |     </html>
 126 | 
 127 | 良い例:
 128 | 
 129 |     <!DOCTYPE html>
 130 |     <html>
 131 |       ...
 132 |     </html>
 133 | 
 134 | 
 135 | ### 置き換えられるべきまたは旧式のDOCTYPEを使わない
 136 | 
 137 | もはやDOCTYPEはDTDのためにあるわけではないので、シンプルにしましょう。
 138 | 
 139 | 悪い例:
 140 | 
 141 |     <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 142 |       "http://www.w3.org/TR/html4/strict.dtd">
 143 | 
 144 | 良い例:
 145 | 
 146 |     <!DOCTYPE html>
 147 | 
 148 | 
 149 | ### XML宣言を使用しない
 150 | 
 151 | まだXHTMLを書きたいんですか？
 152 | 
 153 | 悪い例:
 154 | 
 155 |     <?xml version="1.0" encoding="UTF-8" standalone="yes"?>
 156 |     <!DOCTYPE html>
 157 | 
 158 | 良い例:
 159 | 
 160 |     <!DOCTYPE html>
 161 | 
 162 | 
 163 | ### 文字参照はできる限り使わない
 164 | 
 165 | UTF-8でHTML文書を書くなら、Emojiも含めほとんどあらゆる文字はそのまま書けます。
 166 | 
 167 | 悪い例:
 168 | 
 169 |     <p><small>Copyright &copy; 2014 W3C<sup>&reg;</sup></small></p>
 170 | 
 171 | 良い例:
 172 | 
 173 |     <p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
 174 | 
 175 | 
 176 | ### `&`と`<`、`>`、`"`、`'`は名前文字参照を使ってエスケープする
 177 | 
 178 | バグのないHTML文書を作成するためには、これらの文字は常にエスケープされるべきです。
 179 | 
 180 | 悪い例:
 181 | 
 182 |     <h1>The "&" character</h1>
 183 | 
 184 | 良い例:
 185 | 
 186 |     <h1>The &quot;&amp;&quot; character</h1>
 187 | 
 188 | 
 189 | ### 制御文字や不可視文字は数値文字参照を使う
 190 | 
 191 | これらの文字は簡単に他の文字と間違えられてしまいます。また仕様では、これらの文字へ人間にわかりやすい名前を付けていることを保証していません。
 192 | 
 193 | 悪い例:
 194 | 
 195 |     <p>This book can read in 1 hour.</p>
 196 | 
 197 | 良い例:
 198 | 
 199 |     <p>This book can read in 1&#xA0;hour.</p>
 200 | 
 201 | 
 202 | ### コメントではその内容の前後へ空白文字を置く
 203 | 
 204 | いくつかの文字はコメントの開始タグの直後や終了タグの直前に書くことができません。
 205 | 
 206 | 悪い例:
 207 | 
 208 |     <!--This section is non-normative-->
 209 | 
 210 | 良い例:
 211 | 
 212 |     <!-- This section is non-normative -->
 213 | 
 214 | 
 215 | ### 終了タグを省略しない
 216 | 
 217 | 多分、あなたは終了タグを省略するためのルールを理解していないでしょう。
 218 | 
 219 | 悪い例:
 220 | 
 221 |     <html>
 222 |       <body>
 223 |         ...
 224 | 
 225 | 良い例:
 226 | 
 227 |     <html>
 228 |       <body>
 229 |         ...
 230 |       </body>
 231 |     </html>
 232 | 
 233 | 
 234 | ### 空要素の書き方を混ぜない
 235 | 
 236 | 一貫性は読みやすさのキーポイントです。
 237 | 
 238 | 悪い例:
 239 | 
 240 |     <img alt="HTML Best Practices" src="/img/logo.png">
 241 |     <hr />
 242 | 
 243 | 良い例:
 244 | 
 245 |     <img alt="HTML Best Practices" src="/img/logo.png">
 246 |     <hr>
 247 | 
 248 | 
 249 | ### タグや属性値の前後へ空白文字を置かない
 250 | 
 251 | そうする必要はまったくありません。
 252 | 
 253 | 悪い例:
 254 | 
 255 |     <h1 class=" title " >HTML Best Practices</h1>
 256 | 
 257 | 良い例:
 258 | 
 259 |     <h1 class="title">HTML Best Practices</h1>
 260 | 
 261 | 
 262 | ### 大文字・小文字を混ぜない
 263 | 
 264 | これも一貫性を与えてくれます。
 265 | 
 266 | 悪い例:
 267 | 
 268 |     <a HREF="#general">General</A>
 269 | 
 270 | 良い例:
 271 | 
 272 |     <a href="#general">General</a>
 273 | 
 274 | 同じく良い例:
 275 | 
 276 |     <A HREF="#general">General</A>
 277 | 
 278 | 
 279 | ### 引用符を混ぜない
 280 | 
 281 | 上に同じです。
 282 | 
 283 | 悪い例:
 284 | 
 285 |     <img alt="HTML Best Practices" src='/img/logo.jpg'>
 286 | 
 287 | 良い例:
 288 | 
 289 |     <img alt="HTML Best Practices" src="/img/logo.jpg">
 290 | 
 291 | 
 292 | ### 属性を2文字以上の空白文字で区切らない
 293 | 
 294 | あなたのよくわからない整形ルールは誰かを混乱させます。
 295 | 
 296 | 悪い例:
 297 | 
 298 |     <input   name="q"  type="search">
 299 | 
 300 | 良い例:
 301 | 
 302 |     <input name="q" type="search">
 303 | 
 304 | 
 305 | ### 真偽値を取る属性の値は省略する
 306 | 
 307 | この方が簡単に書けますよね？
 308 | 
 309 | 悪い例:
 310 | 
 311 |     <audio autoplay="autoplay" src="/audio/theme.mp3">
 312 | 
 313 | 良い例:
 314 | 
 315 |     <audio autoplay src="/audio/theme.mp3">
 316 | 
 317 | 
 318 | ### 名前空間は省略する
 319 | 
 320 | SVGやMathMLはHTML5の文書では直接扱えます。
 321 | 
 322 | 悪い例:
 323 | 
 324 |     <svg xmlns="http://www.w3.org/2000/svg">
 325 |       ...
 326 |     </svg>
 327 | 
 328 | 良い例:
 329 | 
 330 |     <svg>
 331 |       ...
 332 |     </svg>
 333 | 
 334 | 
 335 | ### XML属性は使わない
 336 | 
 337 | 我々はHTML文書を書いています。
 338 | 
 339 | 悪い例:
 340 | 
 341 |     <span lang="ja" xml:lang="ja">...</span>
 342 | 
 343 | 良い例:
 344 | 
 345 |     <span lang="ja">...</span>
 346 | 
 347 | 
 348 | ### `data-*`とMicrodata、RDFa Lite用の属性と通常の属性を混ぜない
 349 | 
 350 | タグ文字列はとても複雑になりえます。こういった簡単なルールによってタグ文字列を読みやすくできるでしょう。
 351 | 
 352 | 悪い例:
 353 | 
 354 |     <img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">
 355 | 
 356 | 良い例:
 357 | 
 358 |     <img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">
 359 | 
 360 | 
 361 | ### デフォルトの暗黙的なARIAセマンティックを尊重する
 362 | 
 363 | いくつかの要素はHTML文章において暗黙的にARIA `role`を持っているので、それは指定しないようにしましょう。
 364 | 
 365 | 悪い例:
 366 | 
 367 |     <nav role="navigation">
 368 |       ...
 369 |     </nav>
 370 |     
 371 |     <hr role="separator">
 372 | 
 373 | 良い例:
 374 | 
 375 |     <nav>
 376 |       ...
 377 |     </nav>
 378 |     
 379 |     <hr>
 380 | 
 381 | 
 382 | 文書要素
 383 | --------
 384 | 
 385 | ### `lang`属性を追加する
 386 | 
 387 | `lang`属性はHTML文書の翻訳に役立ちます。
 388 | 
 389 | 悪い例:
 390 | 
 391 |     <html>
 392 | 
 393 | 良い例:
 394 | 
 395 |     <html lang="en-US">
 396 | 
 397 | 
 398 | ### `lang`属性の値はできる限り短くする
 399 | 
 400 | 日本語は日本でのみ使われます。つまり国コードは必要ありません。
 401 | 
 402 | 悪い例:
 403 | 
 404 |     <html lang="ja-JP">
 405 | 
 406 | 良い例:
 407 | 
 408 |     <html lang="ja">
 409 | 
 410 | 
 411 | ### できる限り`data-*`属性は避ける
 412 | 
 413 | 適切な属性は、ブラウザーがうまく扱ってくれるかもしれません。
 414 | 
 415 | 悪い例:
 416 | 
 417 |     <span data-language="french">chemises</span>
 418 |     ...
 419 |     <strong data-type="warning">Do not wash!</strong>
 420 | 
 421 | 良い例:
 422 | 
 423 |     <span title="French"><span lang="fr-FR">chemises</span></span>
 424 |     ...
 425 |     <strong class="warning">Do not wash!</strong>
 426 | 
 427 | 
 428 | 文書メタデータ
 429 | --------------
 430 | 
 431 | ### `title`要素を書く
 432 | 
 433 | `title`要素の中身は、ブラウザーに限らず、様々なアプリケーションにより利用されます。
 434 | 
 435 | 悪い例:
 436 | 
 437 |     <head>
 438 |       <meta charset="UTF-8">
 439 |     </head>
 440 | 
 441 | 良い例:
 442 | 
 443 |     <head>
 444 |       <meta charset="UTF-8">
 445 |       <title>HTML Best Practices</title>
 446 |     </head>
 447 | 
 448 | 
 449 | ### `base`要素を使わない
 450 | 
 451 | 絶対パスや絶対URLの方が開発者とユーザーの双方に安全です。
 452 | 
 453 | 悪い例:
 454 | 
 455 |     <head>
 456 |       ...
 457 |       <base href="/blog/">
 458 |       <link href="hello-world" rel="canonical">
 459 |       ...
 460 |     </head>
 461 | 
 462 | 良い例:
 463 | 
 464 |     <head>
 465 |       ...
 466 |       <link href="/blog/hello-world" rel="canonical">
 467 |       ...
 468 |     </head>
 469 | 
 470 | 
 471 | ### マイナーな参照先リソースのMIMEタイプを指定する
 472 | 
 473 | アプリケーションがそのリソースをどう取り扱うべきかのヒントになります。
 474 | 
 475 | 悪い例:
 476 | 
 477 |     <link href="/pdf" rel="alternate">
 478 |     <link href="/feed" rel="alternate">
 479 |     <link href="/css/screen.css" rel="stylesheet">
 480 | 
 481 | 良い例:
 482 | 
 483 |     <link href="/pdf" rel="alternate" type="application/pdf">
 484 |     <link href="/feed" rel="alternate" type="application/rss+xml">
 485 |     <link href="/css/screen.css" rel="stylesheet">
 486 | 
 487 | 
 488 | ### `favicon.ico`へリンクしない
 489 | 
 490 | ほとんどのブラウザーは`/favicon.ico`を自動的に非同期で取得します。
 491 | 
 492 | 悪い例:
 493 | 
 494 |     <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">
 495 | 
 496 | 良い例:
 497 | 
 498 |     <!-- Place `favicon.ico` in the root directory. -->
 499 | 
 500 | 
 501 | ### 代替スタイルシートへ`title`属性を追加する
 502 | 
 503 | 人間にわかりやすいラベルにより適切なスタイルシートを選択しやすくなります。
 504 | 
 505 | 悪い例:
 506 | 
 507 |     <link href="/css/screen.css" rel="stylesheet">
 508 |     <link href="/css/high-contrast.css" rel="alternate stylesheet">
 509 | 
 510 | 良い例:
 511 | 
 512 |     <link href="/css/screen.css" rel="stylesheet">
 513 |     <link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
 514 | 
 515 | 
 516 | ### URLには`link`要素を使う
 517 | 
 518 | `href`属性の値はURLとして解決できます。
 519 | 
 520 | 悪い例:
 521 | 
 522 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 523 |       <meta content="https://example.com/blog/hello" itemprop="url">
 524 |       ...
 525 |     </section>
 526 | 
 527 | 良い例:
 528 | 
 529 |     <section itemscope itemtype="http://schema.org/BlogPosting">
 530 |       <link href="/blog/hello" itemprop="url">
 531 |       ...
 532 |     </section>
 533 | 
 534 | 
 535 | ### 文書の文字エンコーディングを指定する
 536 | 
 537 | まだすべてのブラウザーでUTF-8がデフォルトになっていません。
 538 | 
 539 | 悪い例:
 540 | 
 541 |     <head>
 542 |       <title>HTML Best Practices</title>
 543 |     </head>
 544 | 
 545 | 良い例:
 546 | 
 547 |     <head>
 548 |       <meta charset="UTF-8">
 549 |       <title>HTML Best Practices</title>
 550 |     </head>
 551 | 
 552 | 
 553 | ### 置き換えられるべき文字エンコーディング指定フォーマットを使わない
 554 | 
 555 | HTTPヘッダーはサーバー側で指定されるべきで、簡単にしておきましょう。
 556 | 
 557 | 悪い例:
 558 | 
 559 |     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 560 | 
 561 | 良い例:
 562 | 
 563 |     <meta charset="UTF-8">
 564 | 
 565 | 
 566 | ### 最初に文字エンコーディングを指定する
 567 | 
 568 | 仕様では文書の先頭1024バイトまでに文字エンコーディングを指定することを要求しています。
 569 | 
 570 | 悪い例:
 571 | 
 572 |     <head>
 573 |       <meta content="width=device-width" name="viewport">
 574 |       <meta charset="UTF-8">
 575 |       ...
 576 |     </head>
 577 | 
 578 | 良い例:
 579 | 
 580 |     <head>
 581 |       <meta charset="UTF-8">
 582 |       <meta content="width=device-width" name="viewport">
 583 |       ...
 584 |     </head>
 585 | 
 586 | 
 587 | ### UTF-8を使う
 588 | 
 589 | UTF-8ならEmojiを自由に使えます。
 590 | 
 591 | 悪い例:
 592 | 
 593 |     <meta charset="Shift_JIS">
 594 | 
 595 | 良い例:
 596 | 
 597 |     <meta charset="UTF-8">
 598 | 
 599 | 
 600 | ### CSSの`type`属性は省略する
 601 | 
 602 | HTML5では、`style`要素における`type`属性の初期値は`text/css`です。
 603 | 
 604 | 悪い例:
 605 | 
 606 |     <style type="text/css">
 607 |       ...
 608 |     </style>
 609 | 
 610 | 良い例:
 611 | 
 612 |     <style>
 613 |       ...
 614 |     </style>
 615 | 
 616 | 
 617 | ### `style`要素の中をコメントアウトしない
 618 | 
 619 | この儀式は古いブラウザーのためです。
 620 | 
 621 | 悪い例:
 622 | 
 623 |     <style>
 624 |     <!--
 625 |       ...
 626 |       -->
 627 |     </style>
 628 | 
 629 | 良い例:
 630 | 
 631 |     <style>
 632 |       ...
 633 |     </style>
 634 | 
 635 | 
 636 | ### CSSとJavaScriptのタグを混ぜない
 637 | 
 638 | `script`要素はDOMの構築をブロックすることがあります。
 639 | 
 640 | 悪い例:
 641 | 
 642 |     <script src="/js/jquery.min.js"></script>
 643 |     <link href="/css/screen.css" rel="stylesheet">
 644 |     <script src="/js/main.js"></script>
 645 | 
 646 | 良い例:
 647 | 
 648 |     <link href="/css/screen.css" rel="stylesheet">
 649 |     <script src="/js/jquery.min.js"></script>
 650 |     <script src="/js/main.js"></script>
 651 | 
 652 | 同じく良い例:
 653 | 
 654 |     <script src="/js/jquery.min.js"></script>
 655 |     <script src="/js/main.js"></script>
 656 |     <link href="/css/screen.css" rel="stylesheet">
 657 | 
 658 | 
 659 | セクション
 660 | ----------
 661 | 
 662 | ### `body`要素を書く
 663 | 
 664 | ブラウザーは思っても見ない位置へ`body`要素を補完することがあります。
 665 | 
 666 | 悪い例:
 667 | 
 668 |     <html>
 669 |       <head>
 670 |         ...
 671 |       </head>
 672 |       ...
 673 |     </html>
 674 | 
 675 | 良い例:
 676 | 
 677 |     <html>
 678 |       <head>
 679 |         ...
 680 |       </head>
 681 |       <body>
 682 |         ...
 683 |       </body>
 684 |     </html>
 685 | 
 686 | 
 687 | ### `hgroup`要素のことは忘れる
 688 | 
 689 | W3C版仕様では削除されました。
 690 | 
 691 | 悪い例:
 692 | 
 693 |     <hgroup>
 694 |       <h1>HTML Best Practices</h1>
 695 |       <h2>For writing maintainable and scalable HTML documents.</h2>
 696 |     </hgroup>
 697 | 
 698 | 良い例:
 699 | 
 700 |     <h1>HTML Best Practices</h1>
 701 |     <p>For writing maintainable and scalable HTML documents.</p>
 702 | 
 703 | 
 704 | ### `address`要素は連絡先情報にのみ使う
 705 | 
 706 | `address`要素はメールアドレスやSNSアカウント、住所、電話番号など、実際に利用できるあなたとの連絡手段のための要素です。
 707 | 
 708 | 悪い例:
 709 | 
 710 |     <address>No rights reserved.</address>
 711 | 
 712 | 良い例:
 713 | 
 714 |     <address>Contact: <a href="https://twitter.com/hail2u_">Kyo Nagashima</a></address>
 715 | 
 716 | 
 717 | グルーピングコンテンツ
 718 | ----------------------
 719 | 
 720 | ### `pre`要素は改行で始めない
 721 | 
 722 | 最初の改行はブラウザーに無視されますが、2番目以降はそのまま表示されます。
 723 | 
 724 | 悪い例:
 725 | 
 726 |     <pre>
 727 |     &lt;!DOCTYPE html&gt;
 728 |     </pre>
 729 | 
 730 | 良い例:
 731 | 
 732 |     <pre>&lt;!DOCTYPE html&gt;
 733 |     </pre>
 734 | 
 735 | 
 736 | ### `blockquote`要素内でも適切な要素を使う
 737 | 
 738 | `blockquote`要素の中身は引用で、単なる文字の連続ではありません。
 739 | 
 740 | 悪い例:
 741 | 
 742 |     <blockquote>For writing maintainable and scalable HTML documents.</blockquote>
 743 | 
 744 | 良い例:
 745 | 
 746 |     <blockquote>
 747 |       <p>For writing maintainable and scalable HTML documents.</p>
 748 |     </blockquote>
 749 | 
 750 | 
 751 | ### `blockquote`要素内に帰属情報を含めない
 752 | 
 753 | `blockquote`要素の中身は引用です。
 754 | 
 755 | 悪い例:
 756 | 
 757 |     <blockquote>
 758 |       <p>For writing maintainable and scalable HTML documents.</p>
 759 | 
 760 |       <p>— HTML Best Practices</p>
 761 |     </blockquote>
 762 | 
 763 | 良い例:
 764 | 
 765 |     <blockquote>
 766 |       <p>For writing maintainable and scalable HTML documents.</p>
 767 |     </blockquote>
 768 |     
 769 |     <p>— HTML Best Practices</p>
 770 | 
 771 | 同じく良い例（WHATWG推奨）:
 772 | 
 773 |     <figure>
 774 |       <blockquote>
 775 |         <p>For writing maintainable and scalable HTML documents.</p>
 776 |       </blockquote>
 777 |     
 778 |       <figcaption>— HTML Best Practices</figcaption>
 779 |     </figure>
 780 | 
 781 | 同じく良い例（W3C推奨）:
 782 | 
 783 |     <blockquote>
 784 |       <p>For writing maintainable and scalable HTML documents.</p>
 785 |     
 786 |       <footer>— HTML Best Practices</footer>
 787 |     </blockquote>
 788 | 
 789 | 
 790 | ### リスト項目は1行に1つずつ書く
 791 | 
 792 | 長ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーい行はとっっっっっっっっっっっっっっっっっっっっっっっっっっっても読みづらいです。
 793 | 
 794 | 悪い例:
 795 | 
 796 |     <ul>
 797 |       <li>General</li><li>The root Element</li><li>Sections</li>...
 798 |     </ul>
 799 | 
 800 | 良い例:
 801 | 
 802 |     <ul>
 803 |       <li>General</li>
 804 |       <li>The root Element</li>
 805 |       <li>Sections</li>
 806 |       ...
 807 |     </ul>
 808 | 
 809 | 
 810 | ### `ol`要素では`type`属性を使う
 811 | 
 812 | リスト・マーカーは周辺から参照されることもあります。`type`属性を使ってリスト・マーカーを変更すれば、安全に参照できるでしょう。
 813 | 
 814 | 悪い例:
 815 | 
 816 |     <head>
 817 |       <style>
 818 |         .toc {
 819 |           list-style-type: upper-roman;
 820 |         }
 821 |       </style>
 822 |     </head>
 823 |     <body>
 824 |       <ol class="toc">
 825 |         <li>General</li>
 826 |         <li>The root Element</li>
 827 |         <li>Sections</li>
 828 |         ...
 829 |       </ol>
 830 |     </body>
 831 | 
 832 | 良い例:
 833 | 
 834 |     <body>
 835 |       <ol type="I">
 836 |         <li>General</li>
 837 |         <li>The root Element</li>
 838 |         <li>Sections</li>
 839 |         ...
 840 |       </ol>
 841 |     </body>
 842 | 
 843 | 
 844 | ### `dl`を会話のために使わない
 845 | 
 846 | HTML5では`dl`要素は関連付けリストに限定されています。
 847 | 
 848 | 悪い例:
 849 | 
 850 |     <dl>
 851 |       <dt>Costello</dt>
 852 |       <dd>Look, you gotta first baseman?</dd>
 853 |       <dt>Abbott</dt>
 854 |       <dd>Certainly.</dd>
 855 |       <dt>Costello</dt>
 856 |       <dd>Who’s playing first?</dd>
 857 |       <dt>Abbott</dt>
 858 |       <dd>That’s right.</dd>
 859 |       <dt>Costello becomes exasperated.</dd>
 860 |       <dt>Costello</dt>
 861 |       <dd>When you pay off the first baseman every month, who gets the money?</dd>
 862 |       <dt>Abbott</dt>
 863 |       <dd>Every dollar of it.</dd>
 864 |     </dl>
 865 | 
 866 | 良い例:
 867 | 
 868 |     <p>Costello: Look, you gotta first baseman?</p>
 869 |     <p>Abbott: Certainly.</p>
 870 |     <p>Costello: Who’s playing first?</p>
 871 |     <p>Abbott: That’s right.</p>
 872 |     <p>Costello becomes exasperated.</p>
 873 |     <p>Costello: When you pay off the first baseman every month, who gets the money?</p>
 874 |     <p>Abbott: Every dollar of it.</p>
 875 | 
 876 | 
 877 | ### `figcaption`要素は`figure`要素の最初か最後に置く
 878 | 
 879 | 仕様（WHATWG版）では`figcaption`要素を`figure`要素の中ほどに置くことは許可されていません。
 880 | 
 881 | 悪い例:
 882 | 
 883 |     <figure>
 884 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 885 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 886 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 887 |     </figure>
 888 | 
 889 | 良い例:
 890 | 
 891 |     <figure>
 892 |       <img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
 893 |       <img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
 894 |       <figcaption>“HTML Best Practices” Cover Art</figcaption>
 895 |     </figure>
 896 | 
 897 | 
 898 | ### `main`要素を使う
 899 | 
 900 | `main`要素はコンテンツをまとめるために使えます。
 901 | 
 902 | 悪い例:
 903 | 
 904 |     <div id="content">
 905 |       ...
 906 |     </div>
 907 | 
 908 | 良い例:
 909 | 
 910 |     <main>
 911 |       ...
 912 |     </main>
 913 | 
 914 | 
 915 | ### できる限り`div`要素は避ける
 916 | 
 917 | `div`要素は最後の手段です。
 918 | 
 919 | 悪い例:
 920 | 
 921 |     <div class="chapter">
 922 |       ...
 923 |     </div>
 924 | 
 925 | 良い例:
 926 | 
 927 |     <section>
 928 |       ...
 929 |     </section>
 930 | 
 931 | 
 932 | テキストレベルセマンティックス
 933 | ------------------------------
 934 | 
 935 | ### グループ化できるリンクは分割しない
 936 | 
 937 | `a`要素はほとんどの要素（フォームコントロールのようなインタラクティブ要素や`a`要素自身以外）を括ることができます。
 938 | 
 939 | 悪い例:
 940 | 
 941 |     <h1><a href="https://whatwg.org/">WHATWG</a></h1>
 942 |     
 943 |     <p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>
 944 | 
 945 | 良い例:
 946 | 
 947 |     <a href="https://whatwg.org/">
 948 |       <h1>WHATWG</h1>
 949 |     
 950 |       <p>A community maintaining and evolving HTML since 2004.</p>
 951 |     </a>
 952 | 
 953 | 
 954 | ### リソースをダウンロードさせる場合は`download`属性を使う
 955 | 
 956 | こうすることでダウンロードするリンク先のリソースを確実にローカルに保存させることができます。
 957 | 
 958 | 悪い例:
 959 | 
 960 |     <a href="/downloads/offline.zip">offline version</a>
 961 | 
 962 | 良い例:
 963 | 
 964 |     <a download href="/downloads/offline.zip">offline version</a>
 965 | 
 966 | 
 967 | ### `rel`や`hreflang`、`type`属性を必要ならば使う
 968 | 
 969 | これらのヒントは、アプリケーションがリンク先のリソースをどう扱えば良いのかの助けになります。
 970 | 
 971 | 悪い例:
 972 | 
 973 |     <a href="/ja/pdf">Japanese PDF version</a>
 974 | 
 975 | 良い例:
 976 | 
 977 |     <a href="/ja/pdf" hreflang="ja" rel="alternate" type="application/pdf">Japanese PDF version</a>
 978 | 
 979 | 
 980 | ### リンク文字列は明確にする
 981 | 
 982 | リンク文字列はリンク先のリソースのラベルであるべきです。
 983 | 
 984 | 悪い例:
 985 | 
 986 |     <p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>
 987 | 
 988 | 良い例:
 989 | 
 990 |     <p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
 991 | 
 992 | 
 993 | ### `em`要素を警告や注意に使わない
 994 | 
 995 | それらは深刻なものです。ですから`strong`要素の方がより相応しいはずです。
 996 | 
 997 | 悪い例:
 998 | 
 999 |     <em>Caution!</em>
1000 | 
1001 | 良い例:
1002 | 
1003 |     <strong>Caution!</strong>
1004 | 
1005 | 
1006 | ### できる限り`s`や`i`、`b`、`u`要素を避ける
1007 | 
1008 | これらの要素のセマンティクスは人類には難しすぎます。
1009 | 
1010 | 悪い例:
1011 | 
1012 |     <i class="icon-search"></i>
1013 | 
1014 | 良い例:
1015 | 
1016 |     <span class="icon-search" aria-hidden="true"></span>
1017 | 
1018 | 
1019 | ### `q`要素内へ引用符は置かない
1020 | 
1021 | 引用符はブラウザーが提供します。
1022 | 
1023 | 悪い例:
1024 | 
1025 |     <q>“For writing maintainable and scalable HTML documents”</q>
1026 | 
1027 | 良い例:
1028 | 
1029 |     <q>For writing maintainable and scalable HTML documents</q>
1030 | 
1031 | 同じく良い例:
1032 | 
1033 |     “For writing maintainable and scalable HTML documents”
1034 | 
1035 | 
1036 | ### `abbr`要素へ`title`属性を追加する
1037 | 
1038 | 他に完全表記を提示する方法がありません。
1039 | 
1040 | 悪い例:
1041 | 
1042 |     <abbr>HBP</abbr>
1043 | 
1044 | 良い例:
1045 | 
1046 |     <abbr title="HTML Best Practices">HBP</abbr>
1047 | 
1048 | 
1049 | ### `ruby`要素は冗長にマークアップする
1050 | 
1051 | `ruby`要素のサポートはまだモダンブラウザー間でも完了していません。
1052 | 
1053 | 悪い例:
1054 | 
1055 |     <ruby>HTML<rt>えいちてぃーえむえる</ruby>
1056 | 
1057 | 良い例:
1058 | 
1059 |     <ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
1060 | 
1061 | 
1062 | ### 機械的に解釈可能でない`time`要素では`datetime`属性を追加する
1063 | 
1064 | `datetime`属性を使わない場合、`time`要素の中身は限定されます。
1065 | 
1066 | 悪い例:
1067 | 
1068 |     <time>Dec 19, 2014</time>
1069 | 
1070 | 良い例:
1071 | 
1072 |     <time datetime="2014-12-19">Dec 19, 2014</time>
1073 | 
1074 | 
1075 | ### コードの言語は`class`属性で`language-`で始めることで指定する
1076 | 
1077 | これは正式な方法ではありませんが、仕様では言及されています。
1078 | 
1079 | 悪い例:
1080 | 
1081 |     <code>&lt;!DOCTYPE html&gt;</code>
1082 | 
1083 | 良い例:
1084 | 
1085 |     <code class="language-html">&lt;!DOCTYPE html&gt;</code>
1086 | 
1087 | 
1088 | ### できる限り`kbd`要素はシンプルにする
1089 | 
1090 | 入れ子にした`kbd`要素は人類には難しすぎます。
1091 | 
1092 | 悪い例:
1093 | 
1094 |     <kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>
1095 | 
1096 | 良い例:
1097 | 
1098 |     <kbd>Ctrl+F5</kbd>
1099 | 
1100 | 
1101 | ### できる限り`span`要素は使わない
1102 | 
1103 | `span`要素は最後の手段です。
1104 | 
1105 | 悪い例:
1106 | 
1107 |     HTML <span class="best">Best</span> Practices
1108 | 
1109 | 良い例:
1110 | 
1111 |     HTML <em>Best</em> Practices
1112 | 
1113 | 
1114 | ### `br`要素の後ろでは改行する
1115 | 
1116 | `br`要素が使われる場所には、間違いなく改行が必要です。
1117 | 
1118 | 悪い例:
1119 | 
1120 |     <p>HTML<br>Best<br>Practices</p>
1121 | 
1122 | 良い例:
1123 | 
1124 |     <p>HTML<br>
1125 |     Best<br>
1126 |     Practices</p>
1127 | 
1128 | 
1129 | ### 見た目だけのために`br`要素を使わない
1130 | 
1131 | `br`要素は改行のためにあるのではなく、コンテンツに必要な改行のためにあります。
1132 | 
1133 | 悪い例:
1134 | 
1135 |     <p><label>Rule name: <input name="rule-name" type="text"></label><br>
1136 |     <label>Rule description:<br>
1137 |     <textarea name="rule-description"></textarea></label></p>
1138 | 
1139 | 良い例:
1140 | 
1141 |     <p><label>Rule name: <input name="rule-name" type="text"></label></p>
1142 |     <p><label>Rule description:<br>
1143 |     <textarea name="rule-description"></textarea></label></p>
1144 | 
1145 | 
1146 | 編集
1147 | ----
1148 | 
1149 | ### `ins`や`del`要素は他の要素をまたがせない
1150 | 
1151 | 要素は他の要素をまたぐことはできません。
1152 | 
1153 | 悪い例:
1154 | 
1155 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
1156 |     
1157 |     <p>Don’t trust!</p></del>
1158 | 
1159 | 良い例:
1160 | 
1161 |     <p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
1162 |     
1163 |     <del><p>Don’t trust!</p></del>
1164 | 
1165 | 
1166 | エンベディッドコンテンツ
1167 | ------------------------
1168 | 
1169 | ### `picture`要素ではフォールバックのための`img`要素を提供する
1170 | 
1171 | `picture`要素のサポートはまだよくありません。
1172 | 
1173 | 悪い例:
1174 | 
1175 |     <picture>
1176 |       <source srcset="/img/logo.webp" type="image/webp">
1177 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1178 |       <source srcset="/img/logo.jp2" type="image/jp2">
1179 |       <source srcset="/img/logo.jpg" type="image/jpg">
1180 |     </picture>
1181 | 
1182 | 良い例:
1183 | 
1184 |     <picture>
1185 |       <source srcset="/img/logo.webp" type="image/webp">
1186 |       <source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
1187 |       <source srcset="/img/logo.jp2" type="image/jp2">
1188 |       <img src="/img/logo.jpg">
1189 |     </picture>
1190 | 
1191 | 
1192 | ### 必要な時は`img`要素へ`alt`属性を追加する
1193 | 
1194 | `alt`属性は、画像を表示できなかったり、画像の読み込みを無効にしている環境へ助けになります。
1195 | 
1196 | 悪い例:
1197 | 
1198 |     <img src="/img/logo.png">
1199 | 
1200 | 良い例:
1201 | 
1202 |     <img alt="HTML Best Practices" src="/img/logo.png">
1203 | 
1204 | 
1205 | ### 可能ならば`alt`属性は空にする
1206 | 
1207 | 画像が補助的なものならば、きっと周囲に同等のコンテンツが存在するはずです。
1208 | 
1209 | 悪い例:
1210 | 
1211 |     <img alt="Question mark icon" src="/img/icon/help.png"> Help
1212 | 
1213 | 良い例:
1214 | 
1215 |     <img alt="" src="/img/icon/help.png"> Help
1216 | 
1217 | 
1218 | ### 可能ならば`alt`属性は省略する
1219 | 
1220 | たまにどのような文字列が適切な`alt`属性の値かわからないこともあります。
1221 | 
1222 | 悪い例:
1223 | 
1224 |     <img alt="CAPTCHA" src="captcha.cgi?id=82174">
1225 | 
1226 | 良い例:
1227 | 
1228 |     <img src="captcha.cgi?id=82174" title="CAPTCHA">
1229 |     (If you cannot see the image, you can use an <a href="?audio">audio</a> test instead.)
1230 | 
1231 | 
1232 | ### `iframe`要素の中は空にする
1233 | 
1234 | その内容にはいくつかの制限があります。空にすれば安全です。
1235 | 
1236 | 悪い例:
1237 | 
1238 |     <iframe src="/ads/default.html">
1239 |       <p>If your browser support inline frame, ads are displayed here.</p>
1240 |     </iframe>
1241 | 
1242 | 良い例:
1243 | 
1244 |     <iframe src="/ads/default.html"></iframe>
1245 | 
1246 | 
1247 | ### `map`要素の中はマークアップする
1248 | 
1249 | その中身はスクリーン・リーダーへ提供されます。
1250 | 
1251 | 悪い例:
1252 | 
1253 |     <map name="toc">
1254 |       <a href="#general">General</a>
1255 |       <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1256 |       <a href="#the_root_element">The root element</a>
1257 |       <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1258 |       <a href="#sections">Sections</a>
1259 |       <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1260 |     </map>
1261 | 
1262 | 良い例:
1263 | 
1264 |     <map name="toc">
1265 |       <p>
1266 |         <a href="#general">General</a>
1267 |         <area alt="General" coords="0, 0, 40, 40" href="#General"> |
1268 |         <a href="#the_root_element">The root element</a>
1269 |         <area alt="The root element" coords="50, 0, 90, 40" href="#the_root_element"> |
1270 |         <a href="#sections">Sections</a>
1271 |         <area alt="Sections" coords="100, 0, 140, 40" href="#sections">
1272 |       </p>
1273 |     </map>
1274 | 
1275 | 
1276 | ### `audio`や`video`要素にフォールバックのためのコンテンツを提供する
1277 | 
1278 | HTML5で新しく作られた要素にはフォールバックのためのコンテンツが必要です。
1279 | 
1280 | 悪い例:
1281 | 
1282 |     <video>
1283 |       <source src="/mov/theme.mp4" type="video/mp4">
1284 |       <source src="/mov/theme.ogv" type="video/ogg">
1285 |       ...
1286 |     </video>
1287 | 
1288 | 良い例:
1289 | 
1290 |     <video>
1291 |       <source src="/mov/theme.mp4" type="video/mp4">
1292 |       <source src="/mov/theme.ogv" type="video/ogg">
1293 |       ...
1294 |       <iframe src="//www.youtube.com/embed/..." allowfullscreen></iframe>
1295 |     </video>
1296 | 
1297 | 
1298 | テーブルデータ
1299 | --------------
1300 | 
1301 | ### 1行に1つのセルを書く
1302 | 
1303 | 長い行は把握しづらいです。
1304 | 
1305 | 悪い例:
1306 | 
1307 |     <tr>
1308 |       <td>General</td><td>The root Element</td><td>Sections</td>
1309 |     </tr>
1310 | 
1311 | 良い例:
1312 | 
1313 |     <tr>
1314 |       <td>General</td>
1315 |       <td>The root Element</td>
1316 |       <td>Sections</td>
1317 |     </tr>
1318 | 
1319 | 
1320 | ### 見出しセルには`th`要素を使う
1321 | 
1322 | 避ける理由はないでしょう。
1323 | 
1324 | 悪い例:
1325 | 
1326 |     <table>
1327 |       <thead>
1328 |         <tr>
1329 |           <td><strong>Element</strong></td>
1330 |           <td><strong>Empty</strong></td>
1331 |           <td><strong>Tag omission</strong></td>
1332 |         </tr>
1333 |       </thead>
1334 |       <tbody>
1335 |         <tr>
1336 |           <td><strong><code>pre</code></strong></td>
1337 |           <td>No</td>
1338 |           <td>Neither tag is omissible</td>
1339 |         </tr>
1340 |         <tr>
1341 |           <td><strong><code>img</code></strong></td>
1342 |           <td>Yes</td>
1343 |           <td>No end tag</td>
1344 |         </tr>
1345 |       </tbody>
1346 |     </table>
1347 | 
1348 | 良い例:
1349 | 
1350 |     <table>
1351 |       <thead>
1352 |         <tr>
1353 |           <th>Element</th>
1354 |           <th>Empty</th>
1355 |           <th>Tag omission</th>
1356 |         </tr>
1357 |       </thead>
1358 |       <tbody>
1359 |         <tr>
1360 |           <th><code>pre</code></th>
1361 |           <td>No</td>
1362 |           <td>Neither tag is omissible</td>
1363 |         </tr>
1364 |         <tr>
1365 |           <th><code>img</code></th>
1366 |           <td>Yes</td>
1367 |           <td>No end tag</td>
1368 |         </tr>
1369 |       </tbody>
1370 |     </table>
1371 | 
1372 | 
1373 | フォーム
1374 | --------
1375 | 
1376 | ### フォームコントロールは`label`要素で括る
1377 | 
1378 | `label`要素はフォーム要素へフォーカスを当てるのに役立ちます。
1379 | 
1380 | 悪い例:
1381 | 
1382 |     <p>Query: <input name="q" type="text"></p>
1383 | 
1384 | 良い例:
1385 | 
1386 |     <p><label>Query: <input name="q" type="text"></label></p>
1387 | 
1388 | 
1389 | ### 可能ならば`for`属性は省略する
1390 | 
1391 | `label`要素はいくつかのフォーム要素を含められます。
1392 | 
1393 | 悪い例:
1394 | 
1395 |     <label for="q">Query: </label><input id="q" name="q" type="text">
1396 | 
1397 | 良い例:
1398 | 
1399 |     <label>Query: <input name="q" type="text"></label>
1400 | 
1401 | 
1402 | ### `input`要素では適切な`type`属性を使う
1403 | 
1404 | 適切な`type`属性により、ブラウザーは`input`要素へちょっとした機能を与えてくれます。
1405 | 
1406 | 悪い例:
1407 | 
1408 |     <label>Search keyword: <input name="q" type="text"></label>
1409 | 
1410 | 良い例:
1411 | 
1412 |     <label>Search keyword: <input name="q" type="search"></label>
1413 | 
1414 | 
1415 | ### `input type="submit"`には`value`属性を追加する
1416 | 
1417 | 送信ボタンは、そのデフォルトのラベルがブラウザーや言語設定によって変わってしまいます。
1418 | 
1419 | 悪い例:
1420 | 
1421 |     <input type="submit">
1422 | 
1423 | 良い例:
1424 | 
1425 |     <input type="submit" value="Search">
1426 | 
1427 | 
1428 | ### `pattern`属性を持つ`input`要素には`title`属性を追加する
1429 | 
1430 | もし入力したテキストが`pattern`属性にマッチしない場合、`title`属性の値がヒントとして表示されます。
1431 | 
1432 | 悪い例:
1433 | 
1434 |     <input name="security-code" pattern="[0-9]{3}" type="text">
1435 | 
1436 | 良い例:
1437 | 
1438 |     <input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
1439 | 
1440 | 
1441 | ### `placeholder`属性をラベル付けに使わない
1442 | 
1443 | `label`要素がラベルのためにあり、`placeholder`属性は短いヒントのためにあります。
1444 | 
1445 | 悪い例:
1446 | 
1447 |     <input name="email" placeholder="Email" type="text">
1448 | 
1449 | 良い例:
1450 | 
1451 |     <label>Email: <input name="email" placeholder="john.doe@example.com" type="text"></label>
1452 | 
1453 | 
1454 | ### `option`要素は1行に1つ書く
1455 | 
1456 | 長い行は把握しづらいです。
1457 | 
1458 | 悪い例:
1459 | 
1460 |     <datalist id="toc">
1461 |       <option label="General"><option label="The root element"><option label="Sections">
1462 |     </datalist>
1463 | 
1464 | 良い例:
1465 | 
1466 |     <datalist id="toc">
1467 |       <option label="General">
1468 |       <option label="The root element">
1469 |       <option label="Sections">
1470 |     </datalist>
1471 | 
1472 | 
1473 | ### `progress`要素には`max`属性を追加する
1474 | 
1475 | `max`属性があると、`value`属性を簡単な形式で書くことができます。
1476 | 
1477 | 悪い例:
1478 | 
1479 |     <progress value="0.5"> 50%</progress>
1480 | 
1481 | 良い例:
1482 | 
1483 |     <progress max="100" value="50"> 50%</progress>
1484 | 
1485 | 
1486 | ### `meter`要素では`min`及び`max`属性を追加する
1487 | 
1488 | `min`と`max`属性があると、`value`属性を簡単な形式で書くことができます。
1489 | 
1490 | 悪い例:
1491 | 
1492 |     <meter value="0.5"> 512GB used (1024GB total)</meter>
1493 | 
1494 | 良い例:
1495 | 
1496 |     <meter min="0" max="1024" value="512"> 512GB used (1024GB total)</meter>
1497 | 
1498 | 
1499 | ### `legend`要素は`fieldset`要素の最初に置く
1500 | 
1501 | 仕様がそう要求しています。
1502 | 
1503 | 悪い例:
1504 | 
1505 |     <fieldset>
1506 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1507 |       ...
1508 |       <legend>About "General"</legend>
1509 |     </fieldset>
1510 | 
1511 | 良い例:
1512 | 
1513 |     <fieldset>
1514 |       <legend>About "General"</legend>
1515 |       <p><label>Is this section is useful?: <input name="usefulness-general" type="checkbox"></label></p>
1516 |       ...
1517 |     </fieldset>
1518 | 
1519 | 
1520 | スクリプティング
1521 | ----------------
1522 | 
1523 | ### JavaScriptでは`type`属性を省略する
1524 | 
1525 | HTML5では、`script`要素における`type`属性の初期値は`text/javascript`です。
1526 | 
1527 | 悪い例:
1528 | 
1529 |     <script type="text/javascript">
1530 |       ...
1531 |     </script>
1532 | 
1533 | 良い例:
1534 | 
1535 |     <script>
1536 |       ...
1537 |     </script>
1538 | 
1539 | 
1540 | ### `script`要素の中をコメントアウトしない
1541 | 
1542 | この儀式は古いブラウザーのためです。
1543 | 
1544 | 悪い例:
1545 | 
1546 |     <script>
1547 |     /*<![CDATA[*/
1548 |       ...
1549 |     /*]]>*/
1550 |     </script>
1551 | 
1552 | 同じく悪い例:
1553 | 
1554 |     <script>
1555 |     <!--
1556 |       ...
1557 |     // -->
1558 |     </script>
1559 | 
1560 | 良い例:
1561 | 
1562 |     <script>
1563 |       ...
1564 |     </script>
1565 | 
1566 | 
1567 | ### `script`要素を動的に生成するテクニックを使わない
1568 | 
1569 | 明快さとパフォーマンスの両面で`async`属性が最良です。
1570 | 
1571 | 悪い例:
1572 | 
1573 |     <script>
1574 |       var script = document.createElement("script");
1575 |       script.async = true;
1576 |       script.src = "//example.com/widget.js";
1577 |       document.getElementsByTagName("head")[0].appendChild(script);
1578 |     </script>
1579 | 
1580 | 良い例:
1581 | 
1582 |     <script async defer src="//example.com/widget.js"></script>
1583 | 
1584 | 
1585 | その他
1586 | ------
1587 | 
1588 | ### 一貫した量でインデントする
1589 | 
1590 | インデントは読みやすさにおいて重要です。
1591 | 
1592 | 悪い例:
1593 | 
1594 |     <html>
1595 |     	<head>
1596 |     	  ...
1597 |     	</head>
1598 |       <body>
1599 |         ...
1600 |       </body>
1601 |     </html>
1602 | 
1603 | 良い例:
1604 | 
1605 |     <html>
1606 |       <head>
1607 |         ...
1608 |       </head>
1609 |       <body>
1610 |         ...
1611 |       </body>
1612 |     </html>
1613 | 
1614 | 
1615 | ### 内部リンクには絶対パスを使う
1616 | 
1617 | 絶対パスはインターネット回線のないローカルの環境でもうまく動きます。
1618 | 
1619 | 悪い例:
1620 | 
1621 |     <link rel="apple-touch-icon" href="http://you.example.com/apple-touch-icon-precomposed.png">
1622 |     ...
1623 |     <p>You can find more at <a href="//you.example.com/contact.html">contact page</a>.</p>
1624 | 
1625 | 良い例:
1626 | 
1627 |     <link rel="apple-touch-icon" href="/apple-touch-icon-precomposed.png">
1628 |     ...
1629 |     <p>You can find more at <a href="/contact.html">contact page</a>.</p>
1630 | 
1631 | 
1632 | 投稿者
1633 | ------
1634 | 
1635 | - [@hail2u]
1636 | - [@momdo]
1637 | - [@techhtml]
1638 | 
1639 | 
1640 | ライセンス
1641 | ----------
1642 | 
1643 | [CC0]
1644 | 
1645 | 
1646 | [@hail2u]: https://github.com/hail2u
1647 | [@momdo]:  https://github.com/momdo
1648 | [@techhtml]:  https://github.com/techhtml
1649 | [CC0]:     http://creativecommons.org/publicdomain/zero/1.0/
1650 | 


--------------------------------------------------------------------------------