본문으로 바로가기

HTML5와 시맨틱 태그

category IT/프로그래밍 2016.07.08 15:06

HTML5와 시맨틱 태그

 

HTML5의 문서 구조

HTML5에서는 문서 구조를 정의할 수 있는 새로운 요소들이 도입되어 태그만 보고도 쉽게 페이지 구조를 이해할 수 있다. 사람들이 소스를 쉽게 이해할 수 있도록 태그를 의미가 통하게, 즉 시맨틱(semantic, 의미가 통하는) 태그로 바뀐 겁니다. HTML5에서 새로 추가된 시맨틱 태그에 대해 알아보자..

 

-시맨틱 태그가 사용된 HTML5의 문서 구조

인터넷상의 문서들을 살펴보면 서로 다른 듯 보이면서도 그 구조는 크게 다르지 않다. 사이트의 제목과 로고, 검색 창 등이 있는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(contents) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보과 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한 두 가지 영역이 추가되곤 한다. 따라서 HTML5의 표준을 만드는 WHATWG에서는 웹 문서의 레이아웃을 어느 정도 표준화할 수 있겠다고 생각하고, 아래 그림에서 보는 것처럼 레이아웃을 만들 때 사용하는 주요 태그를 미리 약속해 놓고 해당 태그만 보면 어느 부분이 헤더이고 어느 부분이 실제 내용인지 쉽게 알 수 있도록 했다.

다음 예제는 앞에서 HTML4로 만들었던 문서를  HTML5의 시맨틱 태그를 사용해서 바꿔본 것이다.

 

 

<!DOCTYPE html>   ->HTML5의 문서 유형 선언

<html lang = ko>

<head>

             <meta charset = utf-8>

             <title> 내가 처음 만드는 HTML 문서</title>

</head>

<body>

<header>  ->헤더 부분

<h1> 입양하기 </h1>

<nav>   -> 네비게이션 메뉴 부분

             ..

</nav>

</header>

<section> ->콘텐츠 내용 부분

             <article>

                           <h2>강아지 용품 준비하기</h2>

              ..

             </article>

</section>

<footer> -> 푸터 부분

             <p>Copyright 2012 funnycom</p>

</footer>

</body>

</html>

 

레이아웃을 위한 HTML5 시맨틱 태그들

HTML5의 시맨틱 태그를 사용하여 만든 문서나 HTML4 시절에 만든 문서나, 브라우저에서 열어보면 겉 모습은 똑같다. 그러나  HTML5를 이용하여 웹 표준 문서를 만들려면 시맨틱 태그를 사용해야 한다. 이제부터 배울 시맨틱 태그들은 모두 <body> 태그와 </body> 태그 사이에 들어간다.

-<header> 태그  - 머리말(제목) 지정하기

<header> 태그는 특정 부분의 머리말에 해당한다. 사이트 전체의 제복 부분이 될 수도 있고, <article>의 제목 부분이 될 수도 있다. 사이트 시작 부분에 사용하는 헤더라면 사이트 맨 위쪽이나 왼쪽에 주로 삽입하며, 헤더 안에 <form> 태그를 사용해서 검색 창을 넣거나 <nav> 태그를 사용해 사이트 메뉴를 넣는다.

è  <header>  내용  </header>

: <header>태그를 이용해 로고 이미지와 <nav> 태그를 감싸서 사이트 제목으로 사용한 예제이다.

 

 

또한 <header> 태그를 본문 중에 사용할 수도 있다. 다음 사이트는 본문 중 <section> 태그 부분의 제목을 표시하는 데 사용하고 있다.

 

 

-<nav> 태그 문서를 연결하는 내비게이션 링크

<nav> 태그는 같은 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크를 나타낸다.

è  <nav>  내용 </nav>

<nav> 태그는 웹사이트에서 내비게이션 부분인 메뉴 부분에 많이 사용된다. HTML이나 XHTML로 웹 문서를 만들 때는 별도의 <div> 태그를 이용해 ‘nav’‘menu’ 등 특별한 ID를 지정해 주어야 했지만, HTML5에서는 <nav> 태그가 있기 때문에 이 태그를 사용하면 어느 부분이 내비게이션인지 손쉽게 알 수 있다. <nav> 태그는 <header> <footer> 태그, 또는 <aside> 태그 안에 포함시킬 수도 있고, 독립해서 사용할 수도 있다. 즉 위치에 영향 받지 않는다.

다음 사이트는 <nav> 태그가 독립적으로 사용되어 다른 태그의 영향을 받지 않는다.

 

하지만 다음 사이트는 <nav> 태그가 <header> 태그 안에 포함되어 있다. 따라서 헤더 위치를 옮기면 헤더 안의 메인 메뉴 위치도 옮겨지게 된다.

 

-<hn> 태그 제목 표시하기

<hn> 태그는 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용하는 태그이다. 제목 태그는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6> 태그처럼 여섯 단계로 나누어져 있고, 숫자가 클수록 그 크기가 작아진다.

è  <hn>  텍스트  </hn>

<p> 태그를 사용한 후 글자 크기를 크게 하거나 진하게 하는 식으로 스타일을 적용해 제목 텍스트를 만들기도 하는데, 이것은 웹 표준에 맞지 않는다. 가장 큰 제목에는 <h1> 태그를 사용하고, 그것보다 작은 제목은 <h2>, <h3>태그와 같은 식으로 사용한다. <hn>태그는 문서 안에서 여러 번 사용할 수 있으며, 같은 <hn> 태그라도 스타일을 사용해서 서로 다른 형태로 표시할 수 있다.

 

