HTML 코드 작성 가이드-HTML 튜토리얼-php.cn

일반 규칙

태그

자동 닫는 태그, 닫을 필요 없음(예: img input br hr, 등);
닫아야 하는 선택적 닫는 태그(예: 또는 )
태그 수를 줄여보세요.

<img src="images/google.png" alt="Google">
<input type="text" name="title">

<ul>
  <li>Style</li>
  <li>Guide</li>
</ul>

<!-- Not recommended -->
<span class="avatar">
  <img src="...">
</span>

<!-- Recommended -->
<img class="avatar" src="...">

로그인 후 복사

클래스 및 ID

클래스 이름은 표현식이 아닌 함수 또는 내용의 이름을 따서 지정해야 합니다.
클래스 및 ID는 소문자로 지정해야 합니다. multiple 단어를 구성할 때 대시 구분을 사용하세요.
고유 ID를 Javascript 후크로 사용하고 스타일 정보 없이 클래스를 생성하지 마세요.

<!-- Not recommended -->
<p class="j-hook left contentWrapper"></p>

<!-- Recommended -->
<p id="j-hook" class="sidebar content-wrapper"></p>

로그인 후 복사

속성 순서

가독성을 보장하려면 HTML 속성이 특정 순서로 표시되어야 합니다.

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

<a id="..." class="..." data-modal="toggle" href="###"></a>

<input class="form-control" type="text">

<img src="..." alt="...">

로그인 후 복사

따옴표

속성 정의에는 큰따옴표를 일률적으로 사용하세요.

<!-- Not recommended -->
<span id=&#39;j-hook&#39; class=text>Google</span>

<!-- Recommended -->
<span id="j-hook" class="text">Google</span>

로그인 후 복사

b 중첩

a 중첩 p는 허용되지 않습니다. 이 제약 조건은 의미론적 중첩 제약 조건이며 이와 다른 다른 제약 조건이 있습니다. a와 같은 엄격한 중첩 제약 조건은 a를 중첩하는 것을 허용하지 않습니다.

모든 브라우저에서 엄격한 중첩 제약 조건이 허용되는 것은 아닙니다. 의미적 중첩 제약 조건의 경우 대부분의 브라우저가 내결함성을 처리하며 생성된 문서 트리가 서로 다를 수 있습니다.

의미적 중첩 제약 조건

< ,

는

엄격한 중첩 제약 조건

인라인 수준 요소는 텍스트 또는 기타 인라인 수준 요소만 포함할 수 있습니다.

는 상호작용 요소인 ,