developerWorks에 처음 로그인하면 developerWorks프로파일이 생성됩니다.귀하의 프로파일에서 동의하신 내용이 공개되지만 이 사항은 언제든지 변경 가능합니다. 귀하의 성명(숨김으로 체크되어 있어도 표시됩니다)과 디스플레이 이름은 게시한 컨텐츠나 사이트 엑세스시 표시됩니다.

모든 정보가 안전하게 전송되었습니다.

처음 developerWorks에 로그인할 때 프로파일이 작성되므로, 이를 위해 디스플레이 이름을 선택해야 합니다. 선택하신 디스플레이 이름은 developerWorks에 게시한 컨텐츠에 표시됩니다.

3글자 이상 31글자 이하의 길이로 사용 가능합니다. dW커뮤니티 내에서는 보안상 이메일주소를 제외한 다른 이름을 지정하셔야 합니다.

모든 정보가 안전하게 전송되었습니다.

My developerWorks：

나의 통지：

로그아웃

언어 선택：

새 HTML5 구조적 태그

컨텐츠 블록을 명확하게 정의

Jeremy Wischusen, 웹 어플리케이션 아키텍트, Binary Neuron L.L.C.

Jeremy Wischusen은 Purple Communications, myYearbook.com, HBO 등과 같은 클라이언트를 위해 13년 넘게 웹 사이트와 애플리케이션을 설계하고 Flash, Flex, jQuery, PHP, MySQL, MSSQL 및 PostgreSQL를 사용하는 프론트 및 백엔드 시스템을 빌드한 경험이 있다. 그는 Wyeth Pharmaceuticals, The Vanguard Group, Bucks County Community College 및 The University of the Arts와 같은 클라이언트를 대상으로 웹 설계, Flash 및 ActionScript를 가르쳤다.

요약： HTML5에는, 문서의 구조를 효과적으로 기술하는 데 초점을 맞춘 여러 가지 태그를 포함한 새로운 태그가 많이 도입되었습니다. 이 기사에서는 HTML5에 새로 도입된 구조적 태그를 배웁니다. 또한, 이러한 태그를 사용하여 문서를 컨텐츠 블록으로 나누는 방법을 탐구합니다. 이러한 개념을 설명하기 위해 예제 코드를 사용합니다.

여기에 태그 달기!

기사 게재일： 2011 년 11 월 09 일
난이도： 초급
원문： 보기
PDF： A4 and Letter (47KB | 12 pages)Get Adobe® Reader®
페이지뷰： 3237 회
의견：

HTML5란?

HTML5는 HTML(Hypertext Markup Language)의 최신 버전으로, 지금까지 가장 급진적으로 개정되어온 언어이다. HTML5에는 다양한 영역의 새로운 기능이 많이 도입되었다. 그 중 주목할만한 기능으로는 다음과 같은 것들이 있다.

오디오와 비디오용 내장 멀티미디어 태그
브라우저에서 컨텐츠를 그리는 데 필요한 canvas 태그
필수 속성을 사용하여 유효성을 검증하는 작업을 수행하는 데 필요한 스마터(Smarter) 양식

구조적 태그 세트가 새로 추가되면서 HTML5로 HTML 문서를 구조화하는 방식이 변화되었다. 새로 추가된 구조적 태그는 HTML 문서를 논리적 파트로 나누는 데 초점을 맞추고 있다. 태그의 이름은 태그에 포함될 컨텐츠의 유형을 나타낸다. 이 기사에서는 새로 추가된 이러한 태그를 자세하게 배우게 된다.

배경

Tim Berners-Lee는 인터넷에서 정보를 액세스하는 데 사용되던 기존의 방법이 안고 있던 일부 결점을 해결하기 위해 1989년에 원래의 HTML을 작성했다. HTML이 도입된 이후로 인터넷에서 원하는 정보를 찾는 일은 어려운 작업이 되었다. 인터넷에 있는 컨텐츠는 개별 문서로 처리되었으며 문서 간 탐색을 쉽게 할 수 있는 방법은 없었다. 사용자는 찾고 있는 문서의 주소를 확인하여 이 주소를 직접 입력해야 했다. 이러한 문제점을 처리하기 위해 Berners-Lee는 두 가지 기술, 즉 HTTP(Hypertext Transfer Protocol)와 HTML을 개발했다.

