3. 태그, 요소, 속성: HTML 문법의 핵심 3총사

이제 HTML 문서의 큰 뼈대는 알게 되었습니다. 그런데 막상 코드를 쓰기 시작하면 이런 순간이 옵니다. "어? 분명 비슷하게 썼는데 왜 안 되지?" 이때 가장 먼저 확인해야 하는 것이 바로 문법입니다.

HTML 초보자가 자주 헷갈리는 세 단어가 있습니다. 태그(tag), 요소(element), 속성(attribute)입니다. 이름이 비슷해서 한 덩어리처럼 느껴지지만, 역할은 조금씩 다릅니다. 이 차이만 분명히 이해해도 코드가 안 되는 이유의 절반쯤은 스스로 찾아낼 수 있습니다.¹

쉽게 비유해 볼까요? HTML은 웹페이지를 만드는 레고 설명서와 비슷합니다. 태그는 블록의 경계 표시이고, 요소는 실제로 조립된 한 덩어리이며, 속성은 그 블록의 색깔이나 이름표 같은 추가 정보입니다. 셋을 구분해서 보면 HTML이 훨씬 덜 무섭게 보입니다.

태그와 요소는 같은 말일까?

많은 입문 자료나 대화에서는 태그와 요소를 거의 같은 뜻처럼 쓰기도 합니다. 실제로 "p 태그 써 보세요"라고 말해도 대화는 잘 통합니다. 하지만 기술적으로는 차이가 있습니다.¹

태그는 꺾쇠 괄호로 둘러싸인 문법 기호입니다. 예를 들어 <p>와 </p>는 태그입니다. 반면 요소는 여는 태그, 내용, 닫는 태그까지 포함한 전체 단위를 말합니다.²

예를 들어 아래 코드를 봅시다.

<p>안녕하세요</p>

여기서 <p>는 여는 태그이고, </p>는 닫는 태그입니다. 그리고 <p>안녕하세요</p> 전체는 문단 요소입니다.

한 줄로 정리하면 이렇습니다.

태그는 표시, 요소는 완성된 한 덩어리입니다.

이 차이를 이해하면 설명을 읽을 때 훨씬 덜 헷갈립니다. 누군가 "이 요소에 속성을 추가하세요"라고 말하면, 단순히 태그 이름만이 아니라 그 HTML 단위를 떠올릴 수 있게 되니까요.

여는 태그와 닫는 태그

대부분의 HTML 요소는 여는 태그와 닫는 태그를 가집니다. 여는 태그는 시작을 알리고, 닫는 태그는 끝을 알립니다.

<h1>HTML 재밌다!</h1>

이 코드에서 <h1>은 시작을 알리는 여는 태그입니다. </h1>은 끝을 알리는 닫는 태그입니다. 닫는 태그에는 태그 이름 앞에 슬래시(/)가 들어갑니다.

이 슬래시는 아주 작지만, 역할은 큽니다. 브라우저에게 "여기까지가 제목입니다"라고 알려 주기 때문입니다. 슬래시 하나 빠졌다고 무슨 큰일이냐고 생각할 수 있지만, HTML에서는 이 작은 표식 하나 때문에 화면 결과가 꼬일 수 있습니다.

예를 들어 아래처럼 닫는 태그를 빼먹으면,

<p>오늘은 날씨가 좋다.

브라우저가 어느 정도는 알아서 보여줄 때도 있습니다. 하지만 그걸 믿고 계속 가면 나중에 어디서 꼬였는지 찾기 어려워집니다. HTML은 비교적 관대한 편이지만, 초보자일수록 닫아야 할 태그는 확실히 닫는 습관이 중요합니다.³

요소는 내용까지 포함한 완성품

이번에는 요소를 조금 더 또렷하게 봅시다.

<a rel="nofollow ugc noopener" href="https://example.com">사이트로 이동</a>

이 한 줄은 링크 요소입니다. 여기에는 여러 부분이 들어 있습니다.

• <a rel="nofollow ugc noopener" href="https://example.com"> : 여는 태그

