[ HTML ] 의미에 맞는 태그 사용하기

1. 볼드체 태그 (b, strong)

<b> 

• 단순히 텍스트를 굵게 표시하는 태그. 의미는 없고, 오직 스타일링만을 위한 태그

<strong>

• 텍스트를 강조하는 의미를 가진 태그. 시각적으로 볼드체처럼 보이지만, 중요한 내용을 강조할 때 사용
• 검색 엔진이나 스크린 리더기에서는 이를 중요한 문장으로 인식하고, 시각적으로도 중요성을 강조
• 시각장애인에게는 더 크게 읽어줌

 

2. 이탤릭체 태그 (i, em)

<i>

• 단순히 이탤릭체(기울임꼴)를 적용하는 태그. 디자인적인 효과만 있고, 의미가 특별히 부여되지 않음

<em>

• 강조된 이탤릭체. 텍스트를 강조하는 의미를 담고 있어. 시각적으로는 이탤릭체지만, 스크린 리더기나 검색 엔진에서는 강조된 텍스트로 해석되며 더 중요한 텍스트로 인식

 

3. 기타 텍스트 스타일 태그

<small>

• 텍스트를 작게 표시

<mark>

• 형광펜으로 마킹한 것처럼, 중요한 부분을 강조하고 싶을 때 사용. 스타일로도 할 수 있지만, mark 태그를 쓰면 의미적으로 중요함을 부여할 수 있음

<del>

• 텍스트에 취소선을 그어, 삭제된 내용을 표시. 스타일에서도 할 수 있지만, 취소선을 의미적으로 표현하고 싶으면 태그 사용

<ins>

• 텍스트에 밑줄을 그어, 추가된 내용을 표시.

<sub>

• 아래첨자를 표시할 때 사용

<sup>

• 윗첨자를 표시할 때 사용

 

4. 인용 관련 태그

<blockquote>

• 긴 인용문을 표시할 때 사용. cite 속성을 통해 원본 출처를 지정할 수 있음(ex. 누군가의 말이나 책, 글에서 직접 인용할 때)

<q>

• 짧은 인용문을 표시할 때 사용. q는 자동으로 쌍따옴표를 붙여줌

<cite>

• 작품명, 영화명, 책명, 음악명 등을 나타낼 때 사용 (ex. 책 제목이나 영화 제목에 사용)

 

5. 기타 중요한 태그

<abbr>

• 약어를 풀어 쓸 때 사용. title 속성에 약어의 풀네임을 적을 수 있음

<address>

• 주소를 표시할 때 사용. 일반 텍스트와 구분되도록 주소를 나타낼 수 있음

 

6. 의미 없는 태그

 

<div>

• 블록 요소로, 컨테이너 역할. 배경색을 넣으면 한 줄을 차지하고, 그 안에 있는 모든 요소들을 감싸는 역할. 하지만 의미가 없는 태그

<span>

• 인라인 요소로, 콘텐츠의 크기만큼만 차지. 여러 요소를 가로로 나열하거나 스타일을 지정할 때 사용. div와 마찬가지로 의미가 없음

 

정리

• 의미 있는 태그들(strong, em, del, ins, q, cite 등)은 그 자체로 의미를 부여하고, 스크린 리더기나 검색엔진이 이를 인식하여 특별한 처리를 할 수 있도록 도와준다. 이런 태그들은 웹 접근성과 검색 최적화(SEO)에 중요한 역할을 한다.

• 반면, div와 span은 구조적인 역할만 하는 컨테이너 태그로, 특별한 의미는 없다. 이 태그들은 레이아웃 구성을 위해 사용된다.