HTML 기초와 HTML5

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 마크업 언어다. 마크업 언어란 태그 등을 이용해 문서나 데이터의 구조를 명시하는 언어로, HTML과 Markdown이 대표적이다. 스타일은 CSS가, 동작은 JavaScript가 맡고 HTML은 "무엇이 어떤 의미의 내용인가"를 표현한다.

기본 구조

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- 실제 화면에 보이는 내용 -->
  </body>
</html>

<head>에 넣는 인코딩·뷰포트·<link rel>·meta·Open Graph·<base>는 문서 head와 메타데이터에 정리했다.

DOCTYPE과 렌더링 모드

<!DOCTYPE html>은 문서 맨 앞에 두는 문서 유형 선언이다. 대소문자는 가리지 않는다. 예전 HTML 4·XHTML의 DOCTYPE은 문서가 따르는 DTD(Document Type Definition, 어떤 요소 안에 무엇이 올 수 있는지 정한 문법 정의)를 가리켰다. 지금 HTML은 SGML 기반이 아니라 DTD가 없고, DOCTYPE이 하는 일은 브라우저의 렌더링 모드를 고르는 것 하나다.

document.compatMode가 "CSS1Compat"이면 표준(또는 제한된 쿼크), "BackCompat"이면 쿼크 모드다. DOCTYPE 앞에 주석이나 공백 외의 내용이 오면 쿼크 모드로 떨어질 수 있으니 반드시 첫 줄에 둔다. application/xhtml+xml로 보내는 XHTML은 DOCTYPE 없이도 늘 표준 모드다.

요소와 속성

요소(element) 는 여는 태그 + 내용 + 닫는 태그(<h1>안녕하세요</h1>)이고 서로 중첩된다. 태그(tag) 는 꺾쇠괄호를 포함한 <h1> 자체를 말한다. 둘을 섞어 부르지만, 요소는 그 안의 내용과 중첩 요소까지 포함한다. 브라우저는 태그를 보여 주지 않고 내용을 해석하는 데만 쓴다. 속성(attribute) 은 시작 태그에 이름="값" 쌍으로 적는 부가 정보(<a href="https://google.com">)이며, 태그마다 쓸 수 있는 속성이 다르다.

요소의 종류

대체 요소와 빈 요소는 다른 개념이다. <video>, <picture>, <iframe>은 대체 요소지만 대체 콘텐츠를 담으므로 닫는 태그가 있다. <link>, <meta>, <base>는 빈 요소지만 아무것도 그리지 않고 속성으로 정보만 준다. 빈 요소 끝의 /(<img />)는 XML(XHTML·SVG)의 습관이다. HTML 파서는 무시하고 검사기는 경고를 낸다. 일관되게 쓰기만 하면 된다. 다만 따옴표 없는 속성 값 바로 뒤에 붙이면 /가 값에 들어간다.

브라우저는 관대하다, 그래도 닫는다

HTML 파서는 틀린 마크업에도 실패하지 않는다. 생략한 </li>, </p>는 다음 태그에서 닫힌 것으로 보고, <body>나 표의 <tbody>는 쓰지 않아도 만들어 넣는다. 명세는 요소마다 태그를 생략할 수 있는지 정해 두었다. 하지만 모든 요소를 닫고 순서대로 중첩한다. 닫지 않은 </ul> 뒤의 <h1>은 목록의 일부로 해석되어 스타일까지 물려받고, <script>, <style>, <template>, <textarea>, <title>을 닫지 않으면 뒤의 내용 전체가 그 안으로 빨려 들어가 페이지가 망가진다. 어떤 태그가 생략 가능한지 외우는 것보다 전부 닫는 편이 쉽다.

속성 문법

• 속성은 여는 태그에만 쓴다. 요소 이름 뒤에 공백으로 구분한다.
• 값에 공백이나 특수 문자가 있으면 따옴표가 필수다. 그러니 늘 따옴표를 쓴다.
• HTML 요소·속성 이름은 대소문자를 가리지 않는다. 명세가 정한 키워드 값(type="TeXt")도 가리지 않는다. 하지만 id·class처럼 작성자가 정한 문자열은 가린다. HTML에서 대소문자를 가리는 값은 CSS 속성 선택자와 JavaScript에서도 가린다.
• 요소·속성 이름은 소문자로, 값은 따옴표로 감싸는 습관이 흔히 말하는 「XHTML 스타일」이다.

불리언 속성은 값을 바꾸지 말고 속성 자체를 넣고 뺀다(el.toggleAttribute('muted'), removeAttribute('disabled')). 열거형과 헷갈리지 않으려면 값이 필요 없는 속성은 값을 비워 쓰고, 나머지는 명세를 찾아본다.

