HTML+CSS 기초 강의 - 9. 시맨틱 태그로 문서를 구조화하기
시맨틱 태그를 꼭 사용해야 하냐 마냐는 해묵은 문제이므로 여기서는 논외로 합니다.
사용하면 좋지만 사용하지 않아도 문제 없고,
CSS로 레이아웃을 정의할 때 정해진 영역 용도에 따라 정의해주면 되니 좋지만,
시맨틱 태그 아니어도 CSS로도 거의 동일한 문서 구조화를 해서 관리가 가능합니다.
굳이 표현하자면 니맛도 내맛도 아닌 뭐 그런 태그입니다.
<aside></aside> 태그로 섹션 정의하면 이 섹션이 무슨 용도인지 바로 알 수 있지만,
<div class="aside"></div>
이렇게 정의해서 사용해도 CSS 코딩을 하는 사람들은 무슨 용도인지 대부분 알고 있습니다.
결국은 문서작성자의 귀차니즘입니다.
처음에 사용하는 습관을 들였다면 모르겠지만, 이 강의를 만드는 필자같은 구세대? 웹퍼블리셔에게는 별로 손이 가지 않는 반찬같은 존재입니다.
꼭 사용할 것을 강력하게 추천합니다.
나는 옆으로 걸어가는 게따위지만 너희들은 제발 똑바로 걸어라. 뭐 그런 조금 비양심적인...
시멘틱 태그로 분류되는 태그들은 다음과 같습니다.
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
이중 주로 사용되는 것은 일곱개 정도입니다. 꼭 알아두어야 하는 시멘틱 태그들은 다음과 같습니다.
<header><main><nav><section><article><aside><footer>
일반적으로 이런식으로 HTML 레이아웃이 구성되고 시멘틱 태그들로 영역을 나누어 구분하게 됩니다.
시맨틱 태그를 사용하면 해당 영역이 어떤 용도인지 분명히 정의해주기 때문에 문서 위치를 찾거나 레이아웃을 잡는데 상당히 편리합니다.
예를들면 다음과 같이 시멘틱 태그로 문서를 정의했다면 누가봐도 이 문서가 어떻게 구성되는지 알 수 있는 장점이 있습니다.
<html><head><meta charset="utf-8"><title>시멘틱 HTML</title></head><body> <header></header> <nav></nav> <main> <section></section> <article></article> <aside></aside> </main> <footer></footer></body></html>
이렇게 구성된 시맨틱 페이지 구성은 CSS를 통해 아래와 같은 구조의 문서를 만들게 됩니다.
일반적으로 이렇다는 것이고 CSS를 통해 오른쪽 사이드바(Aside)를 네비게이션 메뉴(Nav) 밑으로 배치시키거나 왼쪽으로 이동시키는 등 자유롭게 배치를 할 수 있습니다.
시멘틱 태그를 필수적으로 써야하는 것은 아니지만, 문서의 구조를 일목 요연하게 파악할 수 있고, HTML 문서 소스를 보는데 있어 가독성을 높여주는 장점이 크기 때문에 HTML 문서를 제작할 경우 사용할 것을 추천합니다.