소문자 태그 이름 및 속성명 사용

• HTML은 DTD의 명세에 맞게 작성하며, W3C Validation을 통과해야 합니다.
• DTD를 제외한 모든 엘리먼트와 애트리뷰트는 소문자로 작성합니다.

<!-- 👎 Bad -->
<SPAN Class="desc">간단한 설명</SPAN>
<!-- 👍 Good -->
<span class="desc">간단한 설명</span>

속성 값에 큰따옴표(" ") 사용

<!-- 👎 Bad -->
<input type=text name=username>
<!-- 👍 Good -->
<input type="text" name="username">

자체 닫힘 태그(Self-closing tags) 사용

<!-- 👎 Bad -->
<img src="image.jpg" alt="Image">
<!-- 👍 Good -->
<img src="image.jpg" alt="Image" />

의미론적 태그(Semantic tags) 사용

<!-- 👎 Bad -->
<div id="header">Header Content</div>
<!-- 👍 Good -->
<header>Header Content</header>

모든 이미지 태그에 alt 속성 추가

<!-- 👎 Bad -->
<img src="image.jpg">
<!-- 👍 Good -->
<img src="image.jpg" alt="Descriptive text" />

필요할 경우 주석 추가

<!-- 👎 Bad -->
<div class="container">
  <!-- container start -->
  <p>Content</p>
  <!-- container end -->
</div>
<!-- 👍 Good -->
<div class="container">
  <!-- This is the main content container -->
  <p>Content</p>
</div>

type이 image인 경우 alt 애트리뷰트를 반드시 선언

<!-- 👎 Bad -->
<input type="image" src="submit.png">
<!-- 👍 Good -->
<input type="image" src="submit.png" alt="Submit button">

폼 요소는 for 애트리뷰트를 부여

• <input>, <select>, <textarea>와 같은 폼 요소는 for 애트리뷰트를 부여하여 해당 요소의 id 값과 동일한 이름으로 연결(coupling)합니다.