HTML5는 웹 컨텐츠를 구성하기 위해 제작된 언어이다. 이는 표준화되고 창의적인 UI 마크업 언어를 작성하여 웹 설계 및 개발이 더 간편해지는 것을 목표로 한다. HTML5는 페이지를 나누고 구분하는 수단을 제공하며, 이를 통해 사이트를 논리적으로 구성하도록 설계되었을 뿐만 아니라 사이트 신디케이션 기능을 제공하도록 작성된 별개의 컴포넌트를 작성하도록 허용한다. HTML5는 사용하고 이해하기에 더 간편해지도록 정보 맵핑의 본질을 통합하여, 정보를 나누고 레이블 처리하기 때문에 "웹 사이트 설계에 대한 정보 맵핑 접근방식"이라고 할 수 있다. 이는 HTML5의 극적인 시맨틱과 미적인 유틸리티의 근간이 된다. HTML5는 모든 레벨의 설계자와 개발자들에게 간단한 모든 텍스트 컨텐츠에서부터 서식있는 대화 형식의 멀티미디어에 이르는 전부를 공개적으로 게시하는 기능을 제공한다.

HTML5는 효율적인 데이터 관리, 그리기, 비디오 및 오디오 도구를 제공한다. 이로 인해 웹 뿐만 아니라 휴대용 디바이스에 대해 교차 브라우저 애플리케이션의 개발이 가능하게 된다. HTML5는 상대적으로 더 높은 유연성을 허용하여, 흥미로운 대화식 웹 사이트의 개발을 허가하면서 모바일 클라우드 컴퓨팅 서비스 분야에서 발전을 추진하는 기술 중 하나이다. 이는 세련된 구조, 양식 제어, API, 멀티미디어, 데이터베이스 지원 및 상대적으로 엄청나게 빠른 처리 속도 등의 개선사항 및 새로운 태그도 도입한다.

HTML5에서 새 태그는 연상시키는 성향이 대단히 높아 해당 역할과 사용을 캡슐화한다. HTML의 과거 버전은 약간 특징이 없는 태그를 사용했다. 하지만, HTML5는 대단히 설명적이고 직관적인 레이블을 보유한다. 이는 즉시 컨텐츠를 식별하는 서식있는 컨텐츠 레이블을 제공한다. 예를 들어, 혹사된 <div> 태그는 <section> 및 <article> 태그로 보충되었다. 또한 <video>, <audio>, <canvas> 및 <figure> 태그가 추가되어 특정 컨텐츠 유형의 더 간결한 설명이 제공된다.

HTML5는 다음을 제공한다.

• 포함하도록 설계된 것을 정확히 설명하는 태그
• 향상된 네트워크 통신
• 엄청나게 개선된 일반 스토리지
• 백그라운드 프로세스를 실행하기 위한 웹 워커(Web Worker)
• 상주하는 애플리케이션과 서버 사이의 지속적인 연결을 설정하는 웹소켓(WebSocket) 인터페이스
• 저장된 데이터의 더 우수한 검색
• 개선된 페이지 저장 및 로드 속도
• GUI를 관리하기 위한 CSS3에 대한 지원, 이는 HTML5가 컨텐츠 지향적일 수 있음을 의미한다.
• 개선된 브라우저 양식 처리
• 클라이언트측 로컬 스토리지를 허용하는 SQL 기반 데이터베이스 API
• 써드파티 플러그인을 설치하지 않고 그래픽과 비디오를 추가하기 위한 Canvas 및 비디오
• 모바일 클라우드 서비스 및 애플리케이션을 통합하기 위해 스마트폰 로케이션 기능을 사용하는 위치정보(Geolocation) API 스펙
• 모바일 디바이스와 클라우드 서버 사이에 더 효율적인 통신을 허용하는 JavaScript 코드를 다운로드할 필요성이 줄어드는 향상된 양식

HTML5는 더 참여적인 사용자 경험을 만든다. 즉, HTML5를 사용하여 제작된 페이지는 데스크탑 애플리케이션과 유사한 경험을 제공할 수 있다. HTML5는 또한 브라우저의 편재성으로 API의 기능을 결합하여 향상된 여러 플랫폼 개발을 제공한다. HTML5를 사용하여 개발자들은 플랫폼을 원활하게 교차하는 현대식 애플리케이션 경험을 제공할 수 있다.