• 사이트로 이동 : 콘텐츠

• </a> : 닫는 태그

즉, 요소는 단순한 꺾쇠 괄호 두 개가 아니라, 브라우저가 하나의 의미 있는 부품으로 이해하는 전체입니다. HTML은 이런 요소들이 모여서 페이지를 만듭니다. 제목 요소, 문단 요소, 링크 요소, 이미지 요소가 한 장면 한 장면을 채우는 셈입니다.⁴

속성은 요소에 붙는 추가 정보

이제 세 번째 주인공, 속성입니다. 속성은 요소의 기능을 더 구체적으로 정해 주는 정보입니다.²

예를 들어 링크를 만들 때 <a>만 쓰면 "링크다!"라는 뜻은 생기지만, 어디로 가야 하는지는 모릅니다. 그래서 href라는 속성을 붙입니다.

<a rel="nofollow ugc noopener" href="https://example.com">사이트로 이동</a>

여기서 href가 속성 이름이고, "https://example.com"이 속성 값입니다. 둘을 합쳐서 "이 링크는 여기로 이동해!"라고 알려 주는 것이죠.

속성은 보통 여는 태그 안에 작성합니다.² 닫는 태그에는 속성을 쓰지 않습니다. 그래서 아래처럼 쓰는 것은 올바르지 않습니다.

<a>사이트로 이동</a href="https://example.com">

반대로 이렇게 써야 합니다.

<a rel="nofollow ugc noopener" href="https://example.com">사이트로 이동</a>

속성은 꼭 필요한 경우도 있고, 있으면 더 좋아지는 경우도 있습니다. 예를 들어 이미지를 넣는 img 요소에서는 어떤 이미지를 보여 줄지 알려 주는 정보가 매우 중요합니다.

<img src="cat.jpg" alt="하품하는 고양이">

여기서 src는 이미지 파일 위치를 알려 주고, alt는 이미지를 볼 수 없을 때 대신 읽어 줄 설명입니다. 초보자 눈에는 속성이 옵션처럼 보일 수 있지만, 실제로는 요소의 의미와 동작을 완성하는 핵심 정보인 경우가 많습니다.⁴

속성은 어떻게 생겼을까?

속성의 기본 모양은 꽤 일정합니다.

<태그이름 속성이름="값">

예를 들어 이런 식입니다.

<p title="인사말">안녕하세요</p>

이 코드에서 title은 속성 이름, 인사말은 속성 값입니다. 브라우저에서 이 글자 위에 마우스를 올리면 작은 도움말처럼 보일 수 있습니다.

속성이 여러 개일 때는 한 태그 안에 나란히 적습니다.

<img src="dog.jpg" alt="웃고 있는 강아지" width="300">

한 칸 띄우며 추가하면 됩니다. 마치 학생증에 이름, 학년, 반이 함께 적히는 것처럼, 하나의 요소도 여러 정보를 가질 수 있습니다.

자주 보는 속성 몇 가지

초보자가 처음 자주 만나는 속성은 그리 많지 않습니다. 먼저 눈에 익히면 훨씬 편해집니다.

• href: 링크가 이동할 주소

• src: 이미지나 파일의 경로

• alt: 이미지 대체 설명

• title: 추가 설명

• id, class: 요소를 구분하거나 묶기 위한 이름표

지금 당장 전부 외울 필요는 없습니다. 중요한 건 속성은 요소를 더 정확하게 설명해 주는 장치라는 점입니다.

빈 요소는 왜 닫는 태그가 없을까?

여기서 초보자가 한 번 더 멈칫합니다. "분명 닫는 태그가 중요하다면서요? 그런데 왜 <br> 같은 건 혼자 있죠?"

좋은 질문입니다. 모든 HTML 요소가 여는 태그와 닫는 태그를 모두 갖는 것은 아닙니다. 내용을 담지 않는 요소도 있기 때문입니다. 이런 요소를 빈 요소(empty element) 또는 void element라고 부릅니다.³

