▶ 일관되고 깔끔하며 정돈된 HTML 코드를 사용하면 다른사람들이 코드를 더 쉽게 읽고 이해할 수 있다.
▶ 다음은 좋은 HTML 코드를 만들기 위한 몇 가지 지침과 팁이다.
■ 항상 DOCTYPE 선언하기
▶ 문서 첫 번째 줄에 항상 doctype을 선한한다.
▶ HTML에 대한 올바른 문서 유형은 아래와 같다.
<!DOCTYPE html>
■ 요소 이름은 소문자로 사용한다.
▶ HTML은 요소 이름에 대문자와 소문자를 혼합할 수 있다.
▶ 하지만 요소 이름을 소문자로 사용하기를 권장한다.
▷ 대소문자를 혼합해서 쓰면 보기 않좋다.
▷ 개발자들은 일반적으로 소문자를 사용한다.
▷ 소문자가 깔끔해 보인다.
▷ 소문자가 쓰기 더 쉽다.
▶ 좋은 예시 :
<body>
<p>This is a paragraph.</p>
</body>▶ 나쁜 예시 :
<BODY>
<P>This is a paragraph.</P>
</BODY>
■ 모든 HTML 요소는 닫는다.
▶ HTML에서 모든 요소를 닫을 필요는 없다.
▶ 하지만 아래에 예시와 같이 모든 HTML 요소는 닫는 것을 강력히 권장한다.
▶ 좋은 예시 :
<section>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</section>▶ 나쁜 예시 :
<section>
<p>This is a paragraph.
<p>This is a paragraph.
</section>
■ 소문자로 속성 이름 사용하기
▶ HTML은 속성 이름에 대소문자를 혼합하여 사용할 수 있다.
▶ 하지만 속성 이름은 소문자로 하는 것을 권장한다.
▶ 좋은 예시 :
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>▶ 나쁜 예시 :
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
■ 속성값에 인용 부호 사용하기
▶ HTML은 속성값에 인용 부호 없이 사용할 수 있다.
▶ 하지만 속성값에 인용 부호 사용을 권장한다.
▷ 개발자들은 일반적으로 속성값에 인용 부호를 사용한다.
▷ 인용 부호를 쓰면 읽기 더 쉽다.
▷ 값에 공백을 포함하려면 반드시 인용 부호를 사용해야 한다.
▶ 좋은 예시 :
<table class="striped">▶ 나쁜 예시 :
<table class=striped>▶ 매우 나쁜 예시 :
<table class=table striped>
■ 항상 이미지에 alt, width, hieght를 지정한다.
▶ 항상 이미지에 "alt" 속성을 지정한다.
▶ 이 속성은 이미지가 어떤 이류로 이미지를 표시할 수 없는 경우에 중요하다.
▶ 항상 이미지의 "width", "height" 속성을 정의한다.
▶ 이렇게 하면 Browser가 로드하기 전에 이미지를 위한 공간을 예약할 수 있으므로 깜빡임이 줄어든다.
▶ 좋은 예시 :
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">▶ 나쁜 예시 :
<img src="html5.gif">
■ 공백 및 등호
▶ HTML은 등호 주위에 공백을 허용한다.
▶ 하지만 공백이 없는 것이 읽기 더 쉽고 개체를 더 잘 그룹화한다.
▶ 좋은 예시 :
<link rel="stylesheet" href="styles.css">▶ 나쁜 예시 :
<link rel = "stylesheet" href = "styles.css">
■ 긴 코드줄은 피해라
▶ HTML 편집기를 사용할 때 HTML 코드를 읽기위해 좌우로 스크롤하는 것은 편리하지 않다.
▶ 너무 긴 코드줄은 피해라
■ 빈 줄과 들여쓰기
▶ 이유없이 빈 줄, 공백, 들여쓰기를 추가하지 않는다.
▶ 가독성을 위해 빈 줄을 추가하여 크거나 논리적인 코드 블록을 구분한다.
▶ 가독성을 위해 들여쓰기 두 칸을 추가한다.
▶ 탭 키를 사용하지 않는다.
▶ 좋은 예시 :
<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.</p>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2>
<p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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.</p>
<h2>London</h2><p>London is the capital city of England. It is the most populous city in the United Kingdom.</p>
<h2>Paris</h2><p>Paris is the capital of France. The Paris area is one of the largest population centers in Europe.</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>▶ 좋은 목록 예시 :
<ul>
<li>London</li>
<li>Paris</li>
<li>Tokyo</li>
</ul>
■ <title> 요소는 스킵하지 않는다.
▶ <title> 요소는 HTML에서 필수다.
▶ 페이지 제목의 내용은 검색 엔진 최적화에 매우 중요하다.
▶ 페이지 제목은 검색 엔진 알고리즘에서 검색 결과에 페이지를 나열할 때 순서를 경정하는 데 사용된다.
▶ <title> 요소는 :
▷ Browser 툴바에 제목을 정의한다.
▷ 즐겨찾기에 추가할 때 페이지의 제목으로 제공한다.
▷ 검색 엔진 결과에 페이지의 제목이 표시된다.
▶ 따라서 제목을 최대한 정확하고 의미있게 만들어야 한다.
<title>HTML Style Guide and Coding Conventions</title>
■ <html>과 <body> 생략?
▶ HTML 페이지는 <html>와 <body> 태그없이 유효성을 검사한다.
<!DOCTYPE html>
<head>
<title>Page Title</title>
</head>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_syntax_nobody
▶하지만, 항상 <html>와 <body> 태그를 추가하는 것을 강력히 권장한다.
▶ <body> 생략은 이전 Browser에서 오류가 발생할 수 있다.
▶ <html>와 <body> 생략은 DOM 와 XML 소프트웨어가 충돌할 수 있다.
■ <head> 생략?
▶ HTML <head> 태그는 생략할 수 있다.
▶ Browser는 앞에 있는 <body> 요소를 기본 <head> 요소에 추가한다.
<!DOCTYPE html>
<html>
<title>Page Title</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_syntax_nohead
▶ 하지만 <head> 태그 사용을 권장한다.
■ 공백 요소 닫기
▶ HTML 에서 공백 요소를 닫는 것은 선택 사항이다.
<meta charset="utf-8"><meta charset="utf-8" />
▶ XML/XHTML 소프트웨어가 페이지에 액세스할 것으로 예상되는 경우 닫는 슬래시( / )는 XML 및 XHTML에 필요하므로 그대로 두어야 한다.
■ lang 속성 추가하기
▶ 웹 페이지의 언어를 선언하기 위해 항상 <html> 태그 안에 <lang> 속성을 포함해야 한다.
▶ Browser나 검색엔진을 지원하기 위한 것이다.
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_syntax_body
■ 메타 데이터
▶ 올바른 해석과 올바른 검색 엔진 인덱싱을 보장하려면 언어와 문자 인코딩 모두 HTML 문서에서 가능한 한 빨리 정의해야한다.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
■ 뷰포트 설정하기
▶ 뷰포트는 사용자가 웹 페이지의 보이는 영역이다.
▶ 기기에 따라 다르다.
▶ 모든 웹 페이지에 다음 <meta> 요소를 포함해야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">▶ 이것은 페이지의 크기와 배율을 제어하는 방법에 대한 Browser 지침을 제공합니다.
▶ "width=device-width" 부분은 장치의 화면 너비를 따르도록 페이지의 너비를 설정한다.
▶ "initial-scale=1.0" 부분은 Browser에서 페이지를 처음 로드할 때 초기 확대/축소 수준을 설정한다.
▶ 아래의 이미지는 뷰포트 메타 태그가 있거나 없는 차이이다.
■ 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.
-->▶ 긴 주석은 공백 두 개로 들여쓰기 하면 관찰하기 쉽다.
■ 스타일 시트 사용하기
▶ 스타일 시트에 연결하기 위해 간단한 구문을 사용한다. ("type" 속성은 필요하지 않음)
<link rel="stylesheet" href="styles.css">▶ 짧은 CSS 규칙은 아래와 같이 압축하여 작성할 수 있다.
p.intro {font-family:Verdana;font-size:16em;}▶ 긴 CSS 규칙은 아래와 같이 여러 줄에서 작성할 수 있다.
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}▷ 여는 괄호를 선택자와 같은 줄에 배치해야 한다.
▷ 여는 괄호 앞에 공백 하나를 사용한다.
▷ 두 칸의 들여쓰기를 사용한다.
▷ 마지막을 포함하여 각 속성-값 쌍 다음에 세미콜론을 사용한다.
▷ 값에 공백이 포함된 경우에만 값 주위에 따옴표를 사용한다.
▷ 선행 공백 없이 새 술에 닫느 괄효를 배치한다.
■ HTML에서 Javascript 로딩하기
▶외부 스크립트 로드하는데 간단한 구문을 사용한다.("type" 속성은 필요없다)
<script src="myscript.js">
■ Javascript로 HTML 요소 접근하기
▶ "깔끔하지 않은" HTML 코드를 사용하면 Javascript 오류가 발생할 수 있다.
getElementById("Demo").innerHTML = "Hello";
getElementById("demo").innerHTML = "Hello";실습 : https://www.w3schools.com/html/tryit.asp?filename=tryhtml_syntax_javascript
■ 파일 이름 소문자 사용하기
▶ 일부 웹 서버 (Apache, Unix)는파일 이름에 대해 대소문자를 구분한다.
▶ 다른 웹 서버(Microsoft, IIS)는 대소문자를 구별하지 않는다.
▶ 대소문자를 혼용하여 사용하는 경우 이 점에 유의해야 한다.
▶ 대소문자를 구분하지 않는 서버에서 대소문자를 구분하는 서버로 이동하면 작은 오류에도 웹이 손상된다.
▶ 문제를 방지하려면 항상 소문자 파일 이름을 사용해야 한다.
■ 파일 확장자
▶ HTML 파일은 ".html" 확장자를 가져야 한다. (".htm"도 가능)
▶ CSS 파일은 ".css" 확장자를 가져야 한다.
▶ Javascript는 ".js" 확장자를 가져야 한다.
■ .htm 과 .html 에 차이점은?
▶ ".htm"과 ".html" 파일 확장자 사이에 차이점은 없다.
▶ 둘 다 모든 웹 Browser와 웹 서버에서 HTML로 처리된다.
■ 기본 파일 이름
▶ URL이 끝에 파일 이름을 지정하지 않으면 서버는 "index.html", "index.htm", "default.html" 또는 "default.htm" 으로 기본 파일 이름만 추가한다.
▶ 서버가 기본 파일 이름으로 "index.html"로만 구성된 겨우 파일 이름은 "default.html"이 아니라 "index.html" 이어야 한다.
▶ 둘 이상의 기본 파일 이름으로 서버를 구성할 수 있다.
▶ 일반적으로 원하는 기본 파일 이름을 설정할 수 있다.
출처 : https://www.w3schools.com/html/html5_syntax.asp
HTML Style Guide and Coding Conventions
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'HTML' 카테고리의 다른 글
| HTML / (46) 기호 (0) | 2023.02.27 |
|---|---|
| HTML / (45) 엔티티 (0) | 2023.02.27 |
| HTML / (43) Semantic 요소 (0) | 2023.02.25 |
| HTML / (42) 컴퓨터 Code 요소 (0) | 2023.02.24 |
| HTML / (41) 반응형 웹 디자인 (0) | 2023.02.24 |