HTML(5) 스타일 가이드 및 코드 규약
HTML 코드 약속
웹 개발자들은 HTML에서 사용하는 코드 스타일과 문법에 대해 불확실합니다.
2000년에서 2010년 사이, 많은 웹 개발자들이 HTML에서 XHTML로 전환했습니다.
XHTML을 통해 개발자는 반드시 정형화된 코드를 작성해야 했습니다.
HTML5는 코드 검증 시 더 유연합니다.
HTML5를 통해, 당신은 자신만의최상의 관행, 스타일 가이드라인 및 코드 약속。
지능적이고 미래를 보장합니다
스타일의 논리적 사용은 다른 사람들이 HTML을 더 쉽게 이해하고 사용할 수 있게 합니다.
미래에는 XML 레이더와 같은 프로그램이 HTML을 읽어야 할 수 있습니다.
정형화된 '약간의 XHTML과 유사한' 문법을 사용하면 더 지능적입니다.
주석:항상 스마트하고 정리되고 깨끗하고 정형화된 스타일을 유지하십시오.
올바른 문서 타입을 사용하십시오
문서의 첫 번째 줄에 항상 문서 타입을 선언하십시오：
!DOCTYPE html
소문자 태그를 일관되게 사용하는 경우 사용할 수 있습니다：
<!doctype html>
소문자 요소 이름을 사용하십시오
HTML5는 요소 이름에 대소문자 혼합을 허용합니다.
저희는 소문자 요소 이름을 사용하는 것을 추천합니다：
- 대소문자 혼합 이름은 좋지 않습니다
- 개발자들은 소문자 이름을 사용하는 것을 선호합니다(예를 들어 XHTML에서)
- 소문자는 더 깨끗하게 보입니다
- 소문자는 쓰기 쉽습니다
또래불구하고:
<SECTION> <p>This is a paragraph.</p> </SECTION>
악합니다：
<Section> <p>This is a paragraph.</p> </SECTION>
적당합니다：
<section> <p>This is a paragraph.</p> </section>
모든 HTML 요소를 닫기
HTML5에서는 모든 요소를 닫지 않아도 됩니다(예를 들어 <p> 요소).
저희는 모든 HTML 요소를 닫는 것을 권장합니다：
그런 모습은 나쁩니다:
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
그런 모습은 좋습니다:
<section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section>
빈 HTML 요소를 닫기
HTML5에서는 빈 HTML 요소를 닫는 것이 선택적입니다.
이렇게도 허용됩니다:
<meta charset="utf-8">
이렇게도 허용됩니다:
<meta charset="utf-8" />
슬래시(/)는 XHTML과 XML에서 필수적입니다.
XML 소프트웨어가 여러분의 페이지에 접근할 것이라면, 이 습관을 유지하는 것이 좋은 아이디어입니다.
소문자 속성 이름 사용
HTML5는 대소문자 혼합의 속성 이름을 허용합니다.
저희는 소문자 속성 이름을 사용하는 것을 추천합니다:
- 혼합 속성 이름은 좋지 않습니다
- 개발자는 소문자 속성 이름을 사용하惯합니다 (예: XHTML에서)
- 소문자 속성 이름은 상황에 따라 더 깨끗합니다
- 소문자 속성 이름은 쓰기가 더 쉽습니다
그런 모습은 나쁩니다:
<div CLASS="menu">
그런 모습은 좋습니다:
<div class="menu">
속성 값에 쌍따옴표 추가
HTML5는 쌍따옴표 없는 속성 값을 허용합니다.
저희는 속성 값에 쌍따옴표를 추가하는 것을 추천합니다:
- 속성 값이 값에 포함되어 있으면 쌍따옴표를 사용해야 합니다
- 혼합 스타일은 절대로 좋지 않습니다
- 쌍따옴표로 감싸인 값은 더 읽기 쉽습니다
이 속성 값은 공백이 포함되어 있기 때문에 무효합니다:
<table class=table striped>
이렇게는 유효합니다:
<table class="table striped">
필수 속성
이미지에 항상 사용하세요 alt 이 속성은 이미지가 표시되지 않을 때 중요합니다.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
이미지 크기를 항상 정의하세요. 이렇게 하면 브라우저가 이미지를 로드하기 전에 공간을 예약하여 깜빡이는 현상을 줄입니다.
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">
공백과 동등호
동등호 양쪽의 공백은 합법적입니다:
<link rel = "stylesheet" href = "styles.css">
하지만 공백을 줄이면 더 읽기 쉽습니다. But space-less is easier to read, and groups entities better together:
<link rel="stylesheet" href="styles.css">
긴 코드 행을 피해주세요.
HTML 편집기를 사용할 때, HTML 코드를 읽기 위해 왼쪽과 오른쪽으로 스크롤을 사용하는 것은 불편합니다.
가능한 한 코드 행이 80개 문자를 초과하지 않도록 해주세요.
공백 행과 들여쓰기
이유 없이 공백 행을 추가하지 마세요.
읽기 편의성을 높이기 위해 대형이나 논리 코드 블록 사이에 공백 행을 추가하세요.
읽기 편의성을 높이기 위해 두 공백을 들여쓰기로 사용하세요. 탭은 사용하지 마세요.
필요없는 공백 행과 들여쓰기를 사용하지 마세요.
불필요한 것:
<body>
<h1>유명한 도시</h1>
<h2>Tokyo</h2>
<p>
도쿄는 일본의 수도이자 대도쿄 지역의 중심지이며,
세계에서 가장 인구가 많은 메트로폴리탄 지역이며.
일본 정부와 제국 궁전의 자리이며,
일본 제국 왕室的 근거지이자.
</p>
</body>
보다 나은 방법:
<body> <h1>유명한 도시</h1> <h2>Tokyo</h2> <p> 도쿄는 일본의 수도이자 대도쿄 지역의 중심지이며, 세계에서 가장 인구가 많은 메트로폴리탄 지역이며. 일본 정부와 제국 궁전의 자리이며, 일본 제국 왕室的 근거지이자. </p> </body>
표 그림 예제：
<table>
<tr>
<th>Name</th>
<th>Description</th>
<tr>
<tr>
<td>A</td>
<td>Description of A</td>
<tr>
<tr>
<td>B</td>
<td>Description of B</td>
<tr>
</table>
목록 표시 예제：
<ol> <li>LondonA</li> <li>Paris</li> <li>Tokyo</li> </ol>
<html>와 <body>를 생략하죠?
HTML5 표준에서는 <html> 태그와 <body> 태그를 생략할 수 있습니다.
다음 코드는 HTML5로 확인됩니다：
예시
!DOCTYPE html <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p>
우리는 <html>와 <body> 태그를 생략하지 않는 것을 권장합니다.
<html> 요소는 텍스트의 루트 요소입니다. 페이지 언어를 정의하는 데 적합한 위치입니다.
!DOCTYPE html <html lang="en-US">
접근성 애플리케이션(스크린리더)과 검색 엔진을 위해 선언된 언어는 중요합니다.
<html>나 <body>를 생략하면 DOM 및 XML 소프트웨어가 충돌할 수 있습니다.
<body>를 생략하면 오래된 브라우저(IE9)에서 오류가 발생할 수 있습니다.
<head>를 생략하죠?
HTML5 표준에서는 <head> 태그도 생략할 수 있습니다.
기본적으로, 브라우저는 <body> 이전의 모든 요소를 기본적인 <head> 요소에 추가합니다.
head 태그를 생략하면 HTML의 복잡성을 줄일 수 있습니다：
예시
!DOCTYPE html <html> <title>Page Title</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
주석:웹 개발자에게는 태그를 생략하는 방법은 낯설습니다. 규칙을 설정하는 것은 시간이 걸립니다.
메타데이터
<title> 요소는 HTML5에서 필수입니다. 가능한 한 의미 있는 제목을 만들어 주십시오.
<title>HTML5 문법 및 코드 스타일</title>
적절한 해석 및 올바른搜索引擎 인덱싱을 위해, 문서에서 언어와 문자编码의 정의는 가능한 빨리 하십시오:
!DOCTYPE html <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 문법 및 코드 스타일</title> </head>
HTML 주석
단단 주석은 단一行에 작성되어야 하며, <!-- 뒤에 공백을 추가하고, --> 앞에 공백을 추가합니다:
<!-- This is a comment -->
긴 주석은 여러 행을 건너뜀으로써 <!--와-->로 독립된 행에 작성되어야 합니다:
<!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. -->
두 칸 공백으로 인덱싱된 긴 주석은 더 쉽게 관찰됩니다.
스타일 시트
스타일 시트를 링크할 때 간단한 문법을 사용하십시오 (type 속성은 필수가 아닙니다):
<link rel="stylesheet" href="styles.css">
단단 규칙은 이렇게 한 행으로 압축할 수 있습니다:
p.into {font-family:"Verdana"; font-size:16em;}
긴 규칙은 여러 행으로 나누어야 합니다:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
- 개방 괄호와 선택자가 같은 행에 위치합니다
- 개방 괄호 앞에 공백을 사용합니다
- 두 문자의 인덱스를 사용한 인덱스를 사용합니다
- 각 속성과 그 값 사이에冒號 한 칸 공백을 사용합니다
- 각 쉼표나 세미콜론 뒤에 공백을 사용합니다
- 각 속성 값 쌍(최종 쌍 포함) 뒤에 세미콜론을 사용합니다
- 값이 공백을 포함할 때만 값을 둘러싸는 것을 사용합니다
- 닫는 괄호를 새 행에 위치시키고, 이전에 공백을 사용하지 마십시오
- 각 행에 80자를 초과하지 않도록 합니다
주석:쉼표나 세미콜론 뒤에 공백을 추가하는 것은 모든 작성 스타일의 일반 규칙입니다。
HTML에서 자바스크립트를 로드합니다
외부 스크립트를 로드할 때 간단한 문법을 사용하십시오（type 속성은 필수가 아닙니다）：
<script src="myscript.js">
JavaScript를 통해 HTML 요소에 접근
혼잡한 HTML 스타일의 결과는 JavaScript 오류가 발생할 수 있습니다
이 두 개의 JavaScript 문장은 다른 결과를 생성합니다：
var obj = getElementById("Demo")
var obj = getElementById("demo")
가능한 경우, HTML에서（JavaScript와 함께）동일한 이름 규약을 사용하십시오
JavaScript 스타일 가이드에 방문하십시오
소문자 파일명을 사용하십시오
대부분의 웹 서버（Apache, Unix）는 파일명의 대소문자에 대한 감수성이 있습니다：
london.jpg로 London.jpg에 접근할 수 없습니다
기타 웹 서버（マイ크로소프트, IIS）는 대소문자에 대한 감수성이 없습니다：
london.jpg 또는 London.jpg로 London.jpg에 접근할 수 있습니다
혼합 대소문자를 사용할 경우, 극도의 일관성을 유지해야 합니다。
대소문자에 대한 감수성이 없는 서버에서 대소문자에 대한 감수성이 있는 서버로 전환하면, 이러한 작은 오류가 웹사이트를 파괴할 수 있습니다。
이러한 문제를 피하기 위해 항상 소문자 파일명을 사용하십시오（가능한 경우）。
파일 확장자
HTML 파일명은 확장자를 사용해야 합니다 .html（而不是 .htm）。
CSS 파일은 확장자를 사용해야 합니다 .css。
JavaScript 파일은 확장자를 사용해야 합니다 .js。