대표적인 예는 줄바꿈을 만드는 <br>, 구분선을 넣는 <hr>, 이미지를 넣는 <img>, 입력칸을 만드는 <input>, 문서 정보를 적는 <meta> 같은 것들입니다.⁴

예를 들어 줄바꿈은 이렇게 씁니다.

안녕하세요<br>
반갑습니다

<br>는 안에 넣을 텍스트가 없습니다. "여기서 줄을 바꾸세요"라는 역할 자체로 끝입니다. 그래서 </br> 같은 닫는 태그를 따로 쓰지 않습니다.

이미지도 비슷합니다.

<img src="cat.jpg" alt="고양이 사진">

이미지 요소는 내용을 감싸는 구조가 아니라, "이 이미지를 여기에 넣어 주세요"라고 지시하는 역할을 합니다. 필요한 정보는 대부분 속성에 들어 있고, 태그 사이에 글자를 넣는 방식이 아닙니다.

<br>와 <img>를 보면 이해가 쉬워진다

문단 요소와 빈 요소를 나란히 보면 차이가 한눈에 들어옵니다.

<p>저는 문단입니다.</p>

문단은 실제 텍스트 내용을 감쌉니다. 그래서 여는 태그와 닫는 태그가 필요합니다.

<br>

줄바꿈은 감쌀 내용이 없습니다. 역할이 곧 기능입니다.

<img src="cake.jpg" alt="딸기 케이크">

이미지도 마찬가지입니다. 이미지를 표시하기 위한 정보는 src, alt 같은 속성에 담깁니다. 태그 사이에 본문을 넣는 식이 아닙니다.

이 차이를 이해하면 "왜 어떤 태그는 닫고, 어떤 태그는 안 닫지?"라는 의문이 훨씬 깔끔하게 풀립니다.

<br>와 <br /> 중 무엇이 맞을까?

자료를 보다 보면 <br>라고 쓰는 곳도 있고 <br />라고 쓰는 곳도 있습니다. 둘 중 하나가 틀린 걸까요?

HTML5에서는 빈 요소 끝의 슬래시(/)는 필수가 아닙니다. 그래서 <br>도 되고 <br />도 됩니다.³ img, hr, meta, input도 마찬가지입니다.

<br>
<img src="cat.jpg" alt="고양이">

이렇게 써도 되고,

<br />
<img src="cat.jpg" alt="고양이" />

이렇게 써도 됩니다.

초보자에게 더 중요한 것은 어느 쪽이냐보다 한 프로젝트 안에서 일관되게 쓰는 것입니다. 이 책에서는 HTML5 기준에 맞춰 슬래시 없는 형태도 자연스럽게 받아들이되, 다른 사람 코드에서 슬래시가 보여도 놀라지 않도록 기억해 두면 충분합니다.

대소문자는 왜 소문자로 쓰는 걸까?

HTML 태그 이름과 속성 이름은 기본적으로 대소문자에 아주 엄격한 편은 아닙니다. 하지만 실무와 학습에서는 소문자 사용이 표준적인 습관입니다.³

<P>안녕하세요</P>

이렇게 써도 동작할 수는 있지만,

<p>안녕하세요</p>

이렇게 쓰는 편이 훨씬 읽기 쉽고, 다른 사람과 협업할 때도 깔끔합니다. HTML은 결국 사람이 읽고 고치는 코드이기도 하니까요.

초보자가 자주 하는 문법 실수

HTML은 친절한 편이지만, 그렇다고 뭐든 봐주지는 않습니다. 아래 실수는 정말 자주 나옵니다.

• 닫는 태그를 빼먹는다.

• 속성을 여는 태그가 아닌 곳에 쓴다.

• 속성 값을 따옴표 없이 적다가 헷갈린다.

• 빈 요소에 억지로 닫는 태그를 붙인다.

예를 들어 이런 코드는 헷갈리기 쉽습니다.

<a rel="nofollow ugc noopener" href=https://example.com>이동</a>

