티스토리 뷰

IT 이야기/프로그래밍

[HTML5 강의] 3. HTML5 기본 태그, 시멘틱(semantic) 태그

하늘과 나b 2013. 11. 21. 14:46

자, HTML5 강의 세번째 시간입니다.


HTML4에서는 문서의 구조를 만들 때 div 태그를 id, class와 함께 사용했습니다. 완성된 문서를 보면 <div>태그가 여러번 사용한 것을 볼 수 있었지요. 그래서 구조가 복잡할 수록 <div>태그가 여러번 겹쳐 있었기 때문에 알아보기가 힘들었을 뿐더러 수정하기도 어려웠습니다.


HTML5에 와서 문서의 구조를 만드는 새로운 개념과 요소들이 추가되었습니다. 그래서 기존에 <div>태그로 소스코드를 작성했던 것보다 구조적인 문서를 만드는 것이 가능해졌습니다. 구조를 만들기 위한 새로운 태그들을 시맨틱 태그라고 하는데요. 오늘은 HTML5에서 새롭게 등장한 시맨틱(semantic)태그에 대해서 알아보도록 하겠습니다.




시맨틱(semantic) 태그란 무엇인가요?


영어에서 semantic이라는 뜻은 '의미의', 라는 뜻입니다. 이 영어의 뜻을 적용하면 시맨틱 태그는 의미의 태그(?)라는 뜻으로 볼 수 있겠네요. 


HTML5이전의 태그는 <a>, <hr> 등의 태그들이 있었는데요. 저 태그를 배우지 않은 분들이 저 태그를 보면 저게 뭐하는 태그인지 모르겠죠? 그래서 태그를 보고도 한 눈에 저 태그가 무엇을 하는 태그인지 알아볼 수 있도록 이름을 알맞게 지은 태그를 시맨틱 태그라고 합니다.


HTML5에서 등장하는 시맨틱 태그는 아래와 같습니다.

<header>, <hgroup>, <nav>, <article>, <section>, <aside>, <footer> 등





HTML5의 시맨트 태그 하나씩 알아보기



<header> 태그

이 <header>태그는 HTML문서에서 단 한번 사용할 수 있었던 <head>태그와 달리 한 HTML 문서 안에서 여러번 사용할 수 있습니다. <head>태그는 <html>태그 다음에 입력을 했지만 <header>태그는 본문, 즉 <body> 태그 안에서 사용할 수 있습니다.



<hgroup>태그

<hgroup>태그는 제목과 그와 관련된 부제목을 묶어주는 역할을 합니다. 

<header>와의 차이점

<header>태그는 페이지를 구성하기 위한 구분단위이고, 즉 내용에 따른 페이지 구성분류단위이고, <hgroup>은 페이지 전체 구조에 대한 개념으로 쉽게 눈에 들어오게 하는 역할을 담당.



<nav>태그

<nav>태그는 네비게이션 표현을 위한 태그입니다. <nav>는 본문 위치에 영향을 받지 않는다는 특징이 있습니다. <header><footer><aside>중 어느 위치도 상관없습니다. 즉, <body>태그 안에는 어디든 사용할 수가 있는 것이죠.



<article>태그

<article>태그는 웹페이지 상에서의 실제 내용을 의미합니다. <article>태그를 사용한 웹컨텐츠는 다른 곳에 배포하거나 재사용할 수 있습니다. 검색엔진의 검색로봇에서는 <article>태그가 사용된 컨텐츠를 배포할 수 있는 컨텐츠로 인식합니다.



<section>태그

<section>태그는 웹컨텐츠들을 그룹으로 묶어주는 역할을 합니다. 앞에서 배운 <article>태그와는 달리 <section>태그로 묶은 컨텐츠는 재배포 할 수 없습니다. 단, <section>태그로 내용을 묶은 후 그 안에서 <article>태그를 사용할 수는 있습니다. <section>태그로 내용을 묶은 후 그 안에서 또 다른 <section>태그를 사용할 수 있습니다.



<aside>태그

웹컨텐츠 제작시 주 내용이 아닌 왼쪽이나 오른쪽에 부수적인 내용이 들어가는 부분을 <aside>태그로 표현합니다. 



<footer>태그

<footer>태그는 웹사이트의 저작권 정보나 저작권표기와 같은 내용이 들어가는 부분입니다. 




<< 이전 강의로 이동하기

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

[C언어] malloc(), free() 함수를 이용한 메모리 동적 할당 예제  (4) 2013.12.05
[C언어 소스] 주소 관리 프로그램 소스  (28) 2013.11.26
[HTML5 강의] 5. HTML5 기본태그, 목록 만들기  (0) 2013.11.22
[HTML5 강의] 4. HTML5의 기본 태그, 텍스트 관련 태그  (0) 2013.11.22
[HTML5 강의] 1. HTML5 시작하기  (2) 2013.11.22
[HTML5 강의] 2.1 HTML5의 기본  (0) 2013.11.21
[HTML5 강의] 2. HTML5 실행해보자. 웹 브라우저 설치하기  (0) 2013.11.21
[한방에 이해하는 C언어] 입력을 받자 scanf 함수  (0) 2013.11.11
[Javascript] 즐겨찾기 소스  (5) 2013.11.09
[알고리즘] 정렬 - 버블정렬(Bubble Sort) 쉽게 정리하기  (25) 2013.11.08
공유하기 링크
댓글