HTML 컨벤션과 모범사례

코딩 컨벤션이란?

• 코딩을 하는 프로그래머 사이의 규칙입니다.

• 가독성도 좋아지고 당연히 유지 보수 측면에서 필수이겠죠?

• 우테코 프리코스 1주차 미션부터 JS와 Git Commit Convention에 대해 배우고 적용하는 기회가 있었는데요, 굉장히 유의미한 시간이였습니다.

• AngularJS Git Commit Message Conventions 참고하세요!

• Commit Convention을 배우기 전과 후의 차이입니다. 차이가 크죠?

HTML 모범사례 10가지

1) 유효하고 읽을 수 있는 DOM

• 모든 태그는 소문자로 작성하세요.

• 들여쓰기는 가독성의 핵심이예요.

• 주석을 과도하게 쓰지 마세요.

• 자동 닫기, 태그 닫기는 일관성이 중요합니다. 전부 쓰거나 아예 쓰지마세요.

• DOM 구성 시 불필요한 div 는 제거하고 시맨틱 요소를 사용하세요.

2) 인라인 스타일과 스크립트를 사용하지 마세요.

• 문서가 복잡해져요.

3) 중요 CSS 처리

• 중요한 css를 맨 위에 배치하면 더 빨리 렌더링됩니다.

• Critical이 페이지에서 중요한 부분이니 위에 배치하면 좋겠죠?

4) 스크립트 태그를 맨 아래에

• 페이지가 클수록 문서를 읽는 시간이 오래 걸리므로 빈 페이지만 표시돼요.

• 따라서, 맨 아래로 옮기거나 defer 속성을 사용하면 좋아요.

5) 접근성 관리

• 더 많은 사람들이 쉽게 이용할 수 있도록 다양한 속성을 사용하여 UI 요소를 설계해야 해요.

6) 이미지에 alt 태그

• 이미지가 표시되지 못하는 경우 대체 텍스트가 나와요.

• 하지만, 의미없는 디자인적 요소 이미지는 alt를 하지 않는 것이 좋아요.

7) 페이지 당 하나의 h1

• 정말 중요한 하나의 텍스트에 대해서만 h1을 사용해요.

8) 제목 및 메타 태그 사용

• 적절한 설명 메타 태그와 제목을 사용하여 검색 엔진에서 사이트의 색인을 쉽게 생성할 수 있어요.

9) 압축

• 작업을 마치고 압축해야 합니다.

• webpack 혹은 온라인 응용 프로그램을 사용하면 돼요.

• 문서를 작게 만들어 페이지 로딩 속도를 빠르게 해요.

10) HTML 확인

• HTML 유효성 검사를 해야합니다.

• 아래 페이지에서 유효서 검사를 해볼 수 있어요.

• 유효성 검사 w3 validator

• 코드를 커밋하기 전에 자동으로 이런 문제를 확인하는 린터를 배치하면 더 좋겠죠?

  • 저도 블로그에 로컬에서 확인할 수 있는 환경을 구축해야할 필요성을 뼈저리게 느끼고 있습니다.. 조만간 해결할 예정이예요.