HTML 태그, 요소, 속성 차이 쉽게 정리하기

HTML을 처음 공부하면 비슷해 보이는 용어가 많이 나옵니다.

대표적으로 다음과 같은 용어가 있습니다.

• 태그
• 요소
• 속성
• 콘텐츠
• 주석

처음에는 전부 비슷해 보일 수 있습니다.

하지만 이 개념을 구분해두면 HTML 코드를 읽는 게 훨씬 쉬워집니다.

이번 글에서는 HTML의 기본 구성 요소를 초보자 기준으로 정리해보겠습니다.

이 글에서 다루는 내용

• 태그란 무엇인가
• 요소란 무엇인가
• 속성이란 무엇인가
• 콘텐츠란 무엇인가
• 주석이란 무엇인가
• 태그, 요소, 속성의 차이

태그란?

태그는 HTML에서 내용을 표시하기 위해 사용하는 표시 이름입니다.

HTML 태그는 보통 꺾쇠괄호 < > 안에 작성합니다.

<p>

위 코드는 p 태그입니다.

p는 paragraph의 줄임말이고, 문단을 의미합니다.

문단을 만들고 싶을 때는 다음처럼 작성합니다.

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

여기서 <p>와 </p>가 태그입니다.

여는 태그와 닫는 태그

HTML 태그는 보통 여는 태그와 닫는 태그로 구성됩니다.

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

위 코드를 나누면 다음과 같습니다.

닫는 태그에는 /가 들어갑니다.

처음에는 태그를 열었으면 닫아야 한다고 생각하면 됩니다.

닫는 태그가 없는 태그도 있다

모든 태그가 닫는 태그를 가지는 것은 아닙니다.

대표적으로 img, br, input 태그는 닫는 태그 없이 사용합니다.

<img src="cat.jpg" alt="고양이 이미지">
<br>
<input type="text">

이런 태그들은 태그 안에 따로 감쌀 콘텐츠가 없기 때문에 닫는 태그를 사용하지 않습니다.

예를 들어 이미지는 이미지 자체가 들어가는 것이지, <img>내용</img>처럼 텍스트를 감싸지 않습니다.

요소란?

요소는 여는 태그, 콘텐츠, 닫는 태그를 모두 포함한 전체 덩어리입니다.

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

여기서 <p>만 보면 태그입니다.

하지만 <p>안녕하세요</p> 전체는 요소입니다.

쉽게 말하면 다음과 같습니다.

태그 = 이름표
요소 = 이름표를 붙인 실제 한 덩어리

조금 더 풀어서 보면 다음과 같습니다.

초보자 입장에서는 처음부터 너무 어렵게 외울 필요는 없습니다.

일단 태그는 <p> 같은 표시이고, 요소는 <p>안녕하세요</p> 전체라고 이해하면 됩니다.

속성이란?

속성은 태그에 추가 정보를 넣어주는 역할을 합니다.

예를 들어 링크를 만들 때 사용하는 a 태그를 보겠습니다.

<a href="https://www.google.com">구글로 이동</a>

여기서 href가 속성입니다.

href는 링크를 클릭했을 때 이동할 주소를 알려줍니다.

코드를 나누면 다음과 같습니다.

속성은 보통 여는 태그 안에 작성합니다.

<태그이름 속성="속성값">콘텐츠</태그이름>

이미지 태그에서 속성 보기

이미지를 넣을 때도 속성을 사용합니다.

<img src="profile.jpg" alt="프로필 이미지">

이 코드에는 두 가지 속성이 있습니다.

src가 없으면 어떤 이미지를 보여줄지 알 수 없습니다.

alt는 이미지가 보이지 않을 때 대신 보여줄 설명입니다.

또한 화면 읽기 프로그램이나 검색 엔진에도 도움이 됩니다.

콘텐츠란?

콘텐츠는 태그 사이에 들어가는 실제 내용입니다.

