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파일을 연결시켜주는 방식이 있다. 외부 파일을 연결하는 쪽이 로딩 속도가 좀 더 빠르다.
'Road to Web Developer > HTML' 카테고리의 다른 글
| [입문] Hyperlink, a tag (1) | 2022.11.02 |
|---|---|
| [입문] Text Tag (0) | 2022.10.26 |
| [입문] HTML Tag 기본 (0) | 2022.10.11 |
| 시맨틱 웹 (Semantic Web), 시맨틱 태그 (Semantic Tag) (0) | 2020.09.27 |
| HTML (HyperText Markup Language) 란? (0) | 2018.12.03 |
