[HTML] 의미없는 태그 <div> 태그를 배워보자

 

---

 

---

 

HTML을 공부하다보면,

그리고 어떤 웹사이트에서든 흔하게 아주 많이 접할 수 있는 태그가 하나 있다.

HTML 문서 작성에 필수로 있어야하는 , , 등등을 제외하고 가장 많이 보이는 태그가 아마 <div> 태그일 것이다.

<div></div>

 

그런데, HTML의 각종 태그에 대해 공부하다보면 <div> 태그가 아무 의미없는 태그라고 한다.

특별한 어떤 기능을 가진 그런 태그가 아니라 진짜 말 그대로 <div> 태그는 어떠한 기능도 갖고 있지 않기 때문이다.

 

그런데 이런 태그는 왜 만들었고, 왜 있는 것일까?

또 아무런 기능도 없는 이 태그가 웹페이지를 만드는데 왜 그렇게 많이 사용되는 걸까?

 

Advanced Web Ranking이라는 사이트에 가면 각 태그별 사용률이 나와있는데, (링크는 여기를 클릭)

그 중 상위권을 일부 캡쳐했다.

이 사용률 표를 보면 <div> 태그가 6번째에 위치한 것을 알 수 있다.

사용률은 무려 95.1%.

 

 

 

왜 이렇게 많은가??

<div> 태그가 도대체 뭔데?

<div> 태그의 정의를 확인하기 위해 검색을 했더니 아래와 같은 답을 얻을 수 있었다.

 

<div> 태그는 레이아웃을 만들거나 콘텐츠를 나누는(division) 컨테이너로 사용하는 태그입니다.
<div> 태그는 자체적으로 특별한 의미가 전혀 없습니다.


<div>는 "division(나누다)"의 줄임말로 사용된 것입니다.
대부분의 HTML 태그들은 각각의 특별한 의미가 있지만, <div> 태그는 순전한 컨테이너로서 본질적으로 어떤 의미도 없습니다.
의미가 있는 태그(예를 들어, <article>이나 <nav>)를 사용할 수 없는 상황에서만 <div> 태그를 사용하세요.
<div> 태그에 role 속성을 사용해서 구조나 의미를 부여할 수 있습니다.

출처 : codingEverybody

 

<div> 태그 자체적으로는 특별한 기능이 없지만,

페이지의 레이아웃을 만들거나 콘텐츠를 나눌 때(division) 주로 사용하게 되는 태그인 것으로 보인다.

 

HTML로 페이지를 구성하면서 각 콘텐츠를 구분하기 위해 <div> 태그로 감싸서 특정 콘텐츠를 묶어주게 되는데 그렇게 <div> 태그를 사용하는 것이다.

 

네이버 홈페이지의 html 코드를 보면 <div> 태그로 각 콘텐츠 구역이 나뉘어진 것을 볼 수 있다.

 

 

 

이처럼 <div> 태그 자체는 특별한 의미를 가지고 있지는 않지만 콘텐츠의 구역 나누기 등에 사용되기도 하고,

속성값을 추가해 여러 기능들을 추가할 수 있기 때문에 <div> 태그를 많이 사용하게 되는 것이다.

 

앞서 <div> 정의에 대한 설명을 볼 수 있었던 codingEverybody 사이트의 설명을 더 살펴보면,

<div> 태그는 속성을 활용하기 위한 컨테이너 라는 설명을 볼 수 있다.

 

콘텐츠를 구역별로 묶고, 각 구역별로 <div> 태그로 묶은 콘텐츠들은 속성을 통해 각각의 특성에 맞는 정보를 표시할 수 있게 하는 것이 <div> 태그의 중요한 역할이라 할 수 있겠다.

 

 

 

 

위 사진을 보면 <div> 태그를 통해 각 구역이 나뉘어 있고,

<div> 태그 내에 또 다른 <div> 태그들로 콘텐츠를 나눈 것도 확인할 수 있다.

아무런 의미가 없는 태그인 것 같지만 사실은 매우 중요한 역할을 하는 태그이기 때문에 사용률 또한 높을 수 밖에 없는 그런 태그인 것이다.

 

 

오늘은 여기까지.

끝.