전역 속성(Global Attribute)

모든 요소에 쓸 수 있는 속성이다. 30개가 넘고, <meta hidden>처럼 붙여도 효과가 없는 조합도 있다.

getElementsByClassName()은 DOM이 바뀌면 함께 바뀌는 살아 있는 HTMLCollection을, querySelectorAll()은 호출 시점의 정적 NodeList를 돌려준다.

data-* 속성

data-로 시작하는 속성은 표준에 알맞은 속성이 없는 데이터를 요소에 붙이는 공식 통로다. 표준에 없는 속성을 아무렇게나 만들지 않고 data-를 붙이는 이유는 앞으로 생길 표준 속성과 겹치지 않기 때문이다. 이름은 data- 뒤에 한 글자 이상, 대문자 없이 쓴다. 값은 늘 문자열이다.

<li data-review-id="42" data-state="open">…</li>

el.dataset.reviewId   // "42": data-review-id가 카멜케이스로 바뀐다
el.dataset.state = 'closed'

li[data-state="open"] { font-weight: bold; }
li::after { content: attr(data-state); }

data-*는 그 사이트 자신의 스크립트·스타일을 위한 비공개 값이다. 명세는 사이트와 무관한 외부 소프트웨어(검색 엔진, 다른 사이트의 크롤러·확장)가 이 값을 읽어 쓰는 것을 의도하지 않는다. 음악 목록에 data-length="2m11s"를 붙여 자체 정렬 스크립트가 쓰는 것은 맞는 용도이고, 외부에 기계가 읽을 정보를 알리려면 Microdata·JSON-LD 같은 구조화 데이터를 쓴다(SEO 기초).

JavaScript 프레임워크 이전에는 DOM에 데이터를 두는 주된 방법이었고, 지금은 HTML과 JS·CSS 사이에 값을 넘기는 가벼운 통로로 쓴다. CSS attr()은 content에서는 모든 브라우저가 지원하고, 다른 속성 값에 타입을 지정해 쓰는 확장 문법은 아직 실험적이다.

속성 하나로 끝나는 기능

꽤 많은 기능이 속성 하나로 끝난다. JavaScript로 다시 만들기 전에 HTML에 이미 있는지부터 확인한다. HTML 속성은 브라우저가 이미 구현해 둔 기능의 스위치다.

시맨틱 태그

의미 없는 div로만 영역을 나누는 대신, 영역의 의미를 드러내는 태그를 쓴다. header, nav, main, section, article, aside, footer가 대표적이다. 개발자, 검색 엔진, 스크린 리더 모두에게 의미 있는 구조를 전달하고 SEO와 접근성의 기본이 된다. 태그별 의미, 제목 계층, <article>과 <section>을 고르는 법은 시맨틱 HTML과 문서 구조에 정리했다.

자주 쓰는 태그

텍스트와 그룹 요소

인용·강조·코드·약어 요소를 어떤 의미로 고르는지는 텍스트 의미 요소와 문자 참조에 있다.

표(table)

<table> 안을 <thead>, <tbody>, <tfoot>으로 나누고, 행은 <tr>, 제목 셀은 <th>, 데이터 셀은 <td>로 만든다. <caption>은 표 제목이다. 자식 순서, scope·headers, 셀 합치기, <colgroup>은 목록과 표 마크업에 정리했다.

<table>
  <caption>방과 후 종목별 신청자 수</caption>
  <thead><tr><th>종목</th><th>축구</th><th>배드민턴</th></tr></thead>
  <tbody>
    <tr><td>1학년</td><td>15명</td><td>30명</td></tr>
    <tr><td>2학년</td><td>15명</td><td>11명</td></tr>
  </tbody>
  <tfoot><tr><td>합계</td><td>30명</td><td>41명</td></tr></tfoot>
</table>

form

<form>은 사용자 입력 데이터를 서버로 제출하는 영역이다. 안에 든 입력 요소의 name과 value가 이름/값 쌍으로 전송된다.

제출되는 데이터에는 몇 가지 규칙이 있다.

• name이 없는 컨트롤, 선택되지 않은 체크박스·라디오, 제출에 쓰지 않은 버튼은 보내지 않는다. 값이 비어 있어도 name이 있으면 빈 값으로 간다.
• value 없는 <option>은 글자가 값이 되고, value 없는 체크박스는 on이 된다.
• 같은 name의 라디오끼리 하나만 선택된다. 버튼에 name을 주면 어느 버튼으로 제출했는지 알 수 있다.
• 버튼의 formaction·formmethod·formnovalidate 등은 <form>의 값보다 우선한다. required·pattern·min 같은 속성은 JavaScript 없이 제출 전 제약 검증을 한다.
• 비밀번호·카드 번호는 URL에 남는 GET 대신 POST로 보낸다. 클라이언트 검증은 서버 검증을 대신하지 않는다.

