semantic 태그, non-semantic 태그, div, span

semantic 태그, non-semantic 태그, div, span 

 

 

이번 글에서는

semantic tag 와 non-semantic tag에 대해

얘기해보겠다.

​

간단하게 설명하자면

1. semantic 뜻은 의미가 있는 태그이고

​

2. non-semantic 은 아무 의미가 없는

태그를 뜻한다.

이게 무슨 말일까?

​

예를 들면 h1 태그는 의미가 있다.

이것은 제목이라는 걸 알 수 있다.

하지만

<div>무엇일까?</div>

div 태그의 경우는 아무 의미가 없다.

굳이 뜻을 찾으면 division 정도이다.

이 태그는 헤더 푸터 내비게이션 등등

뭔가를 지칭하지 않고

아무 의미가 없다.

비슷하게 span 태그도 non-semantic 태그다.

span의 짧다는 뜻인데.

그게 다다.

​

이게 짧은 타이틀인 건지,

문단인 건지 설명인지,

전혀 알 수가 없다.

​

section 태그는 말 그대로 부분이다.

그래서 의미가 있다고 볼 수 있다.

또 비슷한 의미로

article 태그가 있다.

이것도 어떠한 항목을 의미한다.

의미가 있다고 볼 수 있다.

​

header 태그는 머리말 부분,

영역이기 때문에 의미가 있다고 볼 수 있다.

​

이와 같이 header, article, section 과 같은 태그와

div , span 과 같은 태그에는 큰 차이가 있다.

​

주로 나는 header와 같은 태그를 사용한다.

그런데 박스 같은 것이 필요할 때

div와 같은 태그를 사용한다.

div는 컨테이너, 박스와 같은 태그다.

그 안에 내용물을 넣을 수도 있다.

​

span은 텍스트를 위한 컨테이너다.

텍스트를 위해서는 제목 title,

문단 p와 같은 태그가 있는데

이와 같은 경우는 아니고

텍스트를 위한 컨테이너가 필요하면

span을 쓰면 된다.

​

다시 반복하면 semantic 태그는

제목, 문단, 내비게이션 등등

뭔가 뜻이 있는 태그이고

​

non-semantic-태그는

아무 지칭하는 바가 없는

의미 없는 태그를 뜻한다.

 

 

 

 

출처 : 

blog.naver.com/cksdn4214/222004261013

​