시멘틱 태그 article과 section

이전 레이아웃 시멘틱 태그에서 다루어야 했지만 한가지 빠진 시멘틱 태그가 있습니다.

바로 article 태그 입니다. article을 다루지 않고 따로 이렇게 하나의 강좌로 뺀 이유는 중요해서가 아니고, section 태그와 잘 구분이 안돼기 때문입니다.

 

지금까지의 강좌를 쭉 봐오신 분들이라면 이상하게 겹치는 태그들이 존재한다는 것을 느끼셨을 겁니다.

b태그와 strong 태그, em 태그와 i 태그, section과 div등..

혹시나 왜지? 라고 생각해 보셨을까요? 눈으로 보기엔 차이가 없는데...

사실 지금까지 알려드린 html 태그는 html 5를 기준으로 설명 드렸습니다. 지금은 대부분 html 5를 사용하기 때문입니다. 5라는 숫자에 의문이 생기지 않나요? 네 맞습니다. 4도 3도 있었습니다. html도 발전해 왔다는 것이죠

제 생각으로는 새로 공부하시는 분들께서는 쓰지 않는 기술을 알게 되는 것은 혼돈만 가지고 온다고 생각합니다.

위와 같은 태그들도 그런 이유때문이라 생각 합니다.

 

html이 5로 업그레이드 되면서 가장 중심이 됬던 내용은 시멘틱 태그의 등장 이었습니다. 물론 새로운 태그의 등장은 반길만한 것이 었지만 시멘틱 태그는 이미 html 4나 xhtml 등을 사용하던 개발자들에게는 굳이 이럴 필요까지 있나? 라고 생각 하게 만들기도 했습니다. 이미 쓰던 방식이 있었으니까요..

시멘틱(Semantic)이라는 말 자체가 "의미"이니 이제 부터는 그 발전 과정에 맞게 의미 있는 태그를 사용하는 것을 권장하는 것이죠. 지금까지 의미없이 표현만 한다고 알려드렸던 태그들은 거의 이전 html 방식부터 쓰이던 겁니다. b, i, u, s 등 대부분 그래서 의미있는 새로운 태그를 사용하길 권장한다고 말씀 드렸던 것입니다.

 

서론이 길어 졌습니다. article과 section는 기능상 div 태그와 다른 점이 없습니다. 모두 영역을 분할하는 것입니다. 다른 것이라면 그 의미가 부여됐다는 것입니다. 그렇다면 artcle과 section도 자체의 의미가 존재한다는 말인 거죠

 

article	"글, 기사"  문서나 페이지의 연관 없이 독립적인 내용에 사용
section	"부문,부분,구획" 문서나 페이지의 관련된 요소를 구분시에 사용

---

---

예로 위와 같이 소설 책을 소개하는 웹문서가 있습니다.

이문열 삼국지와 박경리 토지는 소설책을 소개한다는 점에서 관련성이 있으나 구분돼야 되는 내용이므로 section으로 구분할 수 있습니다. 하지만 하단에 검색포털로 연결되는 배너의 영역을 넣었다면 ③번 영역은 소설책 소개와는 관련없는 독립적인 내용이라 볼수 있습니다. 이 경우에는 articel 태그를 사용하는 것이 좋은 방법입니다.

 

하지만 웹페이지를 만들다 보면 지금처럼 명확하게 구분하기 어려운 경우가 많이 있습니다. 관련이 있는듯 없는듯 모호한 경우가 생각 보다 많이 생깁니다.

박경리 토지 section 아래로 윤동주의 시집을 소갰했다라고 가정하겠습니다.

일단 책을 소개했다라는 관점에서는 setction이 맞을 것입니다. 하지만 소설이 아니라 시집이라는 관점에서는 독립적입니다. section이 맞을까요? article 이 맞을까요?

그걸 구분한는건 온전히 만드는 사람의 몫이 됩니다.

 

이것으로 html 기본강좌를 마치겠습니다. 

html 기본 강좌가 도움이 되셨다면 좋겠습니다. 저로서는 처음 시도한 강좌 였구요 생각보다는 시간이 오래 걸린것 같습니다. 다른 html 태그들고 많이 있지만 기본 태그들은 대략 알려드린것 같아 나름 뿌듯하네요. 이후 부터는 css에 대해 진행하려 합니다.

그리고 html form 태그는 현재로서는 진행하지 않을 것 같습니다. 나중에 혹시나 jquery 강좌가 진행이 된다면 그 때 따로 form 태그만 중점적으로 강좌 진행 하도록 하겠습니다. jquery 강좌가 진행 된다면 말이지요 ^^

 

나름 오랜기간 홈페이지를 제작해온 사람으로써 실무적인 입장에서 설명드리려 했습니다만 부족했거나 제가 잘못 알고 알드린 것이 있다면 댓글 남겨주세요. 다시 한번 이 강좌를 봐주신 분들께 감사드립니다.