독자가 HTML5를 논할 때, 지속적인 혁신의 약어를 사용하고 있는 것이다. 새 태그, 새 방법론 및 HTML5와 그 두 가지 대응물인 CSS3 및 JavaScript의 상호 작용에 의존하는 일반 개발 프레임워크. 이는 클라이언트 중심 애플리케이션 처리 현상의 핵심이다. HTML5 기술의 기술 및 메소드의 많은 데스크탑 배치 외에도 HTML5는 기능이 풍부한 웹 휴대전화 브라우저에서 구현될 수 있다 — Apple iPhone, Google Android 및 Palm webOS를 실행하는 전화기의 인기와 넘쳐나는 현상으로 확인되는 것처럼 성장하는 시장이다.

HTML5의 성능은 중요한 측면은 정보 맵핑이다 — 또는 원하는 경우 컨텐츠 차단 — 이는 훨씬 더 이해하기 쉬운 프로세스를 제작한다. 독자는 늘어나는 웹 처리 영역의 우세 현상으로 설계 및 개발을 위해 이 도구가 얼마나 효율적이 되는지 확인할 수 있다.

HTML5는 텍스트 레벨에서 더 효율적인 시맨틱 프로세스의 출현과 양식의 구조 및 사용에 대해 더 높은 제어의 출현을 알린다. 이러한 모든 특성과 HTML5 혁신의 많은 다른 세부적인 지점은 이러한 패러다임의 성장하는 우세 현상의 기초가 된다. 많은 에이전시 단체, 상업용 및 그렇지 않은 경우—이러한 많은 조직들조차도 주된 에이전시 활동으로 정보 처리 및 통신에 대부분 원격으로 관여한다— 이들은 이렇게 성장하는 현상의 개발에 각각 다른 수준으로 사로잡혀있다.

HTML5는 마법의 램프가 아니고 램프의 요정도 없다. 하지만, 해당하는 기술 및 방법론적 자산을 통해 램프를 문지르는 것 다음으로 좋은 일이 되었다.

페이지 계획

간단한 웹 페이지를 작성할 것이다. 이 프로세스 도중에 필자는 HTML5에 소개된 몇 가지 새 태그를 논의한다. 효과적이고 동시에 효율적인 웹 페이지를 작성하려면 독자는 제작하려는 모든 컴포넌트를 고려하는 계획을 개발해야 한다.

독자가 작성하는 페이지는 그림 1과 같이 상위 레벨 설계를 보유할 것이다. 해당 페이지 설계는 Header 영역, Navigation 영역 및 세 가지 섹션과 Aside 영역이 포함된 Article 영역과 마지막으로 Footer 영역이 들어있다. 이 페이지는 Google Chrome 브라우저에서 작업하도록 설계되어, 브라우저 호환성 문제 개정을 수반할 뿐만 아니라 기본 구조의 이해를 제한할 수 있는 일부 시각적 잡동사니를 제거한다. 해당 목표는 새 HTML5 태그의 사용을 분명히 기술하는 페이지를 작성하여 올바르게 구성된 코드와 세련된 페이지 설계를 작성하는 데 이를 사용할 수 있는 방법을 보여주는 것이다.

이 페이지를 작성하는 프로세스에서 필자는 CSS3을 다루며, 이는 HTML5 페이지를 올바르게 렌더링하는 데 필요하다. CSS3은 HTML5 페이지의 스타일링, 탐색 및 일반적인 필(feel)에 필수적이다. W3Schools CSS3 참조 사이트(참고자료 참조)에서 찾을 수 있는 해당 특성 그룹은 배경, 글꼴, 마퀴(marquee) 및 애니메이션과 같은 유용한 일부 요소를 포함한다.

하지만, 페이지 구조를 시작하기 전에 몇 가지의 새 HTML5 태그에 대해 배워야 한다.

위로

Header 영역

예제 Header 영역은 페이지 제목과 소제목을 포함한다. <header> 태그를 사용하여 페이지의 Header 영역에 대한 컨텐츠를 작성한다. <header> 태그는 웹 페이지 자체 외에도 <section> 및 <article>에 대한 열기 정보를 포함할 수 있다. 여기에서 작성한 웹 페이지는 해당 페이지의 Header 영역을 보유하며, 이는 상위 레벨 설계에서 표시될 뿐만 아니라 Article 및 Section 영역 내에서 Header 영역이 나와 있다. 목록 1은 <header> 태그 마크업 예제를 제공한다.

	
<header>
    <h1>Heading Text</h1>
    <p> Text or images can be included here</p>
    <p> Logos are frequently placed here too</p>
