HTML5 시멘틱 구조 태그

시멘틱 태그 무슨말이야?

semantic (시멘틱)  '의미론적인' 

웹페이지(티스토리 같은 페이지 등 모든 인터넷 페이지)는 글자로 입력합니다.

이 웹페이지를 볼때 간단한 구조(layout)로 구분되어야 보기 쉽겠죠.

"여기는 메뉴가 있고 저기는 본문이 있고.."

누가봐도 구분을 할 수 있는 웹페이지의 구조_ 다음daum.net

 

사람은 눈으로 웹페이지를 보기 쉽지만 기계인 컴퓨터는 눈이 없기에, 이 구조(layout : 레이아웃)를 <태그>로 기능을 분별합니다. 그리고 그 <태그>는 각각의 기능이 있죠. <제목태그> <메뉴태그> <옆쪽 태그> 등등으로 컴퓨터가 알아듣기 쉽게 문자로 나타냅니다.

 

태그 및 속성	태그 기능(설명)
<header>	헤더 영역 (메뉴, 로고 등)
<section>	주제별로 나뉘는 영역 (여러 중심 내용을 감싸는 공간)
<footer>	저작권 등 제일 하단에 들어가는 부분
<article>	콘텐츠 내용 (글자가 제일 많이 들어감)
<nav>	내비게이션 기능 (문서 링크 탐색)

위의 태그 외에도 가장 상위의 박스인 .container, 문서의 주요내용의 테두리인 <main>태그, 세부사항을 알려주는 태그 <summary>, 여기에 추가로 세부사항을 더 알려주는 태그 <details>가 있습니다. 꼭 이렇게 구조화된 태그들만 일반적으로 항상 사용하는 것은 아니라서 상위개념과 하위개념의 이해정도만 하면 될것 같네요.

 

HTML5 시멘틱 태그의 가장 중요한 점은..

이렇게 레이아웃 설계 코드를 사용하는 목적이자 가장 중요한 점은 바로 "간단함(Simple)" 입니다.

엥..? 간단함때문에 이 귀찮은 태그를 쓰라고..?

 

라고 생각이 들기도 하네요.. 그런데 그럴만도 한게, HTML5 이전에는 이렇게 간단한 코드를 쓰지 않았습니다. 예를 들자면, <header> 라는 헤더부분의 영역 태그 대신 <div id="...">를 써서 코드를 복잡하고 지저분하게 만들었죠.

<div> 태그가 현재도 안쓰이는 것은 아니고, 계속 써도 상관은 없지만.. 사실 귀찮고 번거롭고 100자보단 50자 글자가 보기 편하지 않겠어요?

See the Pen Untitled by SSOHERB (@ssoherb) on CodePen.

 

See the Pen Untitled by SSOHERB (@ssoherb) on CodePen.