<input>의 type별 동작, select·textarea·fieldset·datalist, 모든 입력에 <label for>를 잇는 법은 HTML 입력 요소 치트시트에, 폼 사용성은 더 나은 폼을 만드는 팁과 접근 가능한 폼과 오류 처리에 있다.

링크의 target과 rel

<a>의 target(_self·_blank·_parent·_top), iframe 안 링크, rel="noopener noreferrer", download와 내비게이션 마크업은 링크와 내비게이션 마크업에 있다.

 : 줄 바꿈 없는 공백

 (non-breaking space)는 공백을 표시하면서 그 자리에서는 줄이 바뀌지 않게 하는 HTML 특수 문자다. 줄 바꿈은 앞이나 뒤의 일반 공백에서 일어난다. 극단적으로 문단의 모든 공백을  로 바꾸면 텍스트가 한 줄로 이어져 부모 영역 밖으로 뚫고 나간다.

JSX에서 줄을 나눠 쓴 요소 사이에 일반 공백이 필요하면 {' '}를 쓴다.

HTML5와 웹 플랫폼

HTML5는 마크업 문법만이 아니라 새 요소와 DOM API를 함께 묶은 웹 플랫폼을 가리키는 이름이었다. 예전에는 플러그인이나 긴 JavaScript로 우회하던 기능이 정식 요소·API가 되었다. 문법 쪽 변화는 DOCTYPE 한 줄 간소화, 시맨틱 태그 추가, <center>·<font> 같은 표현용 태그 폐기(→ CSS)다. 플랫폼은 흔히 다음 영역으로 나눈다.

지금은 「HTML5」라는 버전이 따로 없다. HTML 표준(HTML Living Standard)은 WHATWG가 계속 고쳐 가는 단일 문서이고, 2019년부터 W3C와 협력해 관리한다.

XML·XHTML에서 HTML5로

W3C는 HTML 4.01(1999) 뒤 표준의 방향을 XHTML 1.0으로 돌렸고, 하위 호환을 버린 XHTML 2.0을 준비했다. 하지만 오류 하나에 페이지 전체가 멈추는 문법은 현실의 웹과 맞지 않았고, 대부분의 「XHTML」 페이지는 text/html로 보내져 실제로는 HTML 파서로 읽혔다. 2004년 브라우저 제조사들이 WHATWG를 세워 하위 호환과 웹 애플리케이션 기능을 앞세운 HTML5를 만들었고, W3C는 2009년 XHTML 2.0을 접었다. 지금 XML 문법은 HTML 명세 안의 한 표기법(XML 직렬화)으로 남아 있다. 모두 닫고 소문자로 쓰는 습관만 「XHTML 스타일」로 이어진다.

어떤 파서가 읽는지는 DOCTYPE이 아니라 MIME 타입이 정한다. XHTML 1.0 부록 C는 XHTML 문법으로 쓰되 text/html로 보내도 된다는 길을 열어 두었고, 대부분의 페이지가 이 길을 택했다. XHTML 1.1은 application/xhtml+xml만 허용해 이 길을 닫았고, 그래서 거의 쓰이지 않았다. 웹 페이지의 대다수가 마크업 오류를 하나 이상 품고 있다는 현실에서, 오류 하나에 화면이 멈추는 처리 방식은 받아들여질 수 없었다.

HTML이 자라 온 방식

1990년에 만든 페이지도 지금 브라우저에서 열린다. HTML은 버전이 갈아엎힌 적 없이 하위 호환을 지키며 이어졌다.

핵심 정리

• HTML은 구조와 의미, CSS는 표현, JavaScript는 동작을 담당한다.
• 파서는 관대하지만 모든 요소를 닫고, 속성 값은 따옴표로 감싼다. 불리언 속성은 있으면 참이다.
• 영역을 나눌 때는 가능한 한 시맨틱 태그를 쓴다. SEO와 접근성의 기본이다.
• form 데이터는 input의 name/value 쌍으로 전송되고, label 연결로 사용성과 접근성을 챙긴다.

관련 노트: Markdown(또 하나의 마크업 언어), DOM과 BOM, 문서 head와 메타데이터, 텍스트 의미 요소와 문자 참조, 목록과 표 마크업, 링크와 내비게이션 마크업, 시맨틱 HTML과 문서 구조, 프론트엔드 웹 개발 용어집, 스크립트·스타일 로딩 순서와 점진적 렌더링, 다국어 페이지, 폼 제출과 데이터 전송, 제약 검증: required·pattern·ValidityState, 창과 프레임: 팝업, iframe, postMessage