상황에 따라 동작할 수도 있지만, 초보자일수록 아래처럼 속성 값은 따옴표로 감싸는 습관이 안전합니다.

<a rel="nofollow ugc noopener" href="https://example.com">이동</a>

그리고 이런 코드는 잘못입니다.

<br></br>

br는 빈 요소이므로 이렇게 쓰지 않습니다. 아래처럼 쓰면 됩니다.

<br>

문법 실수는 사소해 보여도 결과를 크게 바꿉니다. HTML이 안 될 때는 먼저 "태그를 제대로 열고 닫았나?", "속성을 올바른 위치에 썼나?", "빈 요소를 일반 요소처럼 쓰지 않았나?"를 확인해 보세요.

코드가 안 될 때 확인하는 순서

초보자에게 아주 유용한 점검 순서를 하나 알려 드리겠습니다. HTML이 이상하게 보이면 멋진 해결법보다 먼저 기본 문법부터 의심하는 것이 좋습니다.

첫째, 여는 태그와 닫는 태그가 짝이 맞는지 봅니다.

둘째, 속성이 여는 태그 안에 들어 있는지 확인합니다.

셋째, 속성 값이 빠지지 않았는지 확인합니다.

넷째, br, img, input, meta처럼 빈 요소를 잘못 닫고 있지 않은지 확인합니다.

이 네 가지만 확인해도 놀랄 만큼 많은 문제가 해결됩니다. 디버깅이라는 멋진 말도 결국은 이런 기본 점검에서 시작합니다.

작은 예제로 한 번에 정리하기

아래 코드를 봅시다.

<h1 title="오늘의 인사">안녕하세요!</h1>
<p>저는 HTML을 배우는 중입니다.<br>생각보다 재미있네요.</p>
<img src="smile.png" alt="웃는 얼굴 그림">

첫 번째 줄의 <h1>과 </h1>은 태그이고, 전체는 제목 요소입니다. title="오늘의 인사"는 속성입니다.

두 번째 줄의 <p>...</p>는 문단 요소입니다. 그 안에 있는 <br>는 줄바꿈을 만드는 빈 요소입니다.

세 번째 줄의 <img>는 이미지 요소인데, 역시 빈 요소입니다. 이미지를 보여 주기 위해 src와 alt 같은 속성이 함께 붙습니다.

이렇게 한 번에 보면 태그, 요소, 속성이 각자 어떤 역할을 하는지 감이 옵니다. HTML은 복잡한 암기 과목이 아니라, 역할을 구분해 읽는 언어에 가깝습니다.

이번 장의 핵심 정리

이번 장에서 꼭 붙잡아야 할 것은 네 가지입니다.

• 태그는 요소의 시작과 끝을 표시하는 문법이다.

• 요소는 태그와 내용까지 포함한 완성된 단위다.

• 속성은 여는 태그 안에 쓰며, 요소에 추가 정보를 준다.

• 빈 요소는 내용을 담지 않으므로 닫는 태그가 없다.

이 네 줄이 머릿속에 들어오면, 앞으로 HTML 코드를 볼 때 훨씬 또렷하게 읽힙니다. 이제 여러분은 단순히 "이상한 괄호들"을 보는 단계에서 벗어났습니다. 어떤 것은 태그이고, 어떤 것은 요소이고, 어떤 것은 속성인지 구별할 수 있게 된 것입니다.

다음 장에서는 이 요소들이 서로 안에 들어가며 구조를 만드는 중첩의 마법을 배워 보겠습니다. HTML은 하나씩 보면 간단한 부품인데, 함께 놓이면 웹페이지가 됩니다. 마치 토스트, 치즈, 달걀이 만나 샌드위치가 되는 것처럼요. HTML도 혼자보다 함께일 때 더 맛있습니다.

참고

¹HTML 태그와 요소의 차이 - Snug Archive

²Tags vs Elements vs Attributes in HTML - GeeksforGeeks

³HTML Elements - Tutorial Republic

⁴HTML elements reference - HTML | MDN