| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- frontend
- Algorithm
- Graph
- Python
- 그레이들
- db
- 프로그래머스
- TypeScript
- 리트코드
- CS
- 백준
- java
- DFS
- Database
- BFS
- Javascript
- react
- 다이나믹 프로그래밍
- git
- 알고리즘
- DP
- VIM
- 자바
- 안드로이드
- vscode
- network
- Redux
- LeetCode
- 동적 계획법
- Data Structure
- Today
- Total
늘 겸손하게
HTML Conventions 본문
이해하기 쉽고 읽기도 편한 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
목차
6. 이미지는 꼭 alt, width, height 속성을 지정해주자
1. 문서의 Document type을 항상 선언하라
html 문서 시작에 "<!DOCTYPE html>" 를 꼭 붙여주자
2. Element 이름은 꼭 lowercase
원소 이름은 소문자로 할것. 대문자도 가능하지만 소문자가 보편적이고 읽기도 편하다
- 좋은 예시
<body>
<p>This is a paragraph.</p>
</body>
- 나쁜 예시
<BODY>
<P>This is a paragraph.</P>
</BODY>
3. 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>
4. 원소 속성도 소문자로 할것
- 좋은 예
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
- 나쁜 예
<a HREF="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
5. 원소 속성값은 꼭 따옴표 붙일것
속성값에 따옴표를 붙이지 않는것도 허용하지만 개발자들은 보통 따옴표를 붙이므로 대세를 따라가자.
- 좋은 예
<table class="striped">
- 나쁜 예
<table class=striped>
6. 이미지는 꼭 alt, width, height 속성을 지정해주자
alt 속성은 이미지가 출력되지 못했을 경우를 대비해 중요함.
width, height 속성을 지정해주면 화면이 깜빡이는 flickering을 줄일 수 있습니다. 이는 브라우저가 width, height만큼 메모리를 예약하기 때문.
7. '=' 기호 주변 공백은 넣지 말것
= 기호 주변에 공백을 넣을수는 있지만 넣지말것
- 좋은 예
<link rel="stylesheet" href="styles.css">
- 나쁜 예
<link rel = "stylesheet" href = "styles.css">
8. 가로로 지나치게 긴 코드는 피하라
9. 빈줄, 공백, 들여쓰기
아무 이유 없이 빈줄, 공백, 들여쓰기를 넣지 말것
가독성을 위해 크기가 큰 코드 블록, 논리적인 코드를 빈줄로 구분할것
가독성을 위해 tab 대신 스페이스바 2번으로 들여쓰기를 할것
- 좋은 예
<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>
10. title 원소를 빼 먹지 말것
html에는 <title> 원소가 필요
page title에 어떤 내용이 적혀있는지는 search engine optimization(seo)에게 매우 중요하다
검색 결과를 리스트로 출력할때 순서를 결정하는데 이때 page title이 search engine algorithm에 이용된다.
<title> 원소는
- 브라우저 툴바의 제목을 정의
- 즐겨찾기에 추가되었을때의 제목을 제공
- 검색 엔진에게 데이터 제공
11. <hmtl>, <body> 생략
<html>, <body>는 없어도 html 코드는 실행되지만 추가하는것을 권장
<body> 생략은 오래된 브라우저에서 오류를 발생시킬 수 있다.
<html>, <body> 생략은 DOM과 XML 소프트웨어 충돌 발생을 유발.
12. <head> 생략
<head> 생략할 수 있다.
브라우저가 <body> 이전에 모든 원소를 추가한다.
그래도 생략하지 않는것을 추천
13. 빈 원소 닫기
HTML에서 빈 원소를 닫는것은 선택사항이다.
하지만 XML, XHTML 소프트웨어가 페이지에 접근한다면 꼭 / 를 붙여 닫아줄것
- 가능
<meta charset="utf-8">
- 가능
<meta charset="utf-8" />
14. lang 속성 추가
<html> 태크 안에 꼭 lang 속성을 추가하여 웹 페이지의 언어를 정의하라.
검색 엔진과 브라우저에게 도움을 줌
예 :
<!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>
15. Meta Data
제대로된 해석과 정확한 검색 엔진 인덱싱을 보장하기 위해 language와 character encoding <meta charset="charset">은 HTML 문서에 최대한 일찍 정의되어야한다.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Page Title</title>
</head>
16. Setting The Viewport
viewport은 웹 페이지에서 사용자가 볼 수 있는 영역이다. 기기에 따라 변하고 컴퓨터화면 보다 모바일 화면에서는 더 작을것.
아래 meta 원소를 모든 웹 페이지에 추가하여야 한다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
위 코드는 브라우저에 페이지 영역을 어떻게 제어할지를 알려준다.
width=device-width : 페이지의 넓이를 기기 화면의 넓이에 맞춘다.
initial-scale=1.0 : 페이지가 브라우저에 로드되었을때 초기 줌 레벨을 결정
17. HTML Comments
짧은 주석은 한 줄로
<!-- 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.
-->
18. Using Style Sheets
css 스타일 시트 링크는 간단한 구문으로 ( 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;
}
19. Loading JavaScript in HTML
외부 스크립트 추가할 경우 간단한 구문으로 추가할것 ( type 속성은 필요하지 않다 )
<script src="myscript.js">
20. Use Lower Case File Names
Apache, Unix와 같은 웹 서버는 대소문자를 구분하여 "london.jpg"는 "London.jpg"로 접근 불가할 수 있다.
Microsoft, ISS는 대소문자를 구별하지 않음.
모든 웹 서버가 대소문자를 구별하진 않으므로 파일명은 소문자로 통일하여 작성
21. .htm 과 .html의 차이점
차이점이 없다.
둘 다 웹 브라우저, 웹 서버에서 HTML로 간주됨
22. default filenames
URL 마지막에 파일명을 알려주지 않으면 서버가 "index.html", "default.html"와 같은 디폴트 파일명을 추가한다.
단 모든 서버가 index.html 혹은 default.html만을 디폴드 파일명으로 다루지는 않는다.
'Programming > HTML,CSS' 카테고리의 다른 글
| CSS - 반응형 웹 디자인? (0) | 2022.08.24 |
|---|---|
| HTML, CSS - CSS 애니메이션과 JS 애니메이션의 차이점 (0) | 2022.08.09 |
| HTML, CSS - Cascading (0) | 2022.07.20 |
| HTML div - 원소 가로 정렬(배치) (0) | 2022.07.11 |
| HTML - HTML Form Validation (0) | 2022.06.12 |
