[HTML] div 태그는 현업에서 어떻게 쓰일까?

<div> 태그

div는 의미론적으로 아무런 의미가 없는 태그이다.

CSS와 JS를 적용할 태그를 자식요소로 묶을 때 쓰는 태그로 썼던 경험은 있는데

현업에서는 주로 어떤 패턴의 작업을 할 때 사용하는지 궁금해져서 알아봤다.

• div 태그의 정의 : div 태그는 division(분할하다)의 약자로 HTML 문서 내에 한 줄의 가로(Block) 공간을 만드는 태그이다. 정의부터, div 태그에 담긴 정보에 대한 context는 읽을 수 없다.
• div 의 사용 패턴 : 위에 서술한대로 웹페이지에서 화면의 특정 영역에 스타일을 적용하거나, 전체 화면 레이아웃을 잡는데 자주 사용이 된다. 즉, 공간을 만드는 태그이기 때문에, 단순히 콘텐츠를 그룹화하는데만 사용이 된다. 그래서, SEO에 좋은 태그를 사용하려면 Semantic HTML을 우선 사용해보고 남은 영역에 div 태그를 사용하는 것이 좋다!
  • 하지만, HTML 문서에는 Semantic한 정보 외에도 아주 많은 유형의 정보가 존재한다. 위의 사용패턴도 우리가 아주 자주 사용하는 패턴이다.
  • Advanced WEB RANKING 에 따르면, HTML 태그 중 HTML 문서 작성에 필수로 쓰이는 태그를 제외하고 가장 많이 쓰이는 태그가 바로 div 태그이다! 의미론적인 태그는 아니지만 아주 중요한 태그라고 할 수 있다.

 

이미지 출처 : https://www.advancedwebranking.com/seo/html-study/