최신 웹 개발 튜토리얼

HTML(5) 스타일 가이드 코딩 규칙

❮ 이전 다음 장 ❯

HTML 코딩 규칙

웹 개발자들은 HTML에서 사용하는 코딩 스타일과 구문에 대한 불확실하다.

2000 년과 2010 년 사이에, 많은 웹 개발자는 HTML에서 XHTML로 변환.

XHTML을 통해 개발자는 유효 쓰기 강요하고 "well-formed" 코드를.

이 검증을 코딩 할 때 HTML5는 좀 더 실수입니다.

HTML5, 당신은 당신의 자신의 모범 사례, 스타일 가이드 코딩 규칙을 만들어야합니다.

스마트와 미래 증명해야합니다

스타일의 필연적 인 사용은 쉽게 다른 사람들이 이해하고 HTML을 사용할 수 있도록합니다.

향후, XML 리더 같은 프로그램은, 당신의 HTML을 읽을 수 있습니다.

잘 형성 사용 "close to XHTML" 구문을 스마트 될 수 있습니다.

항상 스마트 정돈, 청소, 잘 형성 당신의 스타일을 유지.

올바른 문서 형식을 사용하여

항상 문서의 첫 번째 행으로 문서 유형을 선언 :

<!DOCTYPE html>

당신이 낮은 경우 태그와의 일관성을 원하는 경우에, 당신은 사용할 수 있습니다 :

<!DOCTYPE html>

소문자 요소 이름을 사용

HTML5는 요소 이름의 대문자와 소문자를 혼합 할 수 있습니다.