<h1>HTML 기초 공부</h1>
<p>태그와 요소를 배우는 중입니다.</p>

위 코드에서 콘텐츠는 다음과 같습니다.

콘텐츠는 사용자가 브라우저에서 실제로 보게 되는 내용인 경우가 많습니다.

제목, 문장, 버튼 글자, 링크 글자 등이 콘텐츠에 해당합니다.

주석이란?

주석은 코드에 남기는 설명입니다.

브라우저 화면에는 보이지 않습니다.

HTML 주석은 다음처럼 작성합니다.

<!-- 여기는 헤더 영역입니다 -->
<header>
  <h1>나의 웹사이트</h1>
</header>

주석은 개발자가 코드를 이해하기 쉽게 남기는 메모입니다.

예를 들어 코드가 길어질 때 영역을 구분하는 데 사용할 수 있습니다.

<!-- 메뉴 영역 시작 -->
<nav>
  <a href="/">홈</a>
  <a href="/about.html">소개</a>
</nav>
<!-- 메뉴 영역 끝 -->

주석은 화면에 보이지 않기 때문에 사용자에게 보여줄 문장을 적는 곳이 아닙니다.

개발자가 코드를 이해하기 위해 적는 설명이라고 보면 됩니다.

전체 예제로 한 번에 보기

지금까지 배운 내용을 하나의 코드로 보겠습니다.

<!-- 자기소개 영역 -->
<section class="profile">
  <h1>안녕하세요</h1>
  <p>HTML을 공부하고 있습니다.</p>
  <a href="https://example.com">내 블로그 보기</a>
  <img src="profile.jpg" alt="프로필 이미지">
</section>

이 코드에서 각각의 역할은 다음과 같습니다.

태그, 요소, 속성 차이 정리

처음에는 아래 표만 기억해도 충분합니다.

초보자가 자주 헷갈리는 부분

태그와 요소를 같은 뜻으로 생각하는 경우

일상적으로는 태그와 요소를 섞어서 말하는 경우도 많습니다.

하지만 정확히 구분하면 다음과 같습니다.

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

• <p>는 태그입니다.
• <p>안녕하세요</p> 전체는 요소입니다.

처음 공부할 때는 이 차이를 알아두면 좋습니다.

속성을 닫는 태그에 작성하는 경우

속성은 보통 여는 태그에 작성합니다.

잘못된 예시는 다음과 같습니다.

<a>구글로 이동</a href="https://www.google.com">

좋은 예시는 다음과 같습니다.

<a href="https://www.google.com">구글로 이동</a>

속성은 여는 태그 안에 작성한다고 기억하면 됩니다.

주석을 화면에 보이는 설명으로 생각하는 경우

주석은 브라우저 화면에 보이지 않습니다.

<!-- 이 문장은 화면에 보이지 않습니다 -->

화면에 보여주고 싶은 문장은 p 태그 같은 HTML 요소로 작성해야 합니다.

<p>이 문장은 화면에 보입니다.</p>

정리

HTML을 잘 이해하려면 기본 구성 요소를 먼저 구분할 수 있어야 합니다.

처음에는 모든 태그를 외우려고 하기보다, 코드를 보고 각 부분이 무엇인지 파악하는 연습이 중요합니다.

핵심은 다음과 같습니다.

• 태그는 HTML에서 사용하는 표시 이름입니다.
• 요소는 태그와 콘텐츠를 포함한 전체 덩어리입니다.
• 속성은 태그에 추가 정보를 넣는 설정입니다.
• 콘텐츠는 태그 사이에 들어가는 실제 내용입니다.
• 주석은 개발자가 코드를 이해하기 위해 남기는 설명입니다.

한 문장으로 정리하면 다음과 같습니다.

태그는 이름표이고, 요소는 그 이름표를 붙인 전체 덩어리입니다. 속성은 그 덩어리에 추가 설정을 넣는 방법입니다.