[HTML의 TEXT 요소] #03 HTML 텍스트 요소 – 중요성과 강조 표현 완전 정리

Web Front/HTML

TOASTDEV 2025. 9. 3. 20:19

안녕하세요, 토스트 데브입니다!
오늘은 HTML에서 텍스트를 강조하거나 중요성을 표현할 때 사용하는 주요 태그들을 정리해보겠습니다.

웹페이지의 내용 전달에서 텍스트의 강조는 의미를 부각시키고,
웹 접근성을 높이며, 사용자의 주의를 유도하는 데 아주 중요한 역할을 합니다.

🔹 1. – 강한 중요성 강조

태그는 의미적으로 중요한 단어를 표현할 때 사용합니다.
브라우저 상에서는 보통 굵은 글씨로 표시되지만, 단순한 스타일이 아닌 의미 전달이 목적입니다.

<p><strong>주의:</strong> 이 작업은 되돌릴 수 없습니다.</p>

🔸 의미 중점: 단순히 굵게 보이게 하는 게 아니라, 해당 텍스트가 중요하다는 의미를 스크린 리더나 검색 엔진에도 전달합니다.

태그는 문장에서 강조하고 싶은 단어를 표현할 때 사용합니다.
보통 이탤릭체로 보여지며, 감정적 강조나 뉘앙스를 전달하는 데 사용됩니다.

<p>나는 <em>정말로</em> 이걸 원했어요.</p>

🔸 이 중요성, 은 강조의 뉘앙스에 가깝다고 보면 이해가 쉬워요.

태그는 시각적인 굵기 강조를 위해 사용되지만, 의미적 강조는 아닙니다.

<p>오늘의 <b>핫이슈</b>를 확인해보세요.</p>

🔸 이 태그는 단순히 디자인적인 강조를 원할 때 사용하며, 접근성 도구에는 아무 의미를 주지 않습니다.

태그는 기술용어, 외래어, 문학적 강조 등에 쓰이며, 이 역시 스타일 강조일 뿐 의미적 역할은 없습니다.

<p>이탈리아어로 <i>ciao</i>는 인사말입니다.</p>

태그는 브라우저에서 노란색 형광펜처럼 보이는 효과로 사용자의 주의를 끌고 싶을 때 사용합니다.

🔸 특히 검색 결과에서 키워드 하이라이트 용도로 많이 쓰입니다.

<span class="bold">이건 CSS로 만든 굵은 글씨입니다.</span>

<style>
  .bold {
    font-weight: bold;
  }
</style>

HTML 텍스트 요소는 단순히 디자인만을 위한 것이 아니라, 정보 구조와 웹 접근성, SEO에도 큰 영향을 줍니다.

의미를 가진 태그는 의미 있게, 디자인만 필요할 땐 CSS로 이 원칙을 꼭 기억하세요!

#HTML, #HTML기초, #텍스트태그, #strong태그, #em태그, #mark태그, #강조태그, #웹접근성, #웹표준, #웹개발, #프론트엔드, #웹디자인, #웹퍼블리싱, #semantic태그, #코딩입문, #웹개발공부, #toastdev