시작하기에 앞서, Convention이란 무엇일까요?

Convention은 '관습'이라는 의미로 Coding Convention은 코드를 읽기 쉽도록 일관되고 체계적으로 유지하는 것입니다.
일정 기준에 맞춰서 코드를 작성하는 것은 협업에서 중요한 일입니다.

HTML을 작성하면서 지켜야할 Convention에 대해 알아봤습니다.

해당 문서는 HTML 스타일 가이드 및 코딩 규칙과, 10 HTML best practices for beginners를 참고하여 작성했습니다.

적절한 문서구조 사용하기

HTML 문서는 <html>, <head>, <body> 요소가 없어도 대부분 잘 작동합니다.

하지만 다음과 같은 문제가 발생할 수 있습니다.

<body>를 생략하면 오래된 브라우저에서 오류를 발생할 수 있습니다.
<html>과 <body>를 생략하면 DOM과 XML 소프트웨어가 충돌할 수 있습니다.

<head>없이 <html>과 <body>만 존재할 경우, 브라우저는 <body> 이전의 모든 요소를 기본 <head>에 추가해줍니다.
하지만 기본적으로 <head>를 작성하는 것이 좋습니다.

따라서 다음과 같은 적절한 문서 구조를 사용해서 오류를 방지하고 일관성을 유지해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Page Title<title/>
</head>
<body>
  <h1>heading</h1>
  <p>paragraph</p>
</body>
</html>

Doctype 올바르게 선언하기

문서 유형은 항상 첫번째 줄로 선언해야 합니다.
또한 사용하고자 하는 올바른 문서 유형을 선택해야 합니다.
보통 사용하는 <!DOCTYPE html>은 HTML5 문서 유형을 의미합니다.

더 많은 문서 유형에 대한 정보는 여기서 확인 할 수 있습니다.

`<title>` 요소 생략하지 않기

<title> 요소의 내용은 페이지 제목을 제공하며 검색엔진최적화(SEO)에 매우 중요합니다.
따라서 제목을 가능한 정확하고 의미 있게 만들어야 합니다.

항상 태그 닫기

HTML의 요소 중에서는 태그를 닫지 않아도 되는 것이 있습니다.
예를 들어 <p> 요소도 태그를 닫지 않아도 오류가 뜨지 않습니다.
하지만 필수적으로 닫아야 하는 요소와 그렇지 않은 요소를 헷갈릴 일이 있으므로 모든 HTML 요소를 닫는 것이 좋습니다.

요소 이름을 소문자로 쓰기

HTML 마크업은 소문자, 대문자 모두 다 작성할 수 있으며 섞어서 쓰더라도 웹페이지는 제대로 렌더링됩니다.
하지만 가독성과 유지 관리를 위해서 태그 이름을 소문자로 유지하는 것이 좋습니다.
개발자는 일반적으로 소문자 이름을 사용하니 협업을 위해서도 다수를 따르는 것이 좋습니다.

요소의 속성값에 "따옴표" 사용하기

HTML 요소에 속성을 적용하려면 다음과 같이 두가지 방법이 있습니다.

<!-- 따옴표 사용 -->
<button class="submitBtn">Submit</button>

<!-- 따옴표 사용 X -->
<button class=submitBtn>Submit</button>

두 가지 방법 모두 정상적으로 동작합니다.
하지만 속성값에 공백이 포함된 경우 따옴표를 사용하지 않으면 제대로 인식되지 않습니다.
따라서 모두 따옴표를 사용하도록 통일하는 것이 가독성에도 좋고 혹시 모를 오류를 방지할 수 있습니다.

`<img>` 요소에 alt, width, height 정의하기

<img> 요소의 alt 속성은 이미지를 로드할 수 없을 때 보여주는 대체 텍스트 속성입니다.
브라우저가 항상 이미지를 표시하는 것은 아닙니다.

비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
유효하지 않은 이미지거나, 지원하지 않는 형식

