본문 바로가기

Road to Web Developer/HTML

HTML 작성 시 유의사항

웹 사이트의 뼈대, HTML

HTML은 진입 장벽이 낮아 배우기 쉬운 언어다. 하지만 컨텐츠 구조 설계, 그리고 웹 표준과 웹 접근성을 고려하여 HTML 코드를 작성하면 결코 쉽지 않다. 입문자는 표준 규격을 지키는 코딩 방식을 길러야 한다. 최근 Angular, React, Vue를 필두로 프론트 프레임워크를 사용하는 것이 트렌드가 되고 있는데, 경험자는 웹 표준과 웹 접근성을 잘 지키면서 사용하고 있는지 돌아볼 필요가 있다.

 

'변하지 않는 것에 주목하라'는 말이 있다. 처음부터 HTML 코드를 작성하든, 템플릿이나 프레임워크를 사용하여 HTML 코드를 작성하든 잊지말야아 할 것은 표준 규격을 지키는 것이다.

1. 문법 (Syntax)

<!doctype html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

 

- doctype을 포함해 모든 태그는 대문자로 사용하지 않는다.

- 코드 들여쓰기 할 때는 두 개의 공백 (Spacebar 2회) 혹은 Soft Tab (2칸)을 사용하는 것이 좋다.

- 태그를 감쌀 때 안에 들어가는 태그는 들여쓰기를 해야 한다.

- <img src="url"> 처럼 HTML 속성은 작은 따옴표(')가 아니라 큰 따옴표(")로 감싼다.

- <br>처럼 종료 태그가 없는 요소는 뒷부분에 슬래쉬를 생략한다.

- <div></div>, <span></span>처럼 종료 태그가 있는 요소는 생략하면 안된다.

 

2. HTML5 표준문서 (HTML5 Doctype)

<!doctype html>
<html>
  <head>
  </head>
</html>

 

HTML5 문서 최상단에 <!doctype html>를 삽입하여 모든 브라우저가 동일한 화면을 보여줄 수 있도록 한다.

 

3. 언어 속성 (Language attribute)

<html lang="en">
  <!-- ... -->
</html>

 

HTML 태그에 lang 속성을 추가하여(ex: <html lang="ko-KR"></html>) 문서의 언어를 설정한다. 스크린 리더 등 보조기기들이 언어에 맞는 설정을 사용하도록 도와준다.

 

4. IE 호환모드 (IE compatibility mode)

<meta http-equiv="x-ua-compatible" content="ie=edge">

 

Internet Explorer는 페이지를 보여줘야 하는 IE 버전을 명시하기 위해 meta 태그를 지원한다. 별도의 버전을 표기하지 않는다면 head 태그 안에 <meta http-equiv="x-ua-compatible" content="ie=edge">를 삽입하여 가장 최신 버전으로 보여줄 수 있도록 한다.

 

5. 문자 인코딩 (Character encoding)

<head>
  <meta charset="utf-8">
</head>

 

head 태그 안에 <meta charset="UTF-8">를 삽입하여 명시적인 문자 인코딩을 선언한다. 이는 컨텐츠를 더 빠르고 쉽게 페이지에 나타낼 수 있도록 한다.

 

6. CSS와 Javascript 삽입 (CSS and JavaScript includes)

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js"></script>

HTML 문서에 CSS와 Javascript를 연결하여 디자인 요소 및 동적인 움직임을 추가할 수 있다. CSS와 Javascript 모두 HTML 문서에 자체적으로 작성하는 것과 외부에서 CSS, Javascript파일을 연결시켜주는 방식이 있다. 외부 파일을 연결하는 쪽이 로딩 속도가 좀 더 빠르다.