HTTP는 웹 서버에서 컨텐츠를 전달하는 데 사용되는 서비스 프로토콜이다. 브라우저에 완전한 URL을 표시한다고 가정하면, 웹 브라우저에서는 대부분 URL이 "http://"로 시작된다. URL에서 이 부분은 웹 서버에 요청을 할 때 사용할 프로토콜 유형을 브라우저에게 알려주는 역할을 한다. 서버가 문서에 대한 요청을 받으면 이 문서는 HTML로 작성되거나 HTML로 변환된다. 이 HTML 문서는 요청을 한 브라우저로 다시 전송된다.

HTML은 컨텐츠를 표현하는 방법을 웹 브라우저에게 전달하는 스크립팅 언어이다. 다른 문서를 가리키는 링크는 이 컨텐츠 안에 있으며 인터넷에 있는 문서 간을 탐색할 수 있는 사용자 친화적인 방법을 제공한다.

HTTP와 HTML을 조합하면 간단히 텍스트 링크를 클릭하여 문서 간을 탐색할 수 있게 되어 인터넷에서 컨텐츠를 빠르고 쉽게 탐색할 수 있다. 이러한 두 가지 기술을 개발한 후, Berners-Lee는 W3C(World Wide Web Consortium) 설립을 진행했다. W3C는 HTML의 첫 번째 네 가지 버전을 이끌어낸 원동력이었다.

원래 인터넷은 간단한 텍스트 문서를 제공하기 위한 것이었다. 초창기에는 브라우저가 모두 텍스트를 기반으로 했으며 화려한 창도 없었고 화면에는 단지 텍스트만 있었다. 처음에 도입되었을 때는 이미지를 추가하는 것 조차 매우 어려운 작업이었다. 현재, 사람들은 이메일 메시지를 전송하는 것부터 인터넷에서 TV를 시청하는 것에 이르기까지 모든 것을 할 수 있다. 인터넷은 간단한 텍스트 문서를 전송하는 메커니즘 그 이상이 되었다. 새로운 기능과 사용법이 개발되면서 HTML 언어로 결코 처리할 수 없는 새로운 문제점이 생겨났다.

W3C에서는 오늘날의 인터넷이 안고 있는 문제점을 XHTML(Extensible Hypertext Markup Language) 2.0 표준으로 처리하려고 시도했다. 그러나 이 표준은 제대로 받아들여지지 않았으며 대부분 폐기되었다. 2004년에는 W3C에서 XHTML 2.0 표준에 집중하는 동안, WHATWG(Web Hypertext Application Technology Working Group)라는 그룹에서 HTML5 표준에 대한 작업을 시작했으며, 이 표준은 XHTML 2.0 표준보다 더 긍정적으로 받아들여졌다. W3C에서는 XHTML 2.0 표준을 포기하고 이제는 WHATWG와 함께 HTML5 표준을 개발하는 작업을 진행하고 있다.

지원되는 브라우저

이 기사를 작성하는 시점에서는 HTML5가 공식적으로 릴리스되지 않았다. 아직 대부분의 웹 컨텐츠는 HTML4 스펙에 맞춰 작성되고 있다. 그러나 여러 가지 브라우저에서 HTML5 스펙을 지원하고 있다. 브라우저마다 지원하는 HTML5 기능이 다르기 때문에 상황은 복잡하다. HTML5 기반 웹 사이트를 작성하기 전에 각 대상 브라우저가 해당 사이트에서 사용할 기능을 지원하는지를 확인해야 한다.

위로

새 doctype