</header>

<header> 태그는 <hgroup> 태그를 포함할 수도 있으며, 이는 목록 2에 나와 있다. <hgroup> 태그는 주 표제 및 하위 표제로 여기에 표시되는 <h1>에서 <h6> 표제 레벨까지 사용하여 표제를 함께 그룹화한다.

	
<header>
    <hgroup>
          <h1>Main Heading</h1>
          <h2>Sub-heading </h2>
    </hgroup>
    <p> Text or images can be included here</p>
</header>

Navigation 영역

<nav> 태그를 사용하여 페이지의 Navigation 영역을 작성한다. <nav> 요소는 탐색을 위해 특수하게 설계된 영역을 정의한다. <nav> 태그는 페이지의 다른 영역에 들어있는 링크를 보유하지 않고 기본 사이트 탐색에 대해 사용되어야 한다. Navigation 영역은 목록 3과 같이 코드를 포함할 수 있다.

	
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Products</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

위로

Article 및 Section 영역

설계 중인 페이지는 하나의 Article 섹션을 포함하고, 페이지의 실제 컨텐츠를 보유한다. <article> 태그를 사용하여 이 영역을 작성하고, 태그는 페이지에 있는 다른 컨텐츠의 독립적으로 사용될 수 있는 컨텐츠를 정의한다. 예를 들어, RSS 피드를 작성하려는 경우 컨텐츠를 고유하게 식별하기 위해 <article>을 사용할 수 있다. <article> 태그는 또 다른 컨텍스트에서 제거되고 위치 지정될 수 있는 컨텐츠를 식별하고 완전히 이해할 수 있다.

Acme United 계획의 Article 영역은 세 가지 Section 영역을 포함한다. <section> 태그를 사용하여 이러한 영역을 작성한다. <section>은 웹 컨텐츠의 관련된 컴포넌트 영역이 들어있다. <section> 태그—및 <article> 태그 뿐만 아니라 포함—는 헤더, 푸터 또는 해당 섹션을 완료하는 데 필요한 다른 컴포넌트가 들어있다. <section> 태그는 컨텐츠를 그룹화하는 용도이다. <section> 태그와 <article> 태그 둘 다에 대한 컨텐츠는 대개 <header>로 시작하고, 이들 사이에 태그에 대한 컨텐츠를 통해 <footer>로 종료한다.

<section> 태그가 <article> 태그를 포함할 수 있는 것처럼 <article> 태그는 <section> 태그를 포함할 수 있다. <section> 태그는 유사한 정보를 그룹화하는 데 사용되어야 하고, <article> 태그는 컨텐츠의 의미에 영향을 주지 않고 새 컨텍스트에서 제거되고 위치 지정될 수 있는 기사 또는 블로그와 같이 정보에 대해 사용되어야 한다. 이름이 암시하는 대로 <article> 태그는 정보의 완료 패킷을 제공한다. 이와는 대조적으로, <section> 태그는 관련된 정보가 들어있지만, 정보는 그 의미가 손실될 것이기 때문에 그 자체로 다른 컨텍스트에서 위치 지정될 수 없다.

<article> 및 <section> 태그 사용의 예제는 목록 4를 참조하자.

	
<article>
     <section>
          Content
     </section>
     <section>
          Content
     </section>
</article>
<section>
     <article>
          Content
     </article>
     <article>
          Content
     </article>
</section>

이미지 요소

<section>과 <article> 태그 둘 다 뿐만 아니라 <header> 및 <footer> 태그도 <figure> 태그를 포함할 수 있다. 이 태그를 사용하여 이미지, 다이어그램 및 사진을 포함한다.

<figure> 태그는 <figcaption>을 포함할 수 있으며, 이는 결과적으로 <figure> 태그에 들어있는 그림에 대한 캡션을 포함하여, 컨텐츠에 더 가깝게 그림을 묶을 수 있는 설명을 입력할 수 있다. 목록 5는 <figure> 및 <figcaption> 태그 구조의 예제를 제공한다.

	
<figure>
     <img src="/figure.jpg" width="304" height="228" alt="Picture">
     <figcaption>Caption for the figure</figcaption>
</figure>

미디어 요소