-<iframe> 태그 -  외부 문서 삽입하기

 HTML5에서는 기존 HTML의 프레임 세트 구조를 허용하지 않지만, 웹 문서 안에 다른 웹 문서를 가져와 표시하는 인라인 프레임은 계속해서 지원한다. 인라인 프레임을 삽입한느 태그는 <iframe> 태그이다.

è  <iframe  src = “삽입할 문서 주소  [속성 = “속성 값” ] >  </iframe>

---<iframe> 태그 속성 값

* width : 인라인 프레임의 너비이다. 픽셀 값으로 표시한다.

* height : 인라인 프레임의 높이이다. 픽셀 값으로 표시한다.

* name : 인라인 프레임의 이름이다.

* seamless : 프레임의 테두리를 없애서 마치 본문의 일부처럼 보이게 한다. 이 속성은 크롬과 사파리에서만 지원합한다.

* src : 프레임에 표시할 문서의 주소를 지정한다.

 

-<section> 태그  - 콘텐츠 영역 나타내기

<section> 태그는 문서에서 콘텐츠 영역을 나타낸다.

è  <section>  내용  </section>

보통 <section> 태그와 <article> 태그가 혼동되기도 하는데, <section>태그는 <article> 태그가 혼동되기도 하는데, <section> 태그는 문맥의 흐름 중에서 주제별로 콘텐츠를 묶을 때 사용한다. 따라서 <header> 태그 안에는 섹션 제목을 나타내는 <h1>~<h6> 제목 태그가 함께 사용된다.  <section> 태그 안에는 또 다른 <section> 태그를 넣을 수도 있고, 실제 콘텐츠가 들어있는 <article> 태그를 넣을 수도 있다.  다음 사이트는 <section> 태그를 사용해 <header> <footer> 영역으로부터 공간을 구분하고, 또 다른 <section> 태그를 사용해 <section> 영역을  여럿으로 나누고 있다.  

 

 

-<article>태그  - 실제 콘텐츠 내용 넣기

article의 사전상 의미가 신문이나 잡지에서 기사를 뜻하는 것처럼, <article> 태그 역시 웹상의 실제 내용을 말한다. 보통 블로그의 포스트나 웹사이트의 내용, 사용자가 등록한 코멘트, 독립적인 웹 콘텐츠 항목이 모두 여기에 해당된다.

è   <article> 내용 </article>

다음 사이트는 모두 <section>태그 안에 <article>태그를 이용하여 실제 콘텐츠를 넣은 것이다. 실제로 전달하려고 하는 주된 내용은 <article>태그 안에 들어 있음을 알 수 있다.

 

 

-<aside>태그 본문 이외의 내용 표시하기

 

<aside> 태그는 본문 내용 외에 주변에 표시되는 기타 내용들을 나타낸다.

è  <aside> 내용 </aside>

흔히 블로그 등에서 왼쪽이나 오른쪽, 혹은 하단에 표시되는 광고나 링크 같은 사이드 바를 표시할 때 사용하는 태그이다. 사이드 바는 필수 요소가 아니기 때문에 필요한 경우에만 사용한다. 다음 사이트의 경우 상단에 <header> 태그로 사이트 로고와 메인 메뉴를 배치하고, 왼쪽에는 <section> 태그 안에 본문을 표시한 후, 오른쪽에 <aside> 태그로 사이드 바를 표시했다.

 

 

-<footer>태그 제작 정보와 저작권 정보 표시하기

HTML5에서는 간단하게 <footer>태그를 이용해 표시한다.

è  <footer> 내용 </footer>

예를 들어 <footer>태그 안에서 사이트 제작자의 연락처 정보를 표시할 수 있다.

또한 <footer>태그 안에는 <header>태그를 비롯하여 <section>, <article> 등 다른 레이아웃 태그들을 모두 사용할 수 있고, 이런 태그를 이용해 푸터 안에 다양한 정보를 포함할 수 있다.

-<address>태그 사이트 제작자 정보, 연락처 정보 나타내기

<address> 태그는 주로 <footer> 태그 안에 사용되는데, 웹 페이지 제작자의 이름이나 제작자의 웹 페이지, 또는 피드백을 위한 이메일 주소 같은 연락처 정보를 넣는 데 사용된다.

è  <address> 내용 </address>

실제 우편 주소를 넣기 위한 태그가 아니지만, 웹 사이트와 관련된 주소라면 <address> 태그 안에 표시한다. 하지만 단순히 우편주소를 표기하기 위한 용도라면 <address>태그가 아닌 <p> 태그를 이용해서 표시한다. 다음은 <address> 태그를 사용하여 웹 페이지에 연락처 정보를 넣은 예제이다.

 

 

 

-<div> 태그는 언제 사용할까?
HTML5
에서 <dir> 태그는 중요하게 사용된다. HTML5에서는 주로 콘텐츠를 묶어 시각적인 효과를 적용하려고 할 때, 즉 콘텐츠에 CSS를 적용할 때 <dir>태그를 사용한다.

 

 

 


댓글을 달아 주세요