HTML 엔티티와 id/class, data-*, lang, title 등 모든 태그가 공유하는 속성을 배운다.

엔티티와 전역 속성

이번 강의에서는 특수 문자를 안전하게 표시하는 HTML 엔티티와, 거의 모든 태그에 붙일 수 있는 전역 속성을 다룹니다. 작지만 실무에서 매일 마주치는 중요한 도구들입니다.

학습 목표

<, >, & 같은 문자는 HTML 문법으로 해석되므로, 글자 그대로 보여 주려면 엔티티로 써야 합니다.

<p>5 &lt; 10 이고 10 &gt; 5 입니다.</p>
<p>회사 &amp; 직원</p>
<p>&copy; 2026 메가스터디</p>
<p>가격&nbsp;: 1,000원</p>

⚠️ 주의 — 코드 예제를 화면에 보여 줄 때 <를 그대로 쓰면 브라우저가 태그로 해석합니다. 반드시 <로 바꿔야 코드가 글자로 표시됩니다.

id는 페이지에서 유일한 식별자이고, class는 여러 요소를 묶는 분류입니다.

<h1 id="page-title">제목</h1>

<p class="note">메모 1</p>
<p class="note">메모 2</p>

id는 #page-title로 한 요소를 가리키고 페이지 내 링크 대상이 됩니다. class는 여러 요소에 같은 스타일이나 동작을 적용할 때 씁니다. 한 요소에 여러 class를 공백으로 구분해 넣을 수 있습니다.

💡 TIP — id는 페이지에 단 한 번만 등장해야 합니다. 중복된 id는 링크 이동과 자바스크립트 선택을 꼬이게 만듭니다.

data-*는 자바스크립트에서 활용할 추가 정보를 HTML에 담는 표준 방법입니다.

<button data-product-id="42" data-price="1000">담기</button>

자바스크립트에서는 element.dataset.productId, element.dataset.price처럼 카멜케이스로 읽습니다. 마크업에 의미 있는 데이터를 자연스럽게 붙일 수 있습니다.

lang은 콘텐츠의 언어를, title은 마우스를 올렸을 때 보이는 보조 설명을 지정합니다.

<html lang="ko">
  ...
  <p>한국어 문장 안의 <span lang="en">English</span> 단어</p>
  <abbr title="HyperText Markup Language">HTML</abbr>
</html>

lang은 스크린 리더의 발음과 검색 엔진에 도움을 줍니다. title 속성은 보조 설명에 유용하지만 모바일에서는 보이지 않으므로 핵심 정보에만 의존하지 않습니다.

주석은  사이에 작성하며 화면에 보이지 않습니다.

<!-- 여기부터 푸터 영역 -->
<footer>...</footer>

⚠️ 주의 — 주석은 페이지 소스에 그대로 노출됩니다. 비밀번호, 내부 메모, 민감한 정보를 주석에 남기지 마세요.

힌트 — <는 <로, 추가 데이터는 data-로 시작합니다.

💡 연습문제 풀이

불러오는 중…