<section> 및 <article> 태그도 다양한 미디어 요소를 포함할 수 있다. HTML5는 컨텐츠의 이해를 빠르게 전달하는 태그를 제공한다. 이전에 임베드되기만 했던 음악과 비디오와 같은 미디어 요소는 이제 더 정밀하게 식별할 수 있다.

<audio> 태그는 음악 또는 기타 오디오 스트림과 같은 소리 컨텐츠를 식별한다. <audio> 태그는 언제, 어떻게, 어떠한 방식으로 오디오를 재생할 지를 제어하는 속성을 보유한다. 해당 속성은 src, preload, control, loop 및 autoplay이다. 목록 6의 예제와 같이, 오디오는 페이지가 로드되면 바로 재생을 시작하고 끊임없이 재생하고 제어를 제공할 것이므로 사용자는 오디오를 중지하거나 다시 시작할 수 있다.

	
<audio src="MyFirstMusic.ogg" controls autoplay loop>
     Your browser does not support the audio tag.
</audio>

<video> 태그를 통해 비디오 클립 또는 시각적 미디어 스트리밍을 브로드캐스트할 수 있다. 이는 <audio> 태그의 모든 속성에 추가로 세 가지 더 poster, width 및 height의 속성을 가진다. 비디오가 로딩 중이거나 부적절한 경우 비디오가 아예 로드되지 않을 때 poster 속성을 통해 사용되는 이미지를 식별할 수 있다.

목록 7은 <video> 태그 구조의 예제를 제공한다.

	
<video src="MyFirstMovie.ogg" controls="controls">
     Your browser does not support the video tag
</video>

<video> 및 <audio> 태그는 <Source> 태그를 포함할 수 있으며, 이는 <video> 및 <audio> 태그에 대해 멀티미디어 자원을 정의한다. 이 요소를 사용하여 브라우저가 미디어 유형 또는 코덱 지원을 기반으로 선택할 수 있는 대체 비디오 및 오디오 파일을 정의한다. 목록 8에 두 가지 선택이 나와 있다. 파일의 WMA 버전이 사용되는 브라우저에서 재생할 수 없다면 MP3를 시도해보자. 그렇지 않으면 메시지를 표시하여, 사용자가 오디오를 사용할 수 없는 이유를 인식한다.

	
<audio>
     <source src="/music/good_enough.wma" type="audio/x-ms-wma">
     <source src="/music/good_enough.mp3" type="audio/mpeg">
     <p>Your browser does not support the HTML 'audio' element.</p>
</audio>

<embed> 태그는 페이지로 가져올 수 있는 임베드된 컨텐츠를 정의한다 —예로는 Adobe Flash SWF 파일에 대한 플러그인이 있다. 목록 9는 type 속성을 포함하여 Flash 파일로 임베드된 소스를 식별한다.

	
<embed src="MyFirstVideo.swf" type="application/x-shockwave-flash" />

src 및 type 속성 외에도, <embed> 태그는 height 및 width 속성을 보유한다.

위로

Aside 영역

<aside> 태그를 사용하여 Acme United 계획에서 Aside 영역을 작성한다. 이 태그는 보충하는 기사의 흐름의 일부가 아닌 보충적인 컨텐츠를 보유하는 것으로 생각하자. 잡지들에서 aside는 기사 자체에서 작성된 지점을 강조하는 데 자주 사용된다. <aside> 태그는 이 기사, 섹션 또는 이를 포함하는 페이지로 전달되는 정보에 영향을 주지 않고 제거될 수 있는 컨텐츠가 들어있다.

목록 10은 <aside> 태그 사용의 예제를 제공한다.

	
<p>My family and I visited Euro Disney last year.</p>
<aside>
     <h4>Disney in France</h4>
     <p>Besides Euro Disney, there is a Disneyland in California.</p>
</aside>

위로

Footer 영역

<footer> 요소는 기사의 작성자 또는 날짜 등 페이지, 기사 또는 섹션에 대한 정보가 들어있다. 페이지 푸터로서 이는 목록 11과 같이 저작권 또는 기타 중요한 법적 정보를 포함할 수 있다.

	
<footer>
     <p>Copyright 2011 Acme United. All rights reserved.</p>
</footer>

위로

페이지 구성하기

이제 HTML5 페이지를 작성하는 데 필요한 기본 태그를 알았으니 페이지 구성을 시작하자. Acme United에 대한 웹 페이지를 구성할 것이다. 완료된 페이지는 그림 2에 나와 있으며 사용하도록 다운로드할 수 있다(다운로드 참조).

