티스토리 뷰

Frontend/HTML

코드 가독성을 높이는 HTML 코딩 컨벤션: 협업을 위해 지켜야 할 작성 규칙 10가지

미니임 2026. 2. 27. 21:02

 

웹 개발은 혼자 하는 작업이 아닙니다. 여러 명의 개발자가 하나의 프로젝트를 진행할 때, 각자 자기만의 스타일로 코드를 작성하면 유지보수가 매우 어려워집니다. 오늘은 동료 개발자들에게 칭찬받는 깔끔한 HTML 코드를 작성하기 위한 10가지 필수 규칙을 소개합니다.

1. 문서 타입 정의 및 언어 설정 (Doctype & Lang)

모든 HTML 문서는 최신 표준인 HTML5 선언으로 시작해야 하며, <html> 태그에 웹 접근성과 검색 엔진 최적화(SEO)를 위한 언어 속성을 명시해야 합니다.

  • Good:
  • <!DOCTYPE html> <html lang="ko"> ... </html>

2. 들여쓰기와 중첩 (Indentation)

코드의 계층 구조를 한눈에 파악할 수 있도록 2칸 또는 4칸의 일관된 들여쓰기를 사용합니다. (최근 트렌드는 2칸을 선호합니다.)

  • Bad:
  • <div> <p>들여쓰기가 제멋대로인 코드</p> </div>
  • Good:
  • <div> <p>구조가 명확한 코드</p> </div>

3. 소문자 사용 (Lowercase)

HTML 태그명과 속성명은 반드시 소문자로 작성합니다. 대문자를 사용해도 브라우저가 인식은 하지만, 가독성이 떨어지고 관례에 어긋납니다.

  • Bad: <DIV CLASS="MAIN">...</DIV>
  • Good: <div class="main">...</div>

4. 속성 값에 큰따옴표 사용 (Quotes)

속성 값은 항상 큰따옴표(")로 감쌉니다. 작은따옴표(')나 따옴표를 생략하는 방식은 지양합니다.

  • Bad: <input type=text class='form-control'>
  • Good: <input type="text" class="form-control">

5. 불필요한 Boolean 속성 값 생략

checked, disabled, required와 같은 불린 속성은 속성명만 작성해도 충분합니다.

  • Bad: <input type="checkbox" checked="true">
  • Good: <input type="checkbox" checked>

6. 셀프 클로징 태그 (Self-closing)

HTML5에서는 <img>, <br>, <input> 등 빈 태그(Void Elements)의 끝에 /를 붙이지 않는 것이 표준 권장 사항입니다. (단, React/JSX 환경에서는 필수이므로 환경에 맞춰 통일합니다.)

  • Good (HTML5): <img src="logo.png" alt="로고">
  • Good (React/XML): <img src="logo.png" alt="로고" />

7. 시맨틱 태그 활용 (Semantic Elements)

단순히 <div>와 <span>으로만 도배하지 마세요. 내용의 의미에 맞는 태그를 사용하여 접근성과 SEO를 높입니다.

  • Bad: <div class="header">내비게이션</div>
  • Good: ```html <header> <nav>메뉴</nav> </header> <main>본문 내용</main> <footer>하단 정보</footer>
  •  

8. 이미지 alt 속성 필수 작성

이미지를 로드하지 못하는 환경이나 스크린 리더 사용자를 위해 반드시 alt 속성을 작성합니다. 장식용 이미지라면 빈 값(alt="")이라도 넣어주어야 합니다.

  • Bad: <img src="icon.png">
  • Good: <img src="user-profile.jpg" alt="홍길동 사용자의 프로필 사진">

9. 구조적 주석 활용 (Comments)

코드의 양이 많아질 경우, 섹션의 시작과 끝을 주석으로 표시하면 유지보수가 훨씬 수월해집니다.

  • Good:
  • <!-- 메인 배너 영역 시작 --> <section class="main-banner"> ... </section> <!-- //메인 배너 영역 끝 -->

10. 외부 리소스 연결 방식 (Separation of Concerns)

HTML 내부에서 스타일을 정의하거나 자바스크립트를 작성하는 인라인 방식은 지양합니다. 반드시 외부 파일로 분리하여 관리하세요.

  • Bad: <button onclick="alert('클릭!')" style="color: red;">버튼</button>
  • Good:
  • <head> <link rel="stylesheet" href="style.css"> </head> <body> <button class="btn-alert">버튼</button> <script src="main.js"></script> </body>

마치며

협업의 핵심은 **"누가 봐도 읽기 쉬운 코드"**를 작성하는 것입니다. 위 10가지 규칙만 잘 지켜도 팀 프로젝트에서의 소통 비용을 크게 줄일 수 있습니다. 오늘부터 자신의 코드를 한 번 더 점검해 보는 것은 어떨까요?

반응형

'Frontend > HTML' 카테고리의 다른 글

HTML5 로컬 스토리지 기초: 브라우저에 데이터를 저장하고 불러오는 간단한 방법  (0) 2026.02.27
SVG vs Canvas: 웹 그래픽의 두 얼굴, 차이점과 완벽 선택 가이드  (0) 2026.02.26
공간 분할의 기초: <div>와 <span>의 차이점과 인라인/블록 요소의 특징 이해하기  (0) 2026.02.26
웹에서 특수문자 출력하기: HTML 엔티티(Entities) 가이드  (0) 2026.02.26
<iframe> 태그 완벽 가이드: 외부 콘텐츠 삽입과 보안 설정 팁  (0) 2026.02.26
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2026/04   »
일 월 화 수 목 금 토
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
글 보관함