우리는 소문자 요소 이름을 사용하는 것이 좋습니다 :

  • 대문자와 소문자 이름을 혼합하는 것은 나쁘다
  • 개발자는 소문자 이름을 사용하는 데 사용됩니다 (as in 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에서는 모든 요소를 닫을 필요가 없습니다 (for example the <p> element) .

우리는 모든 HTML 요소를 닫는 것이 좋습니다 :

나쁜 상대 :

<section>
  <p>This is a paragraph.
  <p>This is a paragraph.
</section>

좋아 보여:

<section>
  <p>This is a paragraph.</p>
  <p>This is a paragraph.</p>
</section>

닫기 빈 HTML 요소

HTML5에서는 빈 요소를 닫 선택 사항입니다.

이 허용됩니다 :

<meta charset="utf-8">

이것은 또한 허용된다 :

<meta charset="utf-8" />

슬래시 (/) XHTML 및 XML 필요합니다.

당신이 XML 소프트웨어가 페이지에 액세스 할 것으로 예상하는 경우, 그것을 유지하는 좋은 생각이 될 수 있습니다.

사용 소문자는 이름 속성

HTML5는 속성 이름에 대문자와 소문자를 혼합 할 수 있습니다.

우리는 소문자 속성 이름을 사용하는 것이 좋습니다 :

  • 대문자와 소문자 이름을 혼합하는 것은 나쁘다
  • 개발자는 소문자 이름을 사용하는 데 사용됩니다 (as in 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">

더 나은 함께하지만 공간 이하, 쉽게 읽을 수 및 그룹 개체 :

<link rel="stylesheet" href="styles.css">

긴 코드 선을 피

HTML 편집기를 사용하는 경우, 오른쪽으로 스크롤하고 HTML 코드를 읽어 왼쪽으로 불편하다.

80 자보다 긴 코드 라인을 피하십시오.

빈 라인 및 들여 쓰기

이유없이 빈 줄을 추가하지 마십시오.

가독성을 위해, 대형 또는 논리적 코드 블록을 분리하기 위해 빈 줄을 추가합니다.

가독성을 위해, 들여 쓰기 2 공백을 추가합니다. TAB을 사용하지 마십시오.

불필요한 빈 줄 들여 쓰기를 사용하지 마십시오. 짧고 관련 항목 사이에 빈 줄을 사용할 필요가 없습니다. 이 모든 요소를 ​​들여 할 필요가 없습니다 :

불필요한:

<body>

  <h1>Famous Cities</h1>

  <h2>Tokyo</h2>

  <p>
    Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.
    It is the seat of the Japanese government and the Imperial Palace,
    and the home of the Japanese Imperial Family.
  </p>

</body>

보다 나은:

<body>

<h1>Famous Cities</h1>

<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace,
and the home of the Japanese Imperial Family.</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>London</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">

언어를 선언하는 것은 내게 필요한 애플리케이션에 중요하다 (screen readers) 와 검색 엔진.

생략 <html> 또는 <body> DOM과 XML 소프트웨어를 충돌 할 수 있습니다.

생략 <body> 이전 버전의 브라우저에서 오류를 생성 할 수 있습니다 (IE9) .

생략 <head> ?

HTML5의 표준에서, <head> 태그는 생략 될 수있다.

기본적으로 브라우저 전에 모든 요소를 추가합니다 <body> 기본으로, <head> 요소입니다.

당신은 생략하여, HTML의 복잡성을 줄일 수있다 <head> 태그를 :

예

<!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 Syntax and Coding Style</title>

적절한 해석과 정확한 검색 엔진 색인, 언어와 문자 인코딩이 문서에 가능한 한 빨리 정의해야합니다 모두를 보장하기 위해 :

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>HTML5 Syntax and Coding Style</title>
</head>

HTML 댓글

짧은 코멘트 후 공백으로, 한 줄에 작성해야 <!-- and a space before --> :

<!-- This is a comment -->

긴 주석이 여러 라인에 걸쳐으로 작성해야 <!-- and --> 별도의 라인에 :

<!--
  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.
-->

그들은이 개 공간을 들여 쓰기하는 경우 긴 코멘트 관찰하기 쉽다.

스타일 시트

스타일 시트를 연결하기위한 간단한 구문을 사용 (the type attribute is not necessary) :

<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에서 자바 스크립트를로드

외부 스크립트를로드하는 간단한 구문을 사용 (the type attribute is not necessary) :

<script src="myscript.js">

자바 스크립트와 HTML 요소에 액세스

사용의 결과 "untidy" HTML 스타일은, 자바 스크립트 오류가 발생할 수 있습니다.

이 두 자바 스크립트 문은 다른 결과를 생성합니다 :

예

var obj = getElementById("Demo")

var obj = getElementById("demo")
»그것을 자신을 시도

가능하면 같은 이름 지정 규칙을 사용 (as JavaScript) HTML에 있습니다.

자바 스크립트 스타일 가이드를 방문하십시오 .

소문자 파일 이름을 사용

대부분의 웹 서버 (Apache, Unix) 파일 이름에 대한 대소 문자를 구분합니다 :

london.jpg는 London.jpg으로 액세스 할 수 없습니다.

다른 웹 서버 (Microsoft, IIS) 대소 문자를 구분하지 않습니다 :

london.jpg는 London.jpg 또는 london.jpg으로 액세스 할 수 있습니다.

당신은 대문자와 소문자를 혼합하여 사용하는 경우, 당신은 매우 일관성이 있어야합니다.

당신은 대소 문자를 구분 서버에 민감 경우에서 이동하는 경우, 심지어 작은 오류는 웹을 깰 것입니다.

이러한 문제를 방지하려면 항상 소문자 파일 이름을 사용합니다 (if possible) .

파일 확장자

HTML 파일은 .html 중에서 확장해야한다 (or .htm ) .

CSS 파일은 .CSS 확장이 있어야합니다.

자바 스크립트 파일 확장명은 .js이 있어야합니다.

이 .htm .html과의 차이점

.htm 인 및 html 확장자를 사이에 차이가 없습니다. 모두 웹 브라우저 또는 웹 서버에서 HTML로 처리됩니다.

차이는 문화입니다 :

.htm "smells" 시스템이 3 자로 확장을 제한 초기 DOS 시스템의.

.html "smells" 이러한 제한이 없었 유닉스 운영 체제의.

기술의 차이

URL에 파일 이름을 지정하지 않는 경우 (like http://www.w3ii.com/css/) , 서버는 기본 파일 이름을 반환합니다. 공통 기본 파일 이름은 index.htm으로, default.html을, 그리고 default.htm을, index.html을합니다.

서버 만 구성된 경우 "index.html" 기본 파일 이름으로, 귀하의 파일 이름을 지정해야합니다 "index.html" 이 아니라 "index.htm."

그러나 서버는 하나 이상의 기본 파일 이름을 구성 할 수 있으며, 필요에 따라 일반적으로 당신은 많은 기본 파일 이름을 설정할 수 있습니다.

어쨌든, HTML 파일에 대한 전체 확장를 .html, 그리고 그것을 사용하지 않아야 할 이유가 없습니다.

❮ 이전 다음 장 ❯