위의 경우 브라우저는 이미지 대신 alt 속성의 텍스트를 표시하므로, alt 속성을 설정해 두는 것이 좋습니다.

또한 width와 height를 정의하면 브라우저가 이미지를 로드하기 전에 이미지를 위한 공간을 예약할 수 있으므로 깜박임이 줄어듭니다.

공백을 과도하게 사용하지 않기

HTML은 태그 내부에 공백을 원하는 대로 사용할 수 있습니다.
아래의 두 요소는 동일하게 동작합니다.

<link rel="stylesheet" href="styles.css">

<link rel = "stylesheet" href = "styles.css">

하지만 불필요한 공백은 통일성을 해치고 읽기 어렵게 하므로 태그 내부의 공백은 최대한 적게 쓰는 것이 좋습니다.

빈 줄, 들여쓰기 적절하게 사용하기

이유 없이 빈 줄, 공백, 들여쓰기를 사용하지 않아야 합니다.
가독성을 위해서 빈줄을 추가해 코드 블록을 구분합니다.
탭 키를 사용하는 대신 들여쓰기를 두 칸 추가하는 것이 좋습니다.

외부 스타일 시트 사용하기

html에 CSS 스타일을 적용하기 위한 방법은 인라인 스타일시트, 내부 스타일시트, 외부 스타일시트 세가지가 있습니다.
인라인 스타일시트와 내부 스타일시트 사용은 웹사이트를 유지보수 및 관리하기 어렵게 만들기 때문에 외부 스타일시트를 만들어 사용하는 것이 좋습니다.

`<head>` 태그 안에 외부 스타일 시트 배치하기

외부 스타일 시트는 HTML의 문서 아무곳에나 배치할 수 있지만 <head> 태그 안에 배치하는 것이 페이지를 더 빨리 로드합니다.

시멘틱 요소 활용하기

웹페이지의 각 섹션은 그에 가장 적합한 HTML5 요소를 사용하는 것이 좋습니다. <div>와 같이 일반 태그만 과도하게 사용하는 것보다 <section>, <nav>와 같이 요소의 역할에 적합한 태그를 사용하는 것이 좋습니다.
<div> 요소만 사용할 경우 시간이 지나면 각 <div> 요소가 무슨 일을 하는지 헷갈리게 됩니다.

페이지 요소 수 줄이기

HTML 문서의 요소가 너무 많다면 코드를 최적화하는 것이 좋습니다.

파일 이름을 소문자로 쓰기

Microsoft, ISS와 같은 웹 서버는 파일 이름의 대소문자를 구분하지 않지만 Apache, Unix 같은 웹 서버는 대소문자를 구분합니다.
따라서 파일 이름에 대문자와 소문자를 혼용하여 사용하지 않는 것이 좋습니다.

그 외 설정하기

언어 속성 추가하기

웹 페이지의 언어를 선언하려면 <html> 요소에 lang 속성을 포함해야 합니다.
다음과 같이 사용할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>Page Title</title>
</head>
<body>
  <p>example</p>
</body>
</html>

메타 데이터 추가하기

적절한 해석과 올바른 검색 엔진 인덱싱을 보장하려면 <head> 태그 안에 언어와 문자 인코딩을 정의하는 것이 좋습니다.
<meta charset="charset">와 같이 <meta> 요소에 원하는 문자 인코딩을 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <p>example</p>
</body>
</html>

뷰포트 설정

뷰포트는 웹페이지에서 사용자가 볼 수 있는 영역입니다.
기기에 따라 다르며, 컴퓨터 화면보다 휴대폰에서 더 작습니다.

뷰포트를 설정하려면 다음과 같은 <meta> 요소를 작성해야 합니다.

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

이곳에서 더 많은 권장사항을 확인할 수 있습니다.

Author And Source

이 문제에 관하여(HTML Conventions), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@heony/HTML-conventions

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

HTML Conventions