유지보수 하기에 용이하고 확장하기 쉬운 HTML 문서를 작성하기 위해서는 HTML 작성에 대한 Best Practice를 꼭 한 번은 알고 넘어가는 것이 좋다 생각합니다.
다음은 html-best-practice 라는 깃허브 페이지의 내용을 번역 및 요약한 내용입니다. ( https://github.com/hail2u/html-best-practices )
1. HTML 전반
- HTML문서 시작에 DOCTYPE 명시할 것
<!DOCTYPE html>
- 가능한 문자 레퍼런스를 쓰지 말 것
- UTF-8로 HTML을 작성하면 대부분의 문자와 이모지 등은 모두 직접 쓸 수 있다.
Bad : <p><small>Copyright © 2014 W3C<sup>®</sup></small></p>Good : <p><small>Copyright © 2014 W3C<sup>®</sup></small></p>
- &, <, >, ", and ‘ 는 문자 레퍼런스로 변환할 것
Bad : <h1>The "&" character</h1>Good : <h1>The "&" character</h1>
- 제어 문자나 보이지않는 문자를 위해서는 숫자 문자 레퍼런스를 쓸 것
Bad : <p>This book can read in 1 hour.</p>Good : <p>This book can read in 1 hour.</p>
- 주석 내용 주위에는 공백을 반드시 추가할 것
Good : <!-- This section is non-normative -->
- 닫는 태그 생략하지 말 것
- 빈 요소 포맷을 사용하지 말 것
Bad : <hr />Good : <hr>
- 속성 값 주위에 공백을 넣지 말 것
Good : <h1 class="title">HTML Best Practices</h1>
- 대소문자 섞어쓰지 말 것
- 태그 이름, 속성명은 소문자로 쓰자
- Single Quote 와 Double Quote를 섞어쓰지 말 것
- 속성 사이에 공백을 두 칸이상 띄우지 말 것
- 불리언 속성의 값을 되도록 생략하자
Good : <audio autoplay src="/audio/theme.mp3">
- Namespace 를 생략할 것
- SVG와 MathML은 HTML에서 직접 쓸 수 있다.
Bad : <svg xmlns="http://www.w3.org/2000/svg">Good : <svg>
- XML 속성 쓰지 말 것
Bad : <span lang="ja" xml:lang="ja">...</span>
- data-*, Microdata, and 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">
- 기본 ARIA 시맨틱을 암시하도록 할 것
- 일부 요소는 HTML 문서에서 ARIA role을 암시하고 있기 때문에 굳이 명시하지 않아도 된다.
Bad : <hr role="separator">Good : <hr>
2. 루트 요소(Root element)
- lang 속성 추가할 것
Good : <html lang="en-US">
- lang 속성 가능한 짧게 쓸 것
- 한국어는 ko 사용, 국가코드 필요 없음
Good : <html lang="ko">
- data-*을 가능한 한 없앨 것
- 적절한 속성은 브라우저에서 알아서 처리해준다.
3. 메타데이터
- head 태그 내부 중첩으로 title 요소 반드시 추가할 것
- 브라우저 뿐만 아니라 여러 어플리케이션에서 사용된다.
Good : <title>HTML Best Practices</title>
- base 요소 쓰지 말 것
- 절대 경로를 쓰는 것이 개발자와 사용자 모두에게 이롭다.
Bad : <base href="/blog/">
- 마이너한 링크 리소스의 MIME 타입을 정의할 것
Bad : <link href="/pdf" rel="alternate">Good : <link href="/pdf" rel="alternate" type="application/pdf">
- favicon.ico를 링크하지 말 것
- 대부분의 브라우저는 /favicon.ico 파일을 비동기적으로 자동으로 가져온다.
Bad : <link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">Good : favicon.ico 파일을 루트 디렉토리에 위치시킨다.
- 위와는 반대로 apple-touch-icon은 링크 할 것
Good : <link href="/apple-touch-icon.png" rel="apple-touch-icon">
- 대체 스타일 시트에는 title 속성을 추가할 것
Good : <link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">
- URL의 경우엔 link 요소를 사용할 것
Bad : <meta content="https://example.com/blog/hello" itemprop="url">Good : <link href="/blog/hello" itemprop="url">
- head 태그 내부 중첩으로 문서 인코딩 방식을 명시할 것
<meta charset="UTF-8">
- 레거시 문자 인코딩 방식을 사용하지 말 것, UTF-8을 쓸 것
- 인코딩 방식을 head 태그 내에서 가장 먼저 선언할 것
- CSS에는 type 속성 생략할 것
- HTML에서 style 태그의 기본 type 속성은 text/css 이다.
Bad : <style type="text/css">Good : <style>
- style 태그 내에서는 주석 달지 말 것
- CSS를 위한 태그와 JS를 위한 태그들의 선언 순서를 섞지 말 것
4. 섹션
- <body>태그 선언을 생략하지 말 것
- <hgroup> 태그의 존재는 아예 잊어버릴 것
- <address> 태그는 반드시 연락처 정보에만 사용할 것
5. 그룹핑 콘텐츠
- <pre> 태그에서는 절대로 newline으로 시작하지 말 것
- <blockquote> 내부에 적절한 태그 사용할 것
- 인용부호 그 자체이지 문자의 모음을 위한 태그가 아니다.
Good : <blockquote><p>For writing maintainable and scalable HTML documents.</p></blockquote>
- 한 라인에는 하나의 리스트 아이템만 쓸 것
- <ol>태그에는 type 속성을 명시할 것
- 다이얼로그를 위해 <dl> 태그를 쓰지 말 것
- <figcaption> 태그는 <figure>태그의 첫번째 혹은 마지막 자식 요소로 위치하도록 할 것
- <main> 태그 사용할 것
- <div> 태그의 사용을 최대한 피할 것
6. 텍스트 레벨에서의 시맨틱
- 그룹화될 수 있는 같은 링크를 분리하지 말 것
Bad :
<h1><a href="https://whatwg.org/">WHATWG</a></h1>
<p><a href="https://whatwg.org/">A community maintaining and evolving HTML since 2004.</a></p>Good :
<a href="https://whatwg.org/">
<h1>WHATWG</h1>
<p>A community maintaining and evolving HTML since 2004.</p>
</a>
- 다운로드 리소스에는 download 속성 사용할 것
Good : <a download href="/downloads/offline.zip">offline version</a>
- 필요시엔 rel, hreflang, type 속성 사용할 것
Good : <a href="/ko/pdf" hreflang="ko" rel="alternate" type="application/pdf">Korean PDF version</a>
- 링크의 텍스트를 명확하게 표현할 것
- 링크 텍스트는 리소스의 라벨이어야한다.
Bad :
<p><a href="/pdf" rel="alternate" type="application/pdf">Click here</a> to view PDF version.</p>Good :
<p><a href="/pdf" rel="alternate" type="application/pdf">PDF version</a> is also available.</p>
- 경고나 주의 문구에는 <em> 태그 사용하지 말 것
- <strong> 태그가 더 적절할 것이다.
- <s>, <i>, <b>, <u> 태그 사용 되도록 지양할 것
- <q>태그에 인용부호 넣지 말 것
- 브라우저에서 자동으로 삽입해준다.
- <abbr> 태그에 title 속성으로 설명을 명시할 것
- <ruby> 태그는 자세히 마크업할 것
Bad : <ruby>HTML<rt>えいちてぃーえむえる</ruby>Good : <ruby>HTML<rp> (</rp><rt>えいちてぃーえむえる</rt><rp>) </rp></ruby>
- 기계가 읽을 수 없는 <time> 태그에는 datetime 속성을 추가할 것
Good : <time datetime="2014-12-19">Dec 19, 2014</time>
- <code> 태그 사용시 class 속성 접두어로 language-를 넣어 언어를 명시할 것
Good : <code class="language-html"><!DOCTYPE html></code>
- <kbd> 태그는 최대한 간결하게 작성할 것
Bad : <kbd><kbd>Ctrl</kbd>+<kbd>F5</kbd></kbd>Good : <kbd>Ctrl+F5</kbd>
- <span> 태그 사용 지양할 것
- 코드 작성시 <br>태그 다음에 new line으로 시작할 것
- <br>태그는 내용의 줄바꿈만을 위해 사용할 것
7. 수정
- <ins>와 <del> 태그로 다른 태그를 건너 뛰어 작성하지 말 것
Bad :
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</p>
<p>Don’t trust!</p></del>Good :
<p>For writing maintainable and scalable HTML documents.<del> And for mental stability.</del></p>
<del><p>Don’t trust!</p></del>
8. 임베디드 콘텐츠
- <picture> 태그에는 <img> 태그로 fallback을 제공할 것
Good :
<picture>
<source srcset="/img/logo.webp" type="image/webp">
<source srcset="/img/logo.hdp" type="image/vnd.ms-photo">
<source srcset="/img/logo.jp2" type="image/jp2">
<img src="/img/logo.jpg">
</picture>
- 필요시 <img> 태그에는 alt 속성을 추가할 것
- alt 속성은 가능하면 비워둘 것
- 이미지가 본문을 보충하기 위한 목적이라면, 근처에 비슷한 내용이 있을 것이므로.
- <iframe> 태그 안의 내용은 비워둘 것
- map 요소 안의 내용도 마크업할 것
- <audio> 나 <video> 태그 안에도 <iframe>같은 fallback을 만들어둘 것
9. 테이블 데이터
- 코드 작성시 한 라인에는 한 셀만 쓸 것
- 테이블 헤더로는 <th> 사용할 것
10. Form
- form control은 label 태그로 감쌀 것
Good : <p><label>Query: <input name="q" type=“text"></label></p>
- for 속성은 되도록 생략할 것
- <input> 태그에 적절한 type 속성 사용할 것
- input type=“submit" 에 value 속성 사용할 것
Good : <input type="submit" value="Search">
- pattern 속성을 가진 input 요소엔 title 속성을 추가할 것
Good :
<input name="security-code" pattern="[0-9]{3}" title="A security code is a number in three figures." type="text">
- placeholder 속성을 라벨링하는데 쓰지 말 것
- placeholder는 라벨링이 아닌 예시 등의 간단한 힌트를 주는데 사용해야 한다.
- 코드 작성시 한 라인에는 한 option 요소만 작성할 것
- <progress> 태그에는 max 속성을 추가할 것
- <meter> 태그에는 min속성과 max 속성을 추가할 것
- <fieldset> 태그의 첫번째 자식으로는 <legend> 태그를 위치시킬 것
11. 스크립트
- Javascript를 위한 script 태그에는 type 속성을 생략할 것
- script 태그 내부에는 주석을 달지 말 것
- 스크립트가 삽입된(script-injected) script 요소를 사용하지 말 것
- 대안으로 async 속성을 사용
12. 기타
- 일관된 들여쓰기 사용할 것
- 내부 링크에 절대경로를 사용할 것
- 외부 링크에 프로토콜과 관련된 URL을 사용하지 말 것
Bad : <script src="//example.com/js/library.js">Good : <script src="https://example.com/js/library.js">'HTML' 카테고리의 다른 글
| 검색엔진최적화(SEO) 기초 (0) | 2023.03.27 |
|---|---|
| 웹 접근성(Accessibility) (0) | 2023.03.22 |
| HTML Forms (0) | 2022.12.13 |
| Semantic HTML 작성하기 (0) | 2022.10.31 |
| HTML 기본 (下) (0) | 2022.10.20 |
