태그와 요소

요소는 보통 세 부분이 이어진 것입니다. 여는 태그, 내용, 그리고 빗금이 붙은 닫는 태그입니다.

요소를 이루는 부분

<p>Bread is ready.</p>를 보겠습니다. 여는 태그 <p>는 여기서 문단이 시작된다는 표시입니다. 첫 꺾쇠 뒤에 빗금이 붙은 닫는 태그 </p>는 문단이 끝난다는 표시입니다. 둘 사이에 있는 것이 내용이고, 태그와 내용을 합친 전체가 요소입니다. 대화에서는 요소를 그냥 태그라고 부르는 일이 많고 그래도 괜찮지만, 문서를 읽을 때는 차이를 알아 두면 편합니다. 태그는 꺾쇠 안의 표시이고, 요소는 그 표시로 완성된 페이지의 한 조각입니다.

속성은 세부 정보를 더합니다

여는 태그에는 이름="값" 모양으로 쓰는 추가 설정인 속성을 붙일 수 있습니다. <a href="menu.html">Menu</a>에서 href 속성은 링크가 어디로 가는지 알려 주고, <html lang="en">의 lang 속성은 언어를 알려 줍니다. 값은 큰따옴표로 감쌉니다. 표준은 따옴표 없는 값도 일부 허용하지만, 따옴표를 쓰면 문제가 생길 일이 없습니다. 속성이 여러 개면 빈칸으로 나누고, 순서는 상관없습니다. 입력 칸의 required처럼 이름만 써도 켜지는 불리언 속성도 있습니다.

<p class="note" id="opening">We open at <strong>7 am</strong>.</p>

중첩: 연 순서의 반대로 닫기

요소는 다른 요소 안에 들어갑니다. 위 예에서 <strong>은 <p> 안에 있습니다. 규칙은 수학의 괄호와 같습니다. 마지막에 연 것을 먼저 닫아야 합니다. <p><strong>7 am</p></strong>는 strong 요소가 열린 채로 문단이 닫히므로 틀렸습니다. 브라우저가 뜻을 짐작해 주기는 하지만, 실수의 모양에 따라 짐작도 달라집니다. 이 과정의 예시처럼 자식 요소를 두 칸씩 들여 쓰면 중첩이 한눈에 보입니다.

빈 요소

내용을 가질 수 없어서 닫는 태그가 없는 요소도 있습니다. 이런 요소를 빈 요소(void element)라고 합니다. 자주 쓰는 것은 <br>(줄바꿈), <hr>(주제 구분), <img>, <input>, <meta>, <link>입니다. <br />처럼 빗금을 붙여 쓴 것도 볼 수 있는데, HTML에서는 이 빗금이 허용되지만 아무 뜻이 없어서 두 가지 모두 됩니다.

모양이 아니라 뜻

문단 안에서 중요한 말에는 <strong>, 말할 때 힘을 주어 뜻이 달라지는 강조에는 <em>을 씁니다. 브라우저는 strong을 굵게, em을 기울여 보여 주지만, 중요한 것은 뜻입니다. 화면 낭독기는 이 부분을 다른 억양으로 읽을 수 있고, 검색 엔진은 중요한 낱말로 봅니다. 꾸미려고 굵게 하고 싶을 뿐이라면 CSS가 할 일입니다. <b>와 <i>는 배 이름이나 외국어 낱말처럼 따로 구별하되 더 중요하지는 않은 글자에 씁니다.

특수 문자와 주석

<는 태그의 시작이므로 일반 글자로 그냥 쓸 수 없습니다. 대신 문자 참조를 씁니다. 작다 기호는 <, 크다 기호는 >, 앰퍼샌드 자체는 &입니다. <!-- 이렇게 --> 쓴 주석은 브라우저가 무시하므로 자신에게 남기는 메모로 쓰기 좋습니다. 마지막으로 HTML은 공백을 하나로 합칩니다. 파일에 빈칸 열 개나 줄바꿈 세 번을 넣어도 화면에는 빈칸 하나로 나옵니다. 배치는 스페이스 바가 아니라 요소와 CSS로 만듭니다.