HTML5 시멘틱 태그에 대해서 알아봅시다
2015. 7. 22. 20:18시멘틱태그는 HTML4에서 버전업되면서 새롭게 선보인 태그인데요 그래서 이전의 버전에서는 제대로 동작하지 않습니다.
물론 HTML5를 지원하는 플러그인을 따로 로드를 해서 사용할수 있는 스크립트가 나와있으니 호환성에 대해서는 걱정안하셔도 됩니다.
다만, 스크립트가 로드가 안될경우에는 제대로 레이아웃 표기가 안되니 여러가지 상황을 대비해서 작업을 하셔야겠습니다.
이런 시멘틱태그는 검색엔진이 문서의 구조를 보다 쉽게 알 수있게 표시를 하는 역활을 하며 웹페이지에서 데이터 추출을 할경우 보다 효율적으로 작업을 할 수 있습니다.
간단하게 시멘틱태그에 대해서 살펴보겠습니다.
nav 페이지내의 메뉴에 주로 쓰이고 있습니다.
aside 사이쪽 공간분할에 쓰입니다.
section 보통 본문의 단락을 나눌때 쓰입니다.
article 글내용이 들어가는 부분에 쓰입니다.
footer 문서하단 푸터를 의미합니다.
이것만으로도 문서 구조가 어떻게 구성되어 있는지 바로 파악이 됩니다. 그래서 HTML5로 만들어진 웹페이지들은 검색엔진에 보다 더 노출이 잘되는 편입니다.
아래 예제를 살펴봐 주세요.
<div> 헤더내용 </div>
<div> 내비게이션 </div>
<div> 내용 </div>
<div> 푸터 </div>
</body>
시멘틱태그가 적용이안된 일반 페이지를 간단하게 구성하면 위와같이 구성이 됩니다. DIV태그로 레이아웃을 잡고 CSS로 마무리를 하는데, 사실 시멘틱태그나 일반 DIV태그나 별차이는 없습니다만, 시멘틱태그로 선언해줌에 따라서 각종 검색엔진 노출도에 차이가 생기며, 페이지 유지보수에도 구조를 한눈에 파악할 수 있기에 훨씬 효율적이라고 생각이 듭니다.
<header> 헤더내용 </header>
<nav> 내비게이션 </nav>
<article> 내용 </article>
<footer> 푸터 </footer>
</body>
위와 아래의 차이점이 느껴지시나요? 알아보기 쉬운 한글이 아니라 영어래도 무엇인지 구조가 바로 파악이 됩니다.
위키의 시멘틱태그에 대한 내용입니다. 아래링크를 참고해주세요.
처음으로 퍼블리싱과 HTML에 관해 공부하고 있으신분들은 꼭 시멘틱태그를 활용해서 기본레이아웃을 잡는 연습을 하시기 바랍니다. 제가 멋모르고 어차피 같은건데 별차이가 있겠어 하는 생각에 엄청 고생하였구요. 처음부터 버릇을 제대로 들여야한다는걸 깨달았어요ㅠ
'생활정보' 카테고리의 다른 글
| 옆 동료에게 익스플로러의 개발자도구를 알려주었습니다 (0) | 2015.07.26 |
|---|---|
| 퍼블리싱을 위한 브라우저에 대한 이해 및 다운로드 방법 (1) | 2015.07.25 |
| 블로그를 처음 시작하다 (0) | 2015.07.20 |
| 블로그스킨 적용했습니다. 마크쿼리 스파이더웹 4.0 (1) | 2015.07.19 |
| 블로그 개설 했어요 (0) | 2015.07.18 |
