HTML 태그란
HTML 태그는 꺾쇠괄호 안에 이름을 넣어 콘텐츠의 한 부분에 표시를 하는 거예요. 대부분의 태그는 짝을 이뤄요. <p> 같은 여는 태그와 </p>처럼 슬래시가 붙은 닫는 태그가 있어요. 그 사이에 있는 것이 내용이고, 전체를 묶어 요소라고 해요.
<h1>을 <h2>로 바꿔 보세요(여는 태그와 닫는 태그 둘 다). 제목이 작아져요. 태그 이름이 브라우저에게 이 내용이 무엇인지 알려 줘요.
구조: 태그, 속성, 요소
<a href="/docs/html/links" class="nav">Links</a>
| 부분 | 예제에서 |
|---|---|
| 여는 태그 | <a href="/docs/html/links" class="nav"> |
| 태그 이름 | a |
| 속성 | href="/docs/html/links"와 class="nav" |
| 내용 | Links |
| 닫는 태그 | </a> |
| 요소 | 위의 모든 것을 합친 것 |
속성은 항상 여는 태그에 쓰고, 닫는 태그에는 절대 쓰지 않아요. 자세한 내용은 속성 페이지에서 다뤄요.
태그 이름은 대소문자를 구분하지 않아요. <P>와 <p>는 같아요. 소문자로 쓰세요.
빈 태그: 닫는 태그가 없는 태그
어떤 요소는 아무것도 담을 수 없어서 여는 태그만 있어요. 이런 요소를 빈 요소(void element)라고 해요. self closing 태그라고 부르기도 해요.
전체 목록은 area, base, br, col, embed, hr, img, input, link, meta, source, track, wbr이에요.
<br />처럼 슬래시를 붙여 써도 돼요. HTML에서 이 슬래시는 아무 효과가 없고, XHTML 스타일 코드가 계속 동작하도록 허용하는 것뿐이에요. <div />처럼 일반 태그에 붙인 슬래시도 무시돼요. 그러니까 그 div는 여전히 열려 있어요.
태그 중첩
요소는 다른 요소 안에 들어가요. 규칙은 연 순서의 반대로 닫는다예요. 마지막에 연 태그를 가장 먼저 닫아요.
<p>This is <strong>very <em>important</em></strong>.</p> <!-- correct -->
<p>This is <strong>very <em>important</strong></em>.</p> <!-- wrong -->
브라우저는 잘못된 중첩을 거부하지 않아요. 대신 고치는데, 그 결과가 항상 의도한 대로는 아니에요. 이 예제는 잘못 중첩된 조각 두 개를 브라우저의 파서에 넘기고, 실제로 만들어진 구조를 출력해요.
두 가지 수정이 일어나요. 겹쳐진 <b>와 <i>는 요소가 추가로 생기면서 쪼개져요. 그리고 <p>는 <div>를 담을 수 없어서, 브라우저가 div 앞에서 문단을 닫고 남은 </p>를 새 빈 문단으로 바꿔요. CSS나 JavaScript가 이상하게 동작할 때 가장 먼저 확인할 것 중 하나가 잘못된 중첩이에요.
블록 요소와 인라인 요소
대부분의 태그는 두 가지 표시 그룹으로 나뉘어요. 블록 요소(div, p, h1~h6, ul, section)는 새 줄에서 시작하고 전체 너비를 차지해요. 인라인 요소(span, a, strong, em, code)는 텍스트 줄 안에 들어가고 내용만큼만 너비를 가져요.
파란 상자는 페이지 너비만큼 늘어나고, 주황색 상자는 텍스트만 감싸요. CSS의 display 속성으로 바꿀 수 있지만, 각 태그는 기본값을 가지고 시작해요. 두 가지 범용 컨테이너는 div와 span 페이지를 보세요.
가장 많이 쓰는 HTML 태그
| 태그 | 용도 |
|---|---|
<html>, <head>, <body> | 문서의 뼈대 |
<title>, <meta>, <link> | head 안의 페이지 정보 |
<h1>~<h6> | 제목 |
<p> | 문단 |
<a> | 링크 |
<img> | 이미지 |
<ul>, <ol>, <li> | 목록 |
<strong>, <em> | 중요한 텍스트, 강조한 텍스트 |
<br>, <hr> | 줄바꿈, 주제 구분선 |
<div>, <span> | 범용 블록 컨테이너와 인라인 컨테이너 |
<table>, <tr>, <th>, <td> | 표 |
<form>, <input>, <label>, <button> | 폼 |
<header>, <nav>, <main>, <footer>, <section>, <article> | 의미를 가진 페이지 구조 |
인쇄할 수 있는 한 페이지짜리 목록은 HTML 치트 시트를 보세요.
존재하지 않는 태그
브라우저가 모르는 태그를 입력해도 오류가 나지 않아요. 알 수 없는 요소를 만들고, 내용을 보여 주고, 인라인으로 취급해요.
알 수 없는 태그는 검색 엔진이나 스크린 리더에게 아무 의미가 없으니 실제 태그를 쓰는 게 좋아요. JavaScript로 직접 컴포넌트를 만든다면 이름에 하이픈을 넣으세요(user-badge). 하이픈이 들어간 이름은 사용자 정의 요소용으로 예약되어 있어서 앞으로 나올 HTML 태그와 절대 겹치지 않아요.
자주 하는 실수
- 닫는 태그를 빼먹음.
</a>나</strong>가 없으면 페이지 나머지 전체가 링크가 되거나 굵게 표시돼요. 브라우저가 일부 태그(</p>,</li>)는 알아서 닫아 주지만 이 태그들은 아니에요. - 빈 태그를 닫음.
</br>과</img>는 올바르지 않아요. 브라우저는</br>을 여는<br>로 읽기까지 해서,<br></br>은 줄바꿈 두 번이 돼요. - 태그를 겹침. 반대 순서로 닫으세요.
<b><i>x</i></b>이지, 절대<b><i>x</b></i>가 아니에요. - 문단 안에 블록을 넣음.
<p>안의<div>, 목록, 제목은 문단을 일찍 끝내 버려요. 바깥 컨테이너로는<div>를 쓰세요. - 모양을 보고 태그를 고름.
<h2>는 크기 때문이 아니라 제목이라서 쓰는 거예요. 크기와 굵기는 CSS가 맡을 일이에요.
자주 묻는 질문
HTML 태그와 HTML 요소는 무엇이 다른가요?
태그는 <p>나 </p>처럼 직접 입력하는 마크업이에요. 요소는 브라우저가 그것으로 만드는 전체예요. 여는 태그, 속성, 내용, 닫는 태그를 모두 포함해요. <p>Hi</p>는 태그 두 개가 p 요소 하나를 만드는 거예요.
닫는 태그가 필요 없는 HTML 태그는 무엇인가요?
빈 요소(void element)는 내용을 가질 수 없어서 닫는 태그가 없어요. <br>, <hr>, <img>, <input>, <meta>, <link>, <source>, <track>, <wbr>, <area>, <base>, <col>, <embed>예요.
<br>과 <br /> 중 무엇을 써야 하나요?
둘 다 올바른 HTML이에요. 빈 요소 끝의 슬래시는 허용되지만 브라우저는 무시해요. <div />처럼 빈 요소가 아닌 태그에서도 슬래시는 무시되기 때문에, 그 div는 </div>가 나올 때까지 열린 상태로 남아요.
HTML 태그는 대소문자를 구분하나요?
아니요. <P>와 <p>는 같은 요소를 만들고, 대소문자를 섞어 써도 마찬가지예요. 소문자가 표준 스타일이고 대부분의 포매터도 소문자로 출력해요.
HTML 태그는 몇 개나 있나요?
현재 HTML 표준에는 100개가 넘는 요소가 정의되어 있지만, 일반적인 페이지에서는 20~30개 정도만 써요. 제목, 문단, 링크, 이미지, 목록, div, span, 폼, 그리고 시맨틱 레이아웃 태그예요.
존재하지 않는 태그를 쓰면 어떻게 되나요?
브라우저는 그래도 요소를 만들고 내용을 보여 주며, 특별한 의미가 없는 인라인 요소로 취급해요. 이름에 하이픈이 들어가면 <user-card>처럼 사용자 정의 요소로 쓸 수 있어요.
