문서 작성 시 title 태그를 작성
title 요소 값은 브라우저뿐만 아니라 다양한 어플리케이션에서 사용한다.
Bad:
<head>
<meta charset="UTF-8">
</head>Good:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>base 태그 사용 금지
base 태그를 사용하여 절대 경로나 URL을 설정하는 것은 위험성을 증가 시킨다.
Bad:
<head>
...
<base href="/blog/">
<link href="hello-world" rel="canonical">
...
</head>Good:
<head>
...
<link href="/blog/hello-world" rel="canonical">
...
</head>리소스에는 MIME 타입을 명시
어플리케이션에서 리소스를 어떻게 처리하는 가에 대한 것을 명시해준다.
Bad:
<link href="/pdf" rel="alternate">
<link href="/feed" rel="alternate">
<link href="/css/screen.css" rel="stylesheet">Good:
<link href="/pdf" rel="alternate" type="application/pdf">
<link href="/feed" rel="alternate" type="application/rss+xml">
<link href="/css/screen.css" rel="stylesheet">favicon.ico 링크 금지
대부분의 브라우저에서 /favicon.ico를 자동으로 비동기방식으로 가져온다.
Bad:
<link href="/favicon.ico" rel="icon" type="image/vnd.microsoft.icon">Good:
<!-- Place `favicon.ico` in the root directory. -->Alternate Stylesheet 사용 시 title 속성 추가
사람이 읽을 수 있는 레이블은 스타일시트를 선택하는 데 도움을 줄거다.
Bad:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet">Good:
<link href="/css/screen.css" rel="stylesheet">
<link href="/css/high-contrast.css" rel="alternate stylesheet" title="High contrast">URL 포함 시 meta 대신 link 태그 사용
href 속성 값이 URL로 해석된다.
Bad:
<section itemscope itemtype="http://schema.org/BlogPosting">
<meta content="https://example.com/blog/hello" itemprop="url">
...
</section>Good:
<section itemscope itemtype="http://schema.org/BlogPosting">
<link href="/blog/hello" itemprop="url">
...
</section>문서의 문자 인코딩을 정의
아직 UTF-8이 모든 브라우저에서 기본이 아니다.
Bad:
<head>
<title>HTML Best Practices</title>
</head>Good:
<head>
<meta charset="UTF-8">
<title>HTML Best Practices</title>
</head>레거시 인코딩 포맷 사용 금지
HTTP 헤더는 서버에서 정의해야하며, 아주 쉽다.
Bad:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">Good:
<meta charset="UTF-8">문자 인코딩은 문서 상단에서 선언
스펙상 문자 인코딩이 문서의 첫 1024 바이트 내에 지정되어있어야 한다.
Bad:
<head>
<meta content="width=device-width" name="viewport">
<meta charset="UTF-8">
...
</head>Good:
<head>
<meta charset="UTF-8">
<meta content="width=device-width" name="viewport">
...
</head>UTF-8 사용 권장
UTF-8과 함께라면, 이모티콘을 자유롭게 쓸 수 있다.
Bad:
<meta charset="Shift_JIS">Good:
<meta charset="UTF-8">style 태그 사용 시 type 속성 생략
HTML에서, style 요소의 기본 type 속성 값은 text/css다.
Bad:
<style type="text/css">
...
</style>Good:
<style>
...
</style>style 태그의 내용 주석처리 금지
이는 오랜 브라우저를 위한 것이다.
Bad:
<style>
<!--
...
-->
</style>Good:
<style>
...
</style>CSS와 JavaScript 태그 섞기 금지
때론 script 요소가 DOM 구성을 막기도 한다.
Bad:
<script src="/js/jquery.min.js"></script>
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/main.js"></script>Good:
<link href="/css/screen.css" rel="stylesheet">
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>Also good:
<script src="/js/jquery.min.js"></script>
<script src="/js/main.js"></script>
<link href="/css/screen.css" rel="stylesheet">
댓글