자, 페이지를 설정해보자. 먼저, <!doctype>이 있다. HTML5에서 <!doctype>이 간소화되었다. 유일하게 기억할 사항은 html이다. 이는 이 태그에 대한 입력을 간소화할 뿐만 아니라 향후에도 더욱 경쟁력을 갖추도록 만들어 준다. 이는 html5가 아니라 그냥 html이라고 한다. 어느 HTML 버전이 출시되고 사라지든지 간에 <!doctype>은 항상 html이 될 수 있다.

<html> 태그는 모든 기타 HTML 요소를 포함하여, <!doctype> 태그를 제외시킨다. 요소는 하나 걸러서 <html>과 </html> 태그 사이에 중첩되어야 한다. 목록 12를 참조한다.

	
<!doctype html>
<html lang="en">

html 및 영어를 표시한 후에 <head> 요소를 보유하며, 이는 스크립트, 브라우저 지원 정보, 스타일 시트 링크, 메타 정보 및 기타 초기화 함수를 포함할 수 있다. 이러한 테그를 head 섹션에서 사용할 수 있다.

• <base>
• <link>
• <meta>
• <script>
• <style>
• <title>

<title> 태그는 문서의 실제 제목에 대한 홀더이고, 필수 <head> 섹션 요소이다. 이는 페이지를 볼 때 브라우저의 맨 위에서 확인하는 제목이다. 목록 13의 <link> 태그는 HTML5 페이지를 렌더링하는 데 사용될 CSS3 스타일 시트를 식별한다. 호출되는 스타일 시트는 main-stylesheet.css이다.

	
<head>
     <title>HTML5 Fundamentals Example</title>
     <link rel="stylesheet" href="main-stylesheet.css"  />
</head>

<body> 태그를 다음으로 사용하고, <header> 및 <hgroup> 태그가 이어지며, 이는 이전에 설명했다. 이 예제에서 <h1> 영역에 가상의 회사인 Acme United의 이름이 들어있으며, <h2> 영역은 "A Simple HTML5 Example"라는 소제목으로 된 정보 알림이 들어있다. 목록 14는 마크업을 보여준다.

	
<body >
     <header>
          <hgroup>
               <h1>Acme United</h1>
               <h2>A Simple HTML5 Example</h2>
          </hgroup>
     </header>

지금까지 페이지를 설정하는 데 사용된 CSS3은 목록 15에 나와 있다. 먼저 페이지의 글꼴을 설정한 다음에 본문에 대한 특정 글꼴을 설정한다. 본문의 치수가 정의되면, 첫 번째 그리고 두 번째 레벨 표제 태그에 대한 헤더 단락 구조를 설계한다. 이는 페이지에 대해 사용할 헤더이다.

	
* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 800px;
	margin: 0em auto;
}

header h1 {
	font-size: 50px;
	margin: 0px;
	color: #006;
}

header h2 {
	font-size: 15px;
	margin: 0px;
	color: #99f;
	font-style: italic;
}

목록 16은 <nav> 태그를 보여주며, 이는 기본 사이트 탐색을 처리하도록 설계되었다.

	
<nav>
     <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
     </ul>
</nav>

HTML5는 또한 <menu> 태그도 보유한다 —이는 일부 설계자와 개발자에게 혼란을 일으키는 태그이다. 이러한 혼란은 탐색이 보통 "탐색 메뉴"로 참조된다는 사실에서부터 발생한다. HTML 버전 4.01에서 더 이상 사용되지 않고 HTML5에서 다시 나온 <menu> 태그는 대화식 작업을 향상시키도록 설계되었다. 이는 기본 탐색에 사용되어서는 안된다. 기본 탐색에 사용되어야 하는 유일한 태그는 <nav> 태그이다. 이 예제의 나중에 <menu> 태그를 사용할 것이다.

탐색의 형식화는 CSS3이 처리한다. 목록 17에 나와 있는 각 <nav> 태그 정의는 <nav> 태그 내에서 <ul> 및 <li> 요소의 특정 상태를 대표한다.

	
nav ul {
	list-style: none;
	padding: 0px;
	display: block;
	clear: right;
	background-color: #99f;
	padding-left: 4px;
	height: 24px;
}
nav ul li {
	display: inline;
	padding: 0px 20px 5px 10px;
	height: 24px;
	border-right: 1px solid #ccc;
}

