로드맵 길만 걸어요 - HTML : Conventions and Best Practice

Viola·2020년 7월 25일

로드맵 모범사례 컨벤션 프론트엔드 프론트엔드로드맵

로드맵 길만 걸어요

목록 보기

4/4

로드맵 길만 걸어요 시리즈는 프론트엔드 로드맵 에 있는 모든 부분을 다룹니다.
기초가 부족하여 다시 훑어보려고 합니다.
위키백과나 MDN, 생활코딩에서 설명을 따와 제가 이해할 수 있는 방식으로 풀어서 설명합니다.

이 페이지에서 다룰 내용

저번 포스팅에 이어 HTML에 대해 공부합니다.
1) 컨벤션과 모범사례

Conventions and Best Practices

(출처: W3C - HTML Style Guide and Coding Conventions)

컨벤션은 규칙, 규약 이라는 뜻으로 여러명이 미리 약속 된 변수 네이밍 규칙 등, 혹은 일관된 틀을 만드는 행위를 뜻합니다.
일관되고 깔끔한 HTML 코드를 사용하면 다른 사람들이 쉽게 코드를 읽고 이해할 수 있습니다.

HTML Conventions

1.항상 문서 유형을 문서의 첫번째 줄로 선언하세요.
<!DOCTYPE html>

HTML5부터 요약 된 문서 유형을 선언할 수 있습니다.

2.소문자 요소 이름 사용

HTML 코드는 영문으로 되어있기 때문에 대문자와 소문자를 선택하고 혹은 혼합하여 쓸 수 있습니다.
다음과 같은 이유로 소문자 요소 이름을 사용하는 것이 좋습니다.
- 대문자와 소문자를 혼합하면 깔끔해보이지 않습니다.
- 개발자는 일반적으로 소문자를 사용합니다.
- 소문자 쓰기가 더 쉽습니다.
좋은 예
<h3>이것은 제목이다.</h3>
좋지 않은 예
<H3>이것은 제목이다.<H3>

3.모든 HTML 요소 닫기

닫는 태그가 없는 요소 이외에는 모두 태그를 닫아주어야 합니다.
좋은 예
<p>이것은 단락이다.</p>
<img src="/static/images/no-closing-tag.svg">
좋지 않은 예
<p>이것은 단락이다.

4.소문자 속성 이름 사용

태그 작성도 소문자로 쓰는것과 같이 태그 내 속성도 소문자로 작성해주어야 합니다.
좋은 예
<a href="https://velog.io" target="_blank">velog</a>
좋지 않은 예
<a href="https://velog.io" TARGET="_blank">velog</a>

5.태그 내 속성의 값에는 따옴표 넣어주기.

읽기 쉽도록 따옴표 안에 속성을 넣어주세요!
좋은 예
<a href="https://velog.io" target="_blank">velog</a>
좋지 않은 예
<a href="https://velog.io" TARGET=_blank>velog</a>
아주 좋지 않은 예
<a TARGET=_blank href="https://velog.io">velog</a>

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

이미지를 표시할 수 없을 때 alt 속성의 값이 이미지를 표현하기 때문에 꼭 필요합니다.
img 태그 내 너비, 높이 값을 지정하는 경우 브라우저가 이미지를 로드하기 전에 미리 공간을 점유하기 때문에 브라우저에서 깜빡임이 줄어듭니다.
좋은 예
<img src="html5.gif" alt="HTML5" style="width:128px;height:128px">

7.태그 내 공백과 등호

코드의 가독성을 위해 공백을 최소화합니다.
좋은 예
<link rel="stylesheet" href="styles.css">
나쁜 예
<link rel = "stylesheet" href = "styles.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">
<head>
  <title>Page Title</title>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

15.메타데이터

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

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

16.뷰포트 설정

장치에 따라 보이는 영역을 지정할 수 있도록 뷰포트를 지정해줍니다.

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

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

스타일 시트를 링크할 때는 간단한 구문을 작성해주세요.

<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.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로 지정하는것이 좋다.

Viola

글 예쁘게 쓰기

이전 포스트

로드맵 길만 걸어요 - HTML : Conventions and Best Practice