대상 브라우저의 기능과 관계없이 브라우저에게 컨텐츠를 HTML5 스펙을 사용하여 렌더링하도록 지시해야 한다. 이렇게 하려면 doctype을 선언해야 한다.

doctype을 선언하면 브라우저가 페이지가 작성된 마크업 언어 버전을 인식하게 된다. 브라우저는 DTD(Document Type Definition)를 참조하여 이러한 기능을 수행한다. DTD는 브라우저가 컨텐츠를 올바르게 렌더링할 수 있도록 마크업 언어에서 사용할 규칙을 지정한다.

doctype의 개념은 혼동이 될 수도 있다. 현재의 HTML 스펙에는 많은 doctype이 있지만 이들 간의 차이점이 완전히 분명한 것은 아니다. 표 1 에는 현재 사용 가능한 doctype과 기능이 표시되어 있다.

표 1. doctype과 기능

doctype	기능	예제
HTML 4.01 strict	HTML 요소와 속성이 모두 허용되지만, font 태그와 같은 표상적 태그는 허용되지 않는다. 프레임세트가 허용되지 않는다.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 transitional	HTML strict와 동일하지만 더 이상 사용하지 않은 요소(예: font 태그)를 사용할 수 있다. 프레임세트가 허용되지 않는다.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 frameset	HTML transitional과 동일하지만 프레임세트가 허용된다.	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 strict	HTML strict와 동일하지만 모든 컨텐츠가 잘 형식화된 XML로 작성되어야 한다. 예를 들면, 모든 열기 태그는 닫기 태그와 짝을 이루어야 한다. 프레임세트가 허용되지 않는다.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 transitional	HTML transitional과 동일하지만, 모든 컨텐츠가 잘 형식화된 XML로 작성되어야 한다. 프레임세트가 허용되지 않는다.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 frameset	XHTML transitional과 동일하지만 프레임세트가 허용된다.	<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1	XHTML strict와 동일하지만, East-Asian 언어에 대한 Ruby 지원과 같은 모듈 기능을 제공한다.	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

다행히도 HTML5에서는 doctype 선언이 매우 단순화되어 있다. 사실상, 한 행으로 되어 있다. 브라우저에서 HTML5 스펙을 사용하여 렌더링할 경우에는 리스트 1과 같이 doctype을 추가한다.

리스트 1. HTML5 doctype

                
<!DOCTYPE html>

doctype 선언은 HTML 문서의 첫 번째 행, <html> 태그 앞에 있어야 한다.

위로

새 구조적 요소

구조적 태그를 새로 작성하는 근본적인 이유는 웹 페이지에 있는 컨텐츠의 유형을 기술하는 태그를 사용하여 웹 페이지를 논리적 파트로 나누기 위함이다. 개념상, 웹 페이지를 문서로 생각할 수 있다. 문서에는 머리글, 바닥글 및 장(chapter)과, 문서를 논리적 파트로 나누는 기타 다양한 규칙이 있다.

이 섹션에서는 일반적인 샘플 코드를 사용하여, 현재 HTML 문서를 나누기 위해 사용되는 방법을 검토한다. 이 기사의 나머지 부분에서는 HTML5에 새로 추가된 구조적 태그를 사용하여 원래의 코드를 수정하는 과정을 통해, 문서가 논리적 섹션으로 변환되는 과정을 단계별로 살펴본다.

HTML 4 방식

가장 단순한 HTML 문서를 작성한 경험만 있어도 div 태그에는 익숙할 것이다. div 태그는 HTML5가 사용되기 전에 HTML 문서에서 컨텐츠 블록을 작성하는 데 사용되었던 주요한 메커니즘이다. 예를 들면, 리스트 2에는 div 태그를 사용하여 머리글, 컨텐츠 영역 및 바닥글이 있는 간단한 페이지를 작성하는 방법이 표시되어 있다.

리스트 2. div 태그를 사용하는 간단한 HTML 페이지

                
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>
      A Simple HTML Page Using Divs
    </title>
  </head>
  <body>
    <div id='header'>Header</div>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

