pre 태그에서 새 줄로 시작 X
첫번째 줄바꿈은 브라우저에서 무시하지만, 두번째부터는 렌더링된다.
Bad:
<pre>
<!DOCTYPE html>
</pre>Good:
<pre><!DOCTYPE html>
</pre>blockquote 태그 사용 시 적절한 태그 사용
blockquote 요소의 콘텐츠는 인용한 내용이지, 문장 덩어리가 아니다.
-> 이거 뭐지 ㅜㅜ..
Bad:
<blockquote>For writing maintainable and scalable HTML documents.</blockquote>Good:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>blockquote 태그 안에는 하나의 태그만 사용
blockquote 요소의 콘텐츠는 인용구로 사용함으로 하나의 태그만 사용
-> 이거 뭐지 ㅜㅜ..
Bad:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<p>— HTML Best Practices</p>
</blockquote>Good:
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<p>— HTML Best Practices</p>Also good (recommended by WHATWG):
<figure>
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
</blockquote>
<figcaption>— HTML Best Practices</figcaption>
</figure>Also good too (recommended by W3C):
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<footer>— HTML Best Practices</footer>
</blockquote>li 태그는 한줄에 하나씩 사용
li 태그는 한줄에 하나씩만 사용
Bad:
<ul>
<li>General</li><li>The root Element</li><li>Sections</li>...
</ul>Good:
<ul>
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ul>ol 요소 스타일 적용보다는 가능한 type 속성 사용
ol 요소 사용 시 type 속성으로 사용하는 것이 좋다.
Bad:
<head>
<style>
.toc {
list-style-type: upper-roman;
}
</style>
</head>
<body>
<ol class="toc">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>Good:
<body>
<ol type="I">
<li>General</li>
<li>The root Element</li>
<li>Sections</li>
...
</ol>
</body>다이얼로그를 위해 dl을 쓰지 마라
dl 요소는 HTML의 연결 목록으로 제한한다.
Bad:
<dl>
<dt>Costello</dt>
<dd>Look, you gotta first baseman?</dd>
<dt>Abbott</dt>
<dd>Certainly.</dd>
<dt>Costello</dt>
<dd>Who’s playing first?</dd>
<dt>Abbott</dt>
<dd>That’s right.</dd>
<dt>Costello becomes exasperated.</dd>
<dt>Costello</dt>
<dd>When you pay off the first baseman every month, who gets the money?</dd>
<dt>Abbott</dt>
<dd>Every dollar of it.</dd>
</dl>Good:
<p>Costello: Look, you gotta first baseman?</p>
<p>Abbott: Certainly.</p>
<p>Costello: Who’s playing first?</p>
<p>Abbott: That’s right.</p>
<p>Costello becomes exasperated.</p>
<p>Costello: When you pay off the first baseman every month, who gets the money?</p>
<p>Abbott: Every dollar of it.</p>figcaption 요소를 figure 요소의 첫째 or 마지막 자식요소로 써라
스펙 (WHATWG 버전)에서 figcaption 요소를 figure 요소 중간에 두는 걸 허용하지 않는다.
Bad:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
</figure>Good:
<figure>
<img alt="Front cover of the “HTML Best Practices” book" src="/img/front-cover.png">
<img alt="Back cover of the “HTML Best Practices” book" src="/img/back-cover.png">
<figcaption>“HTML Best Practices” Cover Art</figcaption>
</figure>사용 가능하다면 main 태그
main 요소는 콘텐츠를 감쌀 때 쓸 수 있다.
Bad:
<div id="content">
...
</div>Good:
<main>
...
</main>div 태그 사용은 줄일 수 있다면 줄이자
div 요소는 최후의 수단이다.
Bad:
<div class="chapter">
...
</div>Good:
<section>
...
</section>
댓글