웹_프론트엔드/로드맵 챌린지

HTML - 컨벤션과 모범 사례 (Conventions and Best Practices)

young 2021. 12. 16. 21:53
반응형
코딩 컨벤션이란?

컨벤션은 규칙 또는 규약이라는 뜻으로, 코딩 컨벤션은 코딩을 하는 프로그래머 사이의 일관된 규칙을 말한다. 특히 여러명이 협업하는 과정에서 이 컨벤션을 통해 코드 스타일을 유지할 수 있다. 또한, 가독성이 높아져 소스 코드를 처음 접하는 사람들도 빠르고 쉽게 이해할 수 있는데 도움이 된다. 코딩 컨벤션은 정확히 정해져 있는 것이 아니며, 팀원 간 약속을 하기 나름이므로 몇 가지 예시를 정리해보았다.. 

 

HTML 컨벤션 예시

1. 문서의 유형을 첫번째 줄에 선언한다.

<!DOCTYPE html>

 

2. 소문자 사용

  • 대문자와 소문자를 혼합하면 깔끔해 보이지 않는다.
  • 프로그래밍에서는 일반적으로 소문자를 사용한다.
  • 소문자 사용이 더 쉽고 간편하다.

3. 모든 HTML 요소 닫기

닫는 태그가 없는 요소 이외에는 모두 태그를 닫아주어야 한다.

좋은 예: <p> 닫기 </p>
나쁜 예: <p> 안닫기

4. 소문자 속성 이름 사용

태그 작성도 소문자로 쓰는 것처럼, 태그 내 속성도 소문자로 작성해야 한다.

좋은 예: <input type="checkbox" checked />
나쁜 예: <input type="checkbox" CHECKED />

5. 태그 내 속성 값에는 따옴표

좋은 예: <a href="https://google.com" target="_blank"> 따옴표 </a>
나쁜 예: <a href="https://google.com" target=_blank> 따옴표 </a>

6. 이미지의 너비와 높이, alt 속성 지정하기

이미지를 표시할 수 없을 때 alt 속성의 값이 이미지를 표현하기 때문에 꼭 필요하다. img 태그 내 너비, 높이 값을 지정하는 경우, 브라우저가 이미지를 로드하기 전에 미리 공간을 점유하기 때문에 브라우저에 깜빡임이 줄어 든다.

<img src="test.png" alt="테스트" style="width:100px; height:140px"/>

7. 태그 내 공백과 등호

코드의 가독성을 위해 공백을 최소화한다.

좋은 예: <link rel="stylesheet" href="style.css"/>
나쁜 예: <link rel = "stylesheet" href = "style.css"/>

8. 긴 코드 라인 피하기

에디터를 사용할 때, 좌우로 스크롤을 해야 하지 않도록 코드를 간결하게 작성한다.

 

9. 빈 줄과 들여쓰기

  • 특별한 이유 없이 빈 줄이나 들여쓰기를 추가하지 않는다.
  • 탭 키 대신 스페이스바로 들여쓰기를 한다.
  • 계층 관련한 태그는 들여쓰기를 꼭 한다.

10. <title> 요소 빠뜨리지 않기

페이지의 제목은 검색 엔진 최적화(SEO)에 매우 중요하다. 

 

11. <html>, <body> 를 생략하지 않기

생략 시 구형 브라우저에서 오류가 발생할 수 있다.

 

12. <head>를 생략하지 않기

브라우저 이전 요소를 <head> 태그에 입력할 수 있다.

 

13. 빈 요소를 닫는 것은 선택사항

HTML에서는 빈 요소를 닫는 것은 선택사항이다. XML/XHTML 소프트웨어가 페이지에 엑세스 할 것으로 예상되는 경우에는 닫는 슬래시가 필요하므로 빈 요소에 닫는 슬래시를 사용해야 한다

<meta charset="utf-8" />

14. 웹 페이지의 언어를 선언하는 html lang 지정

검색 엔진과 브라우저 지원을 위해 사용하는 것이 좋다.

<!DOCTYPE html>
<html lang="en-us">
...

15. 메타 데이터

올바른 해석과 올바른 검색 엔진 색인 생성을 위해 HTML 문서에서 언어와 문자 인코딩을 정의해주어야 한다.

<!DOCTYPE html>
<html lang="en-us">
<head>
    <meta charset="UTF-8">
    <title>Page Title</title>
</head>

16. 뷰 포트 설정

장치에 따라 보이는 영역을 지정한다. width=device-width는 장치의 화면 너비에 따라 페이지 너비를 설정하며, initial-scale=1.0 부분은 페이지가 처음 브라우저에 의해 로드된 초기의 확대/축소 레벨을 설정한다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

17. HTML 주석 사용하기

<!--
    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. 스타일 시트 사용

* 간단한 css 작성 시에는 한 줄로
p.intro {font-family:Verdana;font-size:16em;}

* 여러 줄 사용 시에
body {
    background-color: lightgrey;
    font-family: "Arial Black", Helvetica, sans-serif;
    font-size: 16em;
}

19. HTML 문서에서 자바스크립트 로드시 간단한 구문 사용

<script src="myscript.js">

20. 자바스크립트로 HTML 요소에 액세스하기

getElementById("demo").innerHTML = "Hello";

21. 소문자 파일 이름 사용하기

일부 웹 서버는 파일 이름에 대해 대소문자를 구분하기 때문에 소문자로 파일 이름을 통일하는 것이 좋다.

 

22. 파일 확장자

  • HTML 파일의 확장자는 .html 또는 .htm 이어야 한다.
  • CSS 파일의 확장자는 .css
  • 자바스크립트 파일의 확장자는 .js

23. HTML 기본

서버는 기본 파일 이름을 index.html 인 파일을 불러오기 때문에, 메인 페이지 문서의 이름은 index.html로 지정하는 것이 좋다.

반응형