이 페이지는 제대로 작동하며 div 태그는 일반적인 목적으로 사용하기에 좋은 태그이다. 그러나 각 div 태그의 id 속성을 확인하는 것뿐만 아니라 각 div 태그가 나타내는 문서의 섹션을 확인하기가 어렵다. 적절하게 이름을 지정하면 id가 표시기로 적합하다고 반박할 수도 있지만, id 속성은 임의적인 것이다. 똑같이 유효한 id로 간주될 수 있는 변종이 많이 있다. 이 태그 자체는 태그가 표현하게 될 컨텐츠 유형을 나타내지 않는다.

HTML5 방식

HTML5에서는 HTML 문서를 구성하는 컨텐츠의 주요 블록을 더 명확하게 정의하는 태그 세트를 제공하여 이러함 문제점을 처리한다. 웹 페이지에 표시되는 최종 컨텐츠와 관계없이 대부분의 웹 페이지는 공통 페이지 섹션과 요소의 다양한 조합으로 구성된다.

리스트 2에 있는 코드는 머리글, 컨텐츠 영역 및 바닥글이 있는 간단한 페이지를 작성한다. 이러한 것과 기타 section 및 page 요소는 매우 일반적인 요소이며 따라서 HTML5에는 문서를 공통 섹션으로 분리하고 각 섹션에 포함된 컨텐츠를 표시하는 태그가 포함되어 있다. 새 태그는 다음과 같다.

header
section
article
aside
footer
nav

이 기사의 나머지 부분에서는 각 태그의 개요를 살펴본다. 또한, 원래의 div 기반 예제(리스트 2)를 새 HTML5 구조적 태그를 사용하도록 수정하는 과정을 통해 이 태그를 의도된 대로 사용하는 방법을 배운다.

위로

header 태그

이름에서 알 수 있는 바와 같이 header 태그는 HTML 페이지의 섹션이 머리글이라는 것을 표시하기 위한 태그이다. 리스트 3 에는 header 태그를 사용하도록 수정된 리스트 2의 예제 코드가 표시되어 있다.

리스트 3. header 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
    <div id='content'>Content</div>
    <div id='footer'>Footer</div>
  </body>
</html>

또한, 브라우저가 HTML5를 사용하여 페이지를 렌더링해야 한다는 것을 나타내기 위해 리스트 3에 있는 doctype을 변경했다. 여기서부터는 모든 예제에서 올바른 doctype을 사용하고 있다고 가정한다.

위로

section 태그

section 태그는 해당 페이지에 있는 중요한 컨텐츠 부분을 식별하기 위한 태그이다. 이 태그는 책을 장으로 나누는 것과 다소 유사하다. section 태그를 코드 예제에 추가하면 리스트 4에 있는 코드가 된다.

리스트 4. section 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <p>
          This is an important section of the page.
        </p>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

위로

article 태그

article 태그는 웹 페이지 안에 있는 주요 컨텐츠 섹션을 식별하기 위해 사용된다. 각 개별 포스트가 중요한 컨텐츠 조각을 구성하는 블로그를 생각해 보자. 코드 예제에 article 태그를 추가하면 리스트 5에 있는 코드가 된다.

리스트 5. article 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

위로

aside 태그

aside 태그는 이 태그 안에 포함되어 있는 컨텐츠가 페이지의 일부가 아니라 페이지의 기본 컨텐츠와 관련이 있다는 것을 나타낸다. 이 태그는 소괄호를 사용하여 텍스트의 본문에 주석을 작성하는 것과 다소 비슷하다(이것처럼). 소괄호 안에 있는 컨텐츠는 컨텐츠를 둘러싸고 있는 요소에 관한 추가 정보를 제공한다. 코드 예제에 aside 태그를 추가하면 리스트 6에 있는 코드가 된다.

리스트 6. aside 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <div id='footer'>Footer</div>
  </body>