nav ul li a {
	color: #006;
	text-decoration: none;
	font-size: 13px;
	font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

그 다음은 Article 영역이다. 이 영역은 <article> 태그로 정의되어 자체적인 <header> 정보를 포함한다. <article>에 포함된 <section>도 자체의 <header> 태그가 들어있다. 목록 18을 확인한다.

	
<article>
     <header>
          <h1>
               <a href="#" title="Link to this post" rel="bookmark">Article Heading</a>
          </h1>
     </header>
     <p> Primum non nocere ad vitam Paramus . . . </p>
     <section>
          <header>
               <h1>This is the first section heading</h1>
          </header>
          <p>Scientia potentia est qua nocent docentp . . .</p>
     </section>

목록 19는 이 형식을 렌더링하는 CSS3 마크업을 보여준다. paragraph, header 및 section 영역에 대한 정의는 포함되는 <article> 태그에 대해 모두 정의되었음을 주목하자. 여기에서 정의된 <h1> 태그는 페이지 레벨 <h1> 태그에 대해 정의된 <h1> 태그와 동일한 형식을 보유하지 않는다.

	
article > header h1 {
	font-size: 40px;
	float: left;
	margin-left: 14px;
}

article > header h1 a {
	color: #000090;
	text-decoration: none;
}

article > section header h1 {
	font-size: 20px;
	margin-left: 25px;
}

article p {
	clear: both;
	margin-top: 0px;
	margin-left: 50px;
}

<article>에서 두 번째 <section> 태그는 첫 번째 <section>과 동일한 기본 정보가 들어있지만, 이번에는 <aside>, <figure>, <menu> 및 <mark> 태그를 사용할 것이다. 목록 20을 참조한다.

여기에서 <aside> 태그는 에워싸는 플로우의 일부가 아닌 정보를 표현하는 데 사용된다. <figure> 태그는 Stonehenge의 그래픽을 포함한다. 이러한 <section>도 <menu> 태그를 포함하며, 이는 네 가지 뮤즈의 이름으로 단추를 작성하는 데 사용한다. 하나의 단추를 클릭하면, 특정 뮤즈에 대한 정보를 제공한다. <mark> 태그는 <p> 태그 내에서 veni, vidi, vici라는 단어를 강조표시하기 위해 사용된다.

	
<section>
     <header>
          <h1>Second section with mark, aside, menu & figure</h1>
     </header>
     <p class="next-to-aside"> . . .  <mark>veni, vidi, vici</mark>. Mater . . .</p>
     <aside>
          <p>This is an aside that has multiple lines. . . .</p>
     </aside>
     <menu label="File">
          <button type="button" onClick="JavaScript:alert('Clio . . .')">Clio</button>
          <button type="button" onClick="JavaScript:alert('Thalia . . .')">Thalia</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Urania . . .')">Urania</button>
          <button type="button" onClick="JavaScript:alert
		                           ('Calliope . . .')">Calliope</button>
     </menu> 
     <figure><img src="stonehenge.jpg" alt="Stonehenge" width="200" height="131"/>
          <figcaption>Figure 1. Stonehenge</figcaption>
     </figure>
</section>

이 섹션에 대한 CSS3은 페이지에 대해 설정한 너비보다 더 짧은 너비가 있는 <p> 태그에 대한 새 정의를 포함했다. 이 변경을 통해 aside가 텍스트를 겹치지 않고 오른쪽으로 부동(float)하도록 허용한다. 목록 21은 마크업을 보여준다.

	
article p.next-to-aside {
	width: 500px;
}

article >  section figure {
	margin-left: 180px;
	margin-bottom: 30px;
}

article > section > menu {  
	margin-left: 120px;
}	  

aside p {  
        position:relative;
        left:0px;
        top: -100px;
		z-index: 1;
        width: 200px;  
    	float: right;
	    font-style: italic; 
       	color: #99f;
}  

비디오 섹션 요소

이제 <article>의 최종 컴포넌트인 video 섹션이다. 예제 비디오는 페이지가 로드되고 끊임없이 루프하며 일시정지와 재생을 위해 제어를 제공할 때 자동 재생하는 오그(ogg)이다. 많은 현대식 인스턴스에서 ogg 비디오는 목록 22와 같이 ogv 확장자(v는 비디오)를 사용한다. <audio> 태그는 동일한 방식으로 작업한다.

	
     <section>
          <header>
               <h1>This is a video section</h1>
          </header>
          <p><video src="http://people.xiph.org/~maikmerten/demos/BigBuckBunny.ogv" 
                                controls autoplay loop>
                <div class="no-html5-video"><p>This video will work in 
                                Mozilla Firefox or Google Chrome only. </p>
                </div>
          </video></p>
     </section>
</article>

목록 23은 video 섹션에 CSS3 정의를 제공한다.

	
article > section video {
	height: 200px;
	margin-left: 180px;
}
	
article > section div.no-html5-video{
	height: 20px;
	text-align: center;
	color: #000090;
	font-size: 13px;
	font-style: italic;
	font-weight: bold ;
	background-color: #99f;
}	  

페이지의 푸터와 클로징은 목록 24에 나와 있다.

	
          <footer>
              <p>Copyright: 2011 Acme United. All rights reserved.</p>
          </footer>
     </body>
</html>   

푸터용 CSS3은 목록 25에 나와 있다.

	
footer p {
	text-align: center;
	font-size: 12px;
	color: #888;
	margin-top: 24px;
}

위로

결론

웹 페이지의 완성은 이러한 여러 파트로 이루어진 시리즈의 첫 파트를 마무리한다. 이 기사의 목표는 새 HTML5 체제를 소개하는 것이다. HTML5는 HTML4의 단순한 업그레이드 이상이다. 즉, 이는 디지털로 통신하는 새로운 방법이다. CSS3 및 JavaScript의 기능을 통해 HTML5는 개발자에게 하나의 모조 패키지로 거의 모든 상황을 제공한다. 일반적인 사용을 위해 나와 있는 HTML5의 방대한 정보의 양에서부터 독자가 필요한 것을 완전히 흡수하려고 한다면, 독자는 유능한 HTML5 멀티미디어 웹 설계자와 개발자의 성장하는 무리에 가입할 것이다. 이 시리즈의 다음 기사에서는 HTML5 양식을 코드하고 형식화하는 방법에 대해 살펴볼 것이다.

위로

다운로드 하십시오

다운로드 방식에 대한 정보

참고자료

교육

• Create modern Web sites using HTML5 and CSS3(developerWorks, 2010년 3월)은 여러 부분으로 된 HTML5 및 CSS3 기사이다.
  
  
• New elements in HTML 5(developerWorks, 2007년 8월)에서 HTML5의 몇 가지 새 요소에 대한 정보를 찾을 수 있다.
  
  
• <html>5doctor 웹 사이트는 오늘날 HTML5의 현재 경향에 대한 훌륭한 관점을 제시한다.
  
  
• W3Schools.com HTML5 Tag Reference는 HTML5 태그, 정의 및 예제의 광범위한 목록을 제공한다.
  
  
• WHATWG 웹 사이트는 HTML5 스펙에 자세한 정보를 제공한다.
  
  
• W3Schools.com CSS3 Reference는 CSS 버전 3에 대한 폭넓은 정보를 제공한다.
  
  
• 웹 개발 영역에서는 다양한 웹 기반 솔루션을 다루는 기사를 전문적으로 게시한다.
  
  
• developerWorks의 기술 행사 및 웹 캐스트에서 최신 정보를 얻을 수 있다.
  
  
• developerWorks on-demand demos: 입문자를 위한 제품 설치 및 설정 과정에서 숙련된 개발자를 위한 고급 기능의 활용에 이르기까지 다양한 데모를 제공한다.
  
  
• Twitter의 developerWorks 페이지를 팔로우하자.
  
  

토론

• 지금 developerWorks 프로파일을 작성하고 HTML에 대한 관심목록을 설정해 보자. developerWorks 커뮤니티에서 최신 정보를 확인하자.
  
  
• 웹 개발에 관심이 있는 다른 developerWorks 구성원을 찾아보자.
  
  
• 지식 공유: 웹 주제를 중점적으로 다루는 developerWorks 그룹 중 하나에 참여하자.
  
  
• Roland Barcia는 자신의 블로그에서 Web 2.0 및 미들웨어에 대해 설명했다.
  
  

필자소개

아티클 순위

의견

위로

목차

• 페이지 계획
• Header 영역
• Navigation 영역
• Article 및 Section 영역
• Aside 영역
• Footer 영역
• 페이지 구성하기
• 결론
• 다운로드 하십시오
• 참고자료
• 필자소개
• 의견