Source: Dev.to

HTML에서 비시맨틱 태그란?

비시맨틱 태그는 어떤 종류의 콘텐츠를 담고 있는지 알려주지 않는 HTML 태그를 말합니다. 의미가 명확하지 않은 일반적인 컨테이너 역할만 합니다.
단계별로 살펴보겠습니다.

1. “비시맨틱”(Non Semantic)이 무슨 뜻인가?

‘비시맨틱(non semantic)’은 “의미가 없다”는 뜻입니다. 따라서 비시맨틱 태그는 내부에 무엇이 들어있는지 전혀 알려주지 않습니다.

예를 들어 다음과 같은 코드를 본다고 해봅시다.

<div>이것은 something</div>

someting이 정확히 무엇인지 전혀 알 수 없죠. 아래와 같은 것일 수도 있습니다.

• 단락
• 폼
• 사이드바
• 제목
• 혹은 그 외 어떤 요소든

이처럼 내용에 의미를 부여하지 않기 때문에 비시맨틱이라고 부릅니다.

2. 비시맨틱 태그는 왜 사용하나요?

의미가 없더라도 비시맨틱 태그는 여전히 유용합니다. 개발자들이 사용하는 이유는 다음과 같습니다.

a) 유연한 컨테이너

빈 상자 혹은 래퍼 역할을 합니다.

b) 요소 그룹화

여러 요소를 하나로 묶어 스타일이나 스크립트를 적용할 때 사용합니다.

예시:

<div>
  <h2>제목</h2>
  <p>본문 내용</p>
</div>

위 <div>는 제목과 본문을 하나의 단위로 묶어, 전체에 동일한 스타일을 적용하거나 스크립트를 한 번에 적용할 수 있게 해줍니다.

c) CSS·JavaScript와 함께 사용

클래스나 ID를 지정해 CSS 스타일을 적용하거나 JavaScript 기능을 부여합니다.

3. 흔히 쓰이는 비시맨틱 태그

아래 표는 가장 많이 쓰이는 비시맨틱 태그와 그 의미를 간단히 정리한 것입니다.

1. <div>

‘division’의 약자이며, 웹 페이지에서 섹션이나 블록을 만들 때 사용합니다.

예시:

<div>This is footer</div>

2. <span>

인라인 요소에 사용되며, 문장 안의 단어 하나 혹은 구절에 스타일을 적용할 때 쓰입니다.

예시:

<span>This is a special word.</span>

4. 비시맨틱 태그를 언제 사용해야 할까?

• 콘텐츠에 맞는 적절한 시맨틱 태그가 없을 때
• 디자인이나 스크립트 목적만으로 요소를 묶어야 할 때
• CSS·JavaScript를 통해 완전한 제어가 필요할 때
• 표준 태그 의미에 맞지 않는 맞춤 레이아웃을 만들 때

요약
비시맨틱 태그는 HTML에서 빈 상자와 같습니다. 내용의 의미를 설명하지는 않지만, CSS·JavaScript와 결합해 콘텐츠를 그룹화하고 제어하는 데 큰 도움이 됩니다. 가장 흔히 쓰이는 비시맨틱 태그는

• <div> : 블록‑레벨 컨테이너
• <span> : 인라인 컨테이너
  의미 있는 시맨틱 태그가 없을 때 현명하게 활용하세요.

Reference:
https://eduitlearning.in/semantic-and-non-semantic-tags/