</html>

위로

footer 태그

footer 태그는 이 태그 안에 포함되어 있는 컨텐츠가 문서의 바닥글이라는 것을 나타낸다. 코드 예제에 footer 태그를 추가하면 리스트 7에 있는 코드가 된다.

리스트 7. footer 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header</header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

이제 원래의 모든 div 태그가 HTML5의 구조적 태그로 대체되었다.

위로

nav 태그

nav 태그 안에 있는 컨텐츠는 탐색용으로 사용된다. 코드 예제에 nav 태그를 추가하면 리스트 8에 있는 코드가 된다.

리스트 8. nav 태그 추가

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

위로

완성된 예제

리스트 9 에는 원래의 div 태그를 HTML5에 새로 추가된 구조적 태그로 대체한 결과가 표시되어 있다.

리스트 9. 완성된 예제

                
<!DOCTYPE html>
<html>
  <head>
    <title>
      A Simple HTML Page
    </title>
  </head>
  <body>
    <header>Header
      <nav>
        <a href='#'>Some Nav Link</a>
        <a href='#'>Some Other Nav Link</a>
        <a href='#'>A Third Nav Link</a>
      </nav>
    </header>
      <section>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
          <aside>
            <p>
              This is an aside for the first blog post.
            </p>
          </aside>
        </article>
        <article>
          <p>
            This is an important section of content on the page.
            Perhaps a blog post.
          </p>
        </article>
      </section>
    <footer>Footer</footer>
  </body>
</html>

데모용으로는 이 예제가 단순하지만, 리스트 2에 있는 원래의 div 기반 예제를 리스트 9에 있는 결과와 비교하면 새 구조적 태그를 사용하는 의도를 명확하게 알 수 있다.

위로

결론

새 HTML5 태그는 태그 안에 포함되는 컨텐츠의 유형을 기술하며 문서를 논리적 섹션으로 나누는 데 도움이 된다. 새 태그를 문서 내에서 언제 어디에 사용할 것인지는 저자가 책을 작성할 때와 마찬가지로 여전히 사용자가 결정해야 한다. 두 명의 저자가 동일한 책을 저술하면서 각각 다른 방식으로 책을 장으로 나눌 수도 있지만, 책을 장으로 나누는 행위는 여전히 책을 섹션으로 나누는 방식과 일치한다. 마찬가지로 주어진 웹 페이지를 작성하는 두 명의 개발자가 각각 다른 구조를 선택할 수도 있지만, 새 HTML5의 구조적 태그는 웹 페이지 개발자가 이전의 div 태그가 제공하지 않는 기능을 사용할 수 있는 새로운 규칙을 제공한다.

참고자료

교육

"New Elements in HTML5"(developerWorks, 2007년 8월): HTML5 구조를 자세히 배우자.
WHATWG: HTML5 스펙을 책임지고 있는 조직인 WHATWG 커뮤니티를 탐구하자.
W3C: 원래의 HTML 스펙을 개발했고 현재 WHATWG와 HTML5 스펙에 대한 작업을 수행하고 있는 커뮤니티인 W3C에 관해 자세히 알아 보자.
HTML5(Wikipedia): HTML5에 관해 자세히 배우자.
"HTML5 differences from HTML4"(W3C): 작업 중인 이 초안에서 HTML 4와 HTML5 간의 차이점을 자세히 이해하자.
"HTML5 First Look"(lynda.com): HTML5의 개념을 탐구하자.
developerWorks 웹 개발 영역: 다양한 웹 기반 솔루션을 다루고 있는 기사를 확인할 수 있다.

제품 및 기술

자신에게 가장 적합한 방법으로 IBM 제품을 평가해 보기: 시험판 제품을 다운로드하거나 온라인으로 제품을 사용해 보거나 클라우드 환경에서 제품을 사용하거나 SOA Sandbox에서 SOA(Service Oriented Architecture)를 효과적으로 구현하는 방법을 배울 수 있다.

토론