오늘은 조금 간단하지만 복잡한 이야기를 해보려고 합니다.
그것은 바로 HTML의 태그에 관련된 이야기입니다.
<div>태그를 많이 사용하고 계신가요? <div> 태그는 보통 어떠한 태그들을 한 그룹에 포함 시켜 가독성과 기능을 묶는 곳에 사용합니다.
그렇다면 <section>와 <article> 태그는 알고 계신가요?
<div>, <section>, <article> 이 3가지 태그 모두가 똑같은 기능을 하고 있습니다. 그렇다면 왜 그럴까요? 저도 이점이 궁금해서 조금 더 찾아보며 물어보며 많은 정보를 찾아보았지만 딱히 그렇다 할 기능적 차이가 없습니다.
해서! 튜터님과 인터넷과 ChatGPT에게 물어보며 여러 정보를 모았습니다.
본론만 말하면 결국엔 가독성과 영역 분류를 위해서인 것 같습니다.
같습니다? 위해서면 위해서이지 같습니다는 뭔가요? 라고 말하실테지만
정말로 명확한 이유를 정말 찾지 못하였습니다. 아니, 이해를 못하였습니다.
머리로는 이해했지만 가슴은 이해를 하지 못하였습니다.
사용 예시와 찾아온 정보를 적어보겠습니다.
<div class="container">
<h2>Header</h2>
<p>이 태그들은 div태그 안에 들어있습니다<p>
</div><div>태그를 사용해 <h2>태그와 <p>태그가 묶여 있습니다.
컨텐츠를 그룹화 하고 있고, 클래스를 지정해주어 css 파일과 연계하기 좋습니다. 구조적인 의미를 가지고 있지 않습니다.
<section>
<h2>소개</h2>
<p>이건 소개를 덧붙이는 내용입니다.</p>
</section><div>태그와 똑같이 <section>태그를 사용해 컨텐츠를 그룹화 하고 있지만 주제별 컨텐츠를 정의한다고 합니다. 이는 HTML 문서를 식별할 때 <section> 태그는 자체적인 의미를 지니고 있어 목적이 명확하여 무엇을 의미하는지 알려준다고 합니다.
<article>
<h2>뉴스 기사</h2>
<p>어떤 뉴스 기사의 내용</p>
</article>위의 두 태그와 같이 컨텐츠를 그룹화하고 있지만 <article>태그는 독립적이며 자립적인 구역을 정의하며 다른 컨텐츠에서 인용이 가능합니다. <section>태그와 비슷하게 HTML문서 식별 시 목적이 명확하여 무엇을 의미하는지 알려준다고 합니다.
도대체 이런 구분이 왜 필요한가... 싶기도 하면서 말 장난이 아닌가? 싶기도 하지만 더 깊게 파보았을 때에는 SEO, 즉 검색 엔진 최적화 부분에서 컨텐츠가 의미하는 목적을 명확하게 파악 할 수 있음에 따라 검색 결과에서 높은 순위를 가져올 수 있습니다.
또 이러한 구분을 정해놓아 HTML 코드만 보아도 각 컨텐츠의 묶음이 어떤 역할을 하는지도 쉽게 알 수 있기 때문에 무분별한 <div>태그의 사용이 아닌 여러 태그의 적절한 사용도 중요하다고 생각이 됩니다.
