목차
DOCTYPE으로 시작하기
DOCTYPE은 표준 모드를 활성화하기 위해 필요하다.
Bad:
<html>
...
</html>Good:
<!DOCTYPE html>
<html>
...
</html>레거시 혹은 폐기된 DOCTYPE을 사용 X
DOCTYPE은 더 이상 DTD가 아니다, 간단하게 아래와 같이 사용
Bad:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Good:
<!DOCTYPE html>* DTD(Document Type Definition)란?
XML 문서의 구조 및 해당 문서에서 용할 수
있는 적법한 요소와 속성을 정의하는 것
XML 선언 사용 X
XHTML은 HTML4를 XML에 맞도록 재정의한 언어이다. 이제는 사용하지 말자...
Bad:
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<!DOCTYPE html>Good:
<!DOCTYPE html>특수 문자 레퍼런스를 가능한 한 사용 X
HTML을 UTF-8로 작성한다면 HTML Entitiy를 사용하지 않고 대부분의 특수 문자 및 이모티콘을 직접 쓸 수 있다.
Bad:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>Good:
<p><small>Copyright © 2014 W3C<sup>®</sup></small></p>&, <, >, ", '를 HTML Entity(문자 레퍼런스)로 변환
바로 위 항목과는 다르게 &, <, >, ", ' 문자들은 버그를 유발 할 수 있기 때문에 HTML Entity로 변환하자
Bad:
<h1>The "&" character</h1>Good:
<h1>The "&" character</h1>숫자 문자와 같이 사용하는 제어 문자나 공백 문자는 HTML Entity를 사용
숫자 문자는 다른 문자로 쉽게 착각될 수 있다.
숫자 문자와 같이 사용되는 특수 문자는 쉽게 착각할 수 있기 때문에 HTML Entity를 사용한다.
Bad:
<p>This book can read in 1 hour.</p>Good:
<p>This book can read in 1 hour.</p>주석의 양쪽에는 공백을 삽입
"<!-- -->"는 html에서 주석으로 인식된다. 이런 주석 내용 양쪽에는 공백을 삽입하자.
Bad:
<!--This section is non-normative-->Good:
<!-- This section is non-normative -->Close 태그를 생략 금지
태그를 닫지 않는 것은 문서를 인식하는데 도움이 전혀 안된다.
무조건 태그를 열었으면 닫자.
Bad:
<html>
<body>
...Good:
<html>
<body>
...
</body>
</html>빈 엘리먼트는 제거
실제로 동작하는데 전혀 지장없는 태그는 가독성에도 좋지 않고
이런 내용이 많으면 성능상에도 지장을 줄 수 있다.
Bad:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr />Good:
<img alt="HTML Best Practices" src="/img/logo.png">
<hr>Attribute의 Value와 태그에 불필요한 공백을 넣기 X
전혀 필요 없는 사항
Bad:
<h1 class=" title " >HTML Best Practices</h1>Good:
<h1 class="title">HTML Best Practices</h1>태그와 속성에 대소문자 섞어서 쓰는 것 금지
일관성을 해친다...
Bad:
<a HREF="#general">General</A>Good:
<a href="#general">General</a>Also Good:
<A HREF="#general">General</A>Quotation Mark(", ')를 섞어서 사용 금지
일관성을 해친다...
Bad:
<img alt="HTML Best Practices" src='/img/logo.jpg'>Good:
<img alt="HTML Best Practices" src="/img/logo.jpg">속성 사이에 공백은 하나로 충분
괜히 일관성, 가독성을 해친다.
Bad:
<input name="q" type="search">Good:
<input name="q" type="search">불리언 속성값을 생략
작성하기 쉽다, 안그래?
Bad:
<audio autoplay="autoplay" src="/audio/theme.mp3">Good:
<audio autoplay src="/audio/theme.mp3">네임스페이스 생략
HTML 문서에서 네임스페이스 없이 SVG와 MathML은 바로 쓸 수 있다.
Bad:
<svg xmlns="http://www.w3.org/2000/svg">
...
</svg>Good:
<svg>
...
</svg>* svg(Scalable Vector Graphics) :
백터 이미지 표준, 백터 이미지를 표현하기 위한 포맷
* MathML(Mathmatical Markup Languate) :
수학 수식을 표현하기 위한 마크업 언어
XML 속성 사용 금지
우린 XML 문서를 쓰는게 아닌 HTML 문서를 쓰고있다.
Bad:
<span lang="ja" xml:lang="ja">...</span>Good:
<span lang="ja">...</span>data-*, Microdata, RDFa Lite 속성을 일반 속성 순서 섞어 쓰기 금지
태그 문자열이 많아지면 복잡해 질 수 있다.
일반 속성과 섞어서 쓰지말자 일관성, 가독성을 해친다.
Bad:
<img alt="HTML Best Practices" data-height="31" data-width="88" itemprop="image" src="/img/logo.png">Good:
<img alt="HTML Best Practices" src="/img/logo.png" data-width="88" data-height="31" itemprop="image">* data-*(Data Attribute) :
정의되지 않은 데이터에 대한
확장 가능성을 위해 만들어짐.
의미론적인 정보를 저장할 수 있도록한다.
* Microdata / RDFa :
기존의 데이터에 의미론적인 주석을 다는 것
https://webdir.tistory.com/92,
https://qastack.kr/software/166612/schema-org-vs-microformats
ARIA 시맨틱 사용 선호
일부 요소에서는 HTML 문서에서 ARIA role을 가지므로 지정하지 마라.
Bad:
<nav role="navigation">
...
</nav>
<hr role="separator">Good:
<nav>
...
</nav>
<hr>
댓글