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

 

 

 

 

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

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

 

 

🔹 1. <strong> – 강한 중요성 강조

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

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

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

 

 

🔹 2. <em> – 강조(강세) 표현

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

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

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

 

 

🔹 3. <b> – 단순 굵은 글씨 (의미 없음)

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

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

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

 

 

🔹 4. <i> – 단순 이탤릭체 (의미 없음)

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

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

 

 

🔹 5. <mark> – 형광펜 효과로 강조

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

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

 

 

📌 보너스: 시각 스타일은 CSS로!

• 의미를 강조하고 싶다면 <strong>, <em>
• 단순한 스타일은 CSS의 font-weight, font-style 등으로 처리하는 게 좋습니다.

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

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

 

 

✅ 마무리 정리

태그	용도	의미적 강조	시각 효과
<strong>	중요함을 표현	✅	굵게
<em>	감정적 강조	✅	이탤릭
<b>	시각적 굵기	❌	굵게
<i>	시각적 이탤릭	❌	이탤릭
<mark>	하이라이트 강조	✅	형광펜 스타일

 

 

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

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

 

 

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