HTML Coding Conventions
HTML 코딩 규칙
Web developers are often uncertain about the coding style and syntax to use in HTML.
웹 개발자는 HTML에서 사용할 코딩 스타일과 구문에 대해 종종 확신하지 못합니다.
Between 2000 and 2010, many web developers converted from HTML to XHTML.
2000 년에서 2010 년 사이에 많은 웹 개발자가 HTML을 XHTML로 변환했습니다.
With XHTML, developers were forced to write valid and "well-formed" code.
XHTML을 사용하여 개발자는 유효하고 "올바른 형식의"코드를 작성해야했습니다.
HTML5 is a bit more sloppy when it comes to code validation.
HTML5는 코드 유효성 검사와 관련하여 좀 더 엉성합니다.
Be Smart and Future Proof
똑똑하고 미래를 보장하십시오
A consistent use of style makes it easier for others to understand your HTML.
스타일을 일관되게 사용하면 다른 사람들이 HTML을 더 쉽게 이해할 수 있습니다.
In the future, programs like XML readers may want to read your HTML.
앞으로는 XML 독자와 같은 프로그램이 HTML을 읽을 수도 있습니다.
Using a well-formed-"close to XHTML" syntax can be smart.
올바른 형식의 "XHTML에 가까운"구문을 사용하면 현명 할 수 있습니다.
Always keep your code tidy, clean and well-formed.
코드를 깔끔하게 정리하고 깨끗하게 정리하십시오.
Use Correct Document Type
올바른 문서 유형 사용
Always declare the document type as the first line in your document:
항상 문서 유형을 문서의 첫 번째 줄로 선언하십시오.
1 | <!DOCTYPE html> | cs |
If you want consistency with lower case tags, you can use:
소문자 태그와 일관성을 유지하려면 다음을 사용할 수 있습니다.
1 | <!doctype html> | cs |
Use Lower Case Element Names
소문자 요소 이름 사용
HTML5 allows mixing uppercase and lowercase letters in element names.
HTML5에서는 요소 이름에 대문자와 소문자를 섞을 수 있습니다.
We recommend using lowercase element names because:
소문자 요소 이름을 사용하는 것이 좋습니다.
Mixing uppercase and lowercase names is bad
대문자와 소문자를 혼용하면 좋지 않습니다.
Developers normally use lowercase names (as in XHTML)
개발자는 일반적으로 소문자 이름을 사용합니다 (예 : XHTML).
Lowercase look cleaner
소문자 모양 청소기
Lowercase are easier to write
소문자는 쓰기 쉽다.
Bad:
1 2 3 | <SECTION> <p>This is a paragraph.</p> </SECTION> | cs |
Very Bad:
1 2 3 | <Section> <p>This is a paragraph.</p> </SECTION> | cs |
Good:
1 2 3 | <section> <p>This is a paragraph.</p> </section> | cs |
Close All HTML Elements
모든 HTML 요소 닫기
In HTML5, you don't have to close all elements (for example the <p> element).
HTML5에서는 모든 요소 (예 : <p>요소) 를 닫을 필요가 없습니다 .
We recommend closing all HTML elements.
모든 HTML 요소를 닫는 것이 좋습니다.
Bad:
1 2 3 4 | <section> <p>This is a paragraph. <p>This is a paragraph. </section> | cs |
Good:
1 2 3 4 | <section> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </section> | cs |
Close Empty HTML Elements
빈 HTML 요소 닫기
In HTML5, it is optional to close empty elements.
HTML5에서는 빈 요소를 닫는 것이 선택 사항입니다.
Allowed:
1 | <meta charset="utf-8"> | cs |
Also Allowed:
1 | <meta charset="utf-8" /> | cs |
However, the closing slash (/) is REQUIRED in XHTML and XML.
그러나 XHTML 및 XML에서는 닫는 슬래시 (/)가 필요합니다.
If you expect XML software to access your page, it is a good idea to keep the closing slash!
XML 소프트웨어가 페이지에 액세스 할 것으로 예상되는 경우 닫기 슬래시를 유지하는 것이 좋습니다.
Use Lower Case Attribute Names
소문자 속성 이름 사용
HTML5 allows mixing uppercase and lowercase letters in attribute names.
HTML5는 속성 이름에 대문자와 소문자를 섞을 수 있습니다.
We recommend using lowercase attribute names because:
소문자 속성 이름은 다음과 같은 이유로 사용하는 것이 좋습니다.
Mixing uppercase and lowercase names is bad
대문자와 소문자를 혼용하면 좋지 않습니다.
Developers normally use lowercase names (as in XHTML)
개발자는 일반적으로 소문자 이름을 사용합니다 (예 : XHTML).
Lowercase look cleaner
소문자 모양 청소기
Lowercase are easier to write
소문자는 쓰기 쉽다.
Bad:
1 | <div CLASS="menu"> | cs |
Good:
1 | <div class="menu"> | cs |
Quote Attribute Values
견적 속성 값
HTML5 allows attribute values without quotes.
HTML5는 따옴표없이 속성 값을 허용합니다.
We recommend quoting attribute values because:
다음과 같은 이유로 인해 속성 값을 인용하는 것이 좋습니다.
Mixing uppercase and lowercase values is bad
대문자와 소문자를 혼용하면 좋지 않습니다.
Quoted values are easier to read
따옴표로 묶인 값은 읽기 쉽습니다.
You MUST use quotes if the value contains spaces
값에 공백이 있으면 따옴표를 사용해야합니다.
Very bad:
This will not work, because the value contains spaces:
1 | <table class=table striped> | cs |
Bad:
1 | <table class=striped> | cs |
Good:
1 | <table class="striped"> | cs |
Image Attributes
이미지 속성
Always add the alt attribute to images.
항상 alt이미지에 속성을 추가하십시오 .
This attribute is important when the image for some reason cannot be displayed.
이 속성은 어떤 이유로 이미지를 표시 할 수없는 경우 중요합니다.
Also, always define image width and height.
또한 항상 이미지 너비와 높이를 정의하십시오.
It reduces flickering because the browser can reserve space for the image before loading.
로드하기 전에 브라우저가 이미지 공간을 예약 할 수 있기 때문에 깜박임 현상이 줄어 듭니다.
Bad:
1 | <img src="html5.gif"> | cs |
Good:
1 | <img src="html5.gif" alt="HTML5" style="width:128px;height:128px"> | cs |
Spaces and Equal Signs
공백과 등호
HTML5 allows spaces around equal signs.
HTML5는 등호 주위에 공백을 허용합니다.
But space-less is easier to read and groups entities better together.
그러나 공간이 적은 것은 읽기 쉽고 엔티티를 더 잘 그룹화합니다.
Bad:
1 | <link rel = "stylesheet" href = "styles.css"> | cs |
Good:
1 | <link rel="stylesheet" href="styles.css"> | cs |
Avoid Long Code Lines
긴 코드 라인 피하기
When using an HTML editor, it is inconvenient to scroll right and left to read the HTML code.
HTML 편집기를 사용할 때 HTML 코드를 읽으려면 좌우로 스크롤하는 것이 불편합니다.
Try to avoid code lines longer than 80 characters.
80 자보다 긴 코드 행을 피하십시오.
Blank Lines and Indentation
빈 줄과 들여 쓰기
Do not add blank lines without a reason.
이유없이 빈 줄을 추가하지 마십시오.
For readability, add blank lines to separate large or logical code blocks.
가독성을 위해 빈 줄을 추가하여 큰 코드 블록이나 논리 코드 블록을 분리하십시오.
For readability, add two spaces of indentation. Do not use the tab key.
가독성을 위해 두 개의 들여 쓰기 공백을 추가하십시오. 탭 키를 사용하지 마십시오.
Do not use unnecessary blank lines and indentation. It is not necessary to indent every element:
불필요한 빈 줄과 들여 쓰기를 사용하지 마십시오. 모든 요소를 들여 쓸 필요는 없습니다.
Unnecessary:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> | cs |
Better:
1 2 3 4 5 6 7 8 9 10 11 | <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> | cs |
Table Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> | cs |
List Example:
1 2 3 4 5 | <ol> <li>London</li> <li>Paris</li> <li>Tokyo</li> </ol> | cs |
Omitting <html> and <body>?
<html>과 <body>를 생략 하시겠습니까?
In HTML5, the <html> tag and the <body> tag can be omitted.
HTML5에서는 <html>태그와 <body>태그를 생략 할 수 있습니다.
The following code will validate as HTML5:
다음 코드는 HTML5로 유효성을 검사합니다.
Example
1 2 3 4 5 6 7 | <!DOCTYPE html> <head> <title>Page Title</title> </head> <h1>This is a heading</h1> <p>This is a paragraph.</p> | cs |
However, we do not recommend omitting the <html> and the <body> tag.
그러나 태그 <html>와 <body>태그 는 생략하지 않는 것이 좋습니다 .
The <html> element is the document root. It is the recommended place for specifying the page language:
<html>요소는 문서 루트입니다. 페이지 언어를 지정하는 데 권장되는 장소입니다.
1 2 | <!DOCTYPE html> <html lang="en-US"> | cs |
Declaring a language is important for accessibility applications (screen readers) and search engines.
접근성 응용 프로그램 (화면 판독기) 및 검색 엔진에 언어를 선언하는 것이 중요합니다.
Omitting <html> or <body> can crash DOM and XML software.
DOM 및 XML 소프트웨어를 생략 <html>하거나 <body>충돌시킬 수 있습니다.
Omitting <body> can produce errors in older browsers (IE9).
생략 <body>하면 구형 브라우저 (IE9)에서 오류가 발생할 수 있습니다.
Omitting <head>?
<head>를 생략 하시겠습니까?
In HTML5, the <head> tag can also be omitted.
HTML5에서는 <head> 태그를 생략 할 수도 있습니다.
By default, browsers will add all elements before <body> to a default <head> element.
기본적으로 브라우저는 모든 요소를 이전 <body>에 기본 <head> 요소에 추가합니다 .
You can reduce the complexity of HTML by omitting the <head> tag:
<head>태그 를 생략하면 HTML의 복잡성을 줄일 수 있습니다 .
Example
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <title>Page Title</title> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> | cs |
However, we do not recommend omitting the <head> tag.
그러나 <head>태그를 생략하지 않는 것이 좋습니다 .
Omitting tags is unfamiliar to web developers.
태그를 생략하면 웹 개발자에게는 익숙하지 않습니다.
It needs time to be established as a guideline.
가이드 라인으로 확립 될 시간이 필요합니다.
Meta Data
메타 데이터
The <title> element is required in HTML5. Make the title as meaningful as possible:
이 <title>요소는 HTML5에 필요합니다. 제목을 가능한 한 의미있게 만드십시오.
1 | <title>HTML5 Syntax and Coding Style</title> | cs |
To ensure proper interpretation and correct search engine indexing, both the language and the character encoding should be defined as early as possible in a document:
적절한 해석과 올바른 검색 엔진 색인화를 위해 언어와 문자 인코딩 모두를 문서에서 가능한 한 빨리 정의해야합니다.
1 2 3 4 5 6 | <!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>HTML5 Syntax and Coding Style</title> </head> | cs |
Setting The Viewport
뷰포트 설정하기
HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
HTML5는 웹 디자이너가 <meta>태그를 통해 뷰포트를 제어 할 수있게하는 메소드를 도입했습니다 .
The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
뷰포트는 웹 페이지의 사용자가 볼 수있는 영역입니다. 그것은 장치에 따라 다르며 휴대 전화의 경우 컴퓨터 화면보다 작습니다.
You should include the following <meta> viewport element in all your web pages:
<meta>모든 웹 페이지에 다음과 같은 뷰포트 요소를 포함해야 합니다.
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | cs |
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
<meta>뷰포트 요소는 페이지의 크기와 스케일링을 제어하는 방법에 브라우저 지침을 제공합니다.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
width = device-width 부분은 페이지의 너비를 장치의 화면 너비에 따라 설정합니다 (장치에 따라 다름).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
initial-scale = 1.0 부분은 브라우저가 페이지를 처음로드 할 때 초기 줌 레벨을 설정합니다.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
다음은 뷰포트 메타 태그가 없는 웹 페이지 와 뷰포트 메타 태그가 있는 동일한 웹 페이지의 예 입니다 .
Tip: If you are browsing this page with a phone or a tablet, you can click on the two links below to see the difference.
도움말 : 휴대 전화 또는 태블릿으로이 페이지를 탐색하는 경우 아래의 두 링크를 클릭하여 차이점을 확인할 수 있습니다.
HTML Comments
HTML 주석
Short comments should be written on one line, like this:
짧은 주석은 다음과 같이 한 줄로 작성해야합니다.
1 | <!-- This is a comment --> | cs |
Comments that spans more than one line, should be written like this:
두 줄 이상에 걸쳐있는 주석은 다음과 같이 작성해야합니다.
1 2 3 4 | <!-- This is a long comment example. This is a long comment example. This is a long comment example. This is a long comment example. --> | cs |
Long comments are easier to observe if they are indented two spaces.
긴 주석은 두 칸 들여 쓰기 할 경우 더 쉽게 관찰 할 수 있습니다.
Style Sheets
스타일 시트
Use simple syntax for linking to style sheets (the type attribute is not necessary):
스타일 시트에 연결하기 위해 간단한 구문을 사용합니다 (type 속성은 필요하지 않습니다).
1 | <link rel="stylesheet" href="styles.css"> | cs |
Short rules can be written compressed, like this:
짧은 규칙은 다음과 같이 압축하여 작성할 수 있습니다.
1 | p.intro {font-family: Verdana; font-size: 16em;} | cs |
Long rules should be written over multiple lines:
긴 규칙은 여러 행에 작성해야합니다.
1 2 3 4 5 6 | body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black; } | cs |
Place the opening bracket on the same line as the selector
선택기와 같은 줄에 여는 괄호를 배치하십시오.
Use one space before the opening bracket
여는 괄호 앞에 하나의 공백을 사용하십시오.
Use two spaces of indentation
두 개의 들여 쓰기 공간 사용
Use semicolon after each property-value pair, including the last
마지막 속성을 포함하여 각 속성 - 값 쌍 다음에 세미콜론을 사용하십시오.
Only use quotes around values if the value contains spaces
값에 공백이 포함 된 경우에만 값을 따옴표로 묶으십시오.
Place the closing bracket on a new line, without leading spaces
공백을 넣지 않고 새 줄에 닫는 괄호를 배치하십시오.
Avoid lines over 80 characters
80 자 이상의 행 피하십시오
Loading JavaScript in HTML
HTML로 자바 스크립트로드하기
Use simple syntax for loading external scripts (the type attribute is not necessary):
외부 스크립트를로드하는 데 간단한 구문을 사용하십시오 (type 속성은 필요하지 않습니다).
1 | <script src="myscript.js"> | cs |
Accessing HTML Elements with JavaScript
JavaScript로 HTML 요소에 액세스하기
A consequence of using "untidy" HTML styles can result in JavaScript errors.
"깔끔하지 않은"HTML 스타일을 사용하면 JavaScript 오류가 발생할 수 있습니다.
These two JavaScript statements will produce different results:
이 두 가지 JavaScript 문은 서로 다른 결과를 생성합니다.
Example
1 2 3 | var obj = getElementById("Demo") var obj = getElementById("demo") | cs |
Visit the JavaScript Style Guide.
자바 스크립트 스타일 가이드를 방문하십시오 .
Use Lower Case File Names
소문자 파일 이름 사용
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
일부 웹 서버 (Apache, Unix)는 파일 이름에 대소 문자를 구분합니다. "london.jpg"는 "London.jpg"로 액세스 할 수 없습니다.
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg" or "london.jpg".
다른 웹 서버 (Microsoft, IIS)는 대소 문자를 구분하지 않습니다. "london.jpg"는 "London.jpg"또는 "london.jpg"로 액세스 할 수 있습니다.
If you use a mix of upper and lower case, you have to be extremely consistent.
대문자와 소문자를 혼용하면 매우 일관성이 있어야합니다.
If you move from a case insensitive to a case sensitive server, even small errors will break your web!
대소 문자를 구분하지 않는 서버에서 대소 문자를 구분하는 서버로 이동하면 작은 오류라도 웹이 손상됩니다!
To avoid these problems, always use lower case file names.
이러한. 제를 피하려면 항상 소문자 파일 이름을 사용하십시오.
File Extensions
파일 확장자
HTML files should have a .html or .htm extension.
HTML 파일의 확장자 는 .html 또는 .htm 이어야 합니다.
CSS files should have a .css extension.
CSS 파일의 확장자 는 .css 여야 합니다.
JavaScript files should have a .js extension.
JavaScript 파일의 확장자 는 .js 여야 합니다.
Differences Between .htm and .html
.htm과 .html의 차이점
There is no difference between the .htm and .html extensions. Both will be treated as HTML by any web browser or web server.
.htm과 .html 확장은 차이가 없습니다. 둘 다 모든 웹 브라우저 또는 웹 서버에서 HTML로 처리됩니다.
The differences are cultural:
문화적 차이는 다음과 같습니다.
.htm "smells" of early DOS systems where the system limited the extensions to 3 characters.
.htm은 시스템이 확장자를 3 자로 제한하는 초기 DOS 시스템을 "냄새 맡습니다".
.html "smells" of Unix operating systems that did not have this limitation.
.html이 제한이없는 유닉스 운영체제의 "냄새".
Technical Differences
기술적 인 차이점
When a URL does not specify a filename (like https://www.w3schools.com/css/), the server returns a default filename.
URL이 파일 이름 (예 : https://www.w3schools.com/css/)을 지정하지 않으면 서버는 기본 파일 이름을 반환합니다.
Common default filenames are index.html, index.htm, default.html and default.htm.
일반적인 기본 파일 이름은 index.html, index.htm, default.html 및 default.htm입니다.
If your server is configured only with "index.html" as default filename, your file must be named "index.html", not "index.htm."
서버가 기본 파일 이름으로 "index.html"로만 구성된 경우 파일의 이름은 "index.htm"이 아니라 "index.html"이어야합니다.
However, servers can be configured with more than one default filename, and normally you can set up as many default filenames as needed.
그러나 서버는 둘 이상의 기본 파일 이름으로 구성 될 수 있으며 일반적으로 필요한만큼 많은 기본 파일 이름을 설정할 수 있습니다.
Anyway, the full extension for HTML files is .html, and there's no reason it should not be used.
어쨌든, HTML 파일의 전체 확장자는 .html이므로 사용해서는 안됩니다.
'HTML' 카테고리의 다른 글
| HTML5 SVG (0) | 2018.07.13 |
|---|---|
| [R]HTML5 Canvas (0) | 2018.07.12 |
| HTML5 마이그레이션(HTML5 Migration) (0) | 2018.07.10 |
| HTML5 의미 론적 요소(HTML5 Semantic Elements) (0) | 2018.07.09 |
| HTML5 새 요소(HTML5 New Elements) (1) | 2018.07.08 |
