HTML 5의 새로운 요소

저자：Eve Cole 업데이트 시간：2009-05-31 00:37:41

내 생각에는 HTML 5는 급진적이지는 않지만 지속적인 기술 발전을 촉진할 수 있는 절충안입니다. 네임스페이스가 없고 요소를 닫을 필요가 없으며(물론 이점은 아니지만) 브라우저는 일부 오류를 관대하게 처리할 수 있습니다. 모든 것은 지난 세기 HTML 4의 관행을 따릅니다. HTML 렌더링의 경우 브라우저는 1999 수준에 머물러 있습니다. 이를 위해 HTML 5는 수년 동안 전 세계 곳곳에 흩어져 있는 HTML을 계속해서 처리할 수 있을 뿐만 아니라 브라우저 제조업체가 새로운 기능을 더 쉽게 추가할 수 있게 해주는 실용적인 솔루션입니다. 이를 우아하게 저하라고 합니다. HTML 5에 추가된 새로운 요소 중 일부를 살펴보겠습니다.

구조적 요소

이것은 정말 기쁨입니다. 현재는 헤더, 바닥글, 사이드바 등과 같은 속성 ID 값을 설정하여 헤더, 하단 또는 사이드바를 각각 표현하려고 하는 "범용" div를 통해서만 구조를 정의할 수 있습니다. 이를 통해 코드 작성자는 더 이상 ID 명명에 대해 걱정할 필요가 없으며 이는 휴대폰, 리더 및 기타 장치에 더 많은 의미상 이점을 제공합니다. HTML 5에는 가장 일반적으로 사용되는 구조를 표현하기 위해 새로운 구조 요소가 추가되었습니다.

섹션: 책의 일부나 장을 표현할 수도 있고, 장 내의 섹션을 표현할 수도 있습니다.

헤더: 페이지 본문의 헤더입니다. 머리 요소가 아님

바닥글: 이메일 서명의 위치가 될 수 있는 페이지 하단(바닥글)

nav: 다른 페이지에 대한 링크 모음

기사(article): 블로그, 잡지, 개요서 등의 독립적인 기록입니다.

예를 들어, HTML 5로 작성된 블로그 홈페이지는 다음과 같습니다(일부 생략 포함).

인용된 내용은 다음과 같습니다.

<<!DOCTYPE HTML>
<HTML>
<머리>
<title>현실감</title>
</head>
<본문>
<헤더>
<h1>리얼라지</h1>
</header>
<섹션>
<기사>
<h2><a href="http://realazy.org/blog">제목</a></h2>
<p>내용은 여기에 있습니다...(n단어 생략)</p>
</article>
<기사>
<h2><a href="http://realazy.org/blog">제목 2</a></h2>
<p>내용 2는 여기...(n단어 생략)</p>
</article>
...
</섹션>
<바닥글>
<탐색>
<ul>
<li><a href="http://realazy/blog">탐색 1</a></li>
<li><a href="http://realazy/blog">탐색 2</a></li>
...
</ul>
</nav>
<p>© 2007 리얼레이지</p>
</footer>
</body>
</HTML>블록 수준 블록 의미 요소
HTML은 또한 다음 세 가지 블록 수준 요소를 추가합니다.

곁에
그림/코드>
대화
Aside는 보충 콘텐츠로 메모, 팁, 사이드바, 요약, 삽입된 인용문 등을 표현하는 데 사용할 수 있습니다. 예를 들어 블로그의 사이드바를 다음과 같이 표현합니다.

<곁으로>
<h3>최신 기사</h3>
<ul>
<li><a href="http://realazy.org/blog/">기사 제목</a></li>
...
</ul>
</aside>Figure 요소는 설명이 포함된 블록 수준 이미지를 나타냅니다. 예를 들어:

<그림>
<legend>사진에 대한 설명입니다</legend>
<img alt="이미지 대체 텍스트" src="/path/to/img.png" />
</Figure>dialog 요소는 사람들 간의 대화를 표현하는 데 사용됩니다. HTML 5에서는 화자를 나타내는 데 dt가 사용되고 화자의 내용을 나타내는 데 dd가 사용됩니다. 좋다:

<대화>
<dt>부처님</dt>
<dd>색은 공허함</dd>
<dt>오공</dt>
<dd>이제 비어 있는 인라인 의미 요소가 필요합니다.

m 요소는 강조가 필요하지 않은 일부 텍스트를 표시하는 데 사용됩니다. 아직 논란이 있어 결국 표기로 변경될 수도 있습니다.

시간 요소는 이름에서 알 수 있듯이 시간을 표현하는 데 사용됩니다. 다음과 같이 시스템이 인식할 수 있는 시간을 나타내려면 날짜/시간 기능이 필요합니다.

<time datetime="2008-08-08T20:08:08">2008년 8월 8일 오후 8:08:08</tiem> 미터 요소는 특정 범위 내의 값을 표현합니다. 급여, 백분율, 분수 등에 사용할 수 있습니다. 예를 들어:

아쉽게도 <meter>150cm</meter>만 가지고 있습니다. 또한 다음과 같이 다양한 의미를 표현할 수 있는 6가지 기능도 있습니다.

이름에서 알 수 있듯이 진행 상황을 표현하는 데 사용되는 진행 상황도 있습니다.

목표 완료: <progress value="40" max="100">40%</progress> 멀티미디어 삽입

비디오 및 오디오 요소가 추가되었습니다. 이름에서 알 수 있듯이 각각 비디오와 사운드를 삽입하는 데 사용됩니다. 형식의 경우 구현은 브라우저에 맡겨져 있으며 HTML에서는 특정 형식을 재생하기 위해 더 이상 특별한 코드가 필요하지 않습니다. img와 마찬가지로 png, jpg, gif 등 어떤 형식으로든 표시할 수 있습니다. 특히 콘텐츠가 포함될 수 있습니다. 예를 들어 특정 노래에 가사를 넣을 수 있습니다.

인용된 내용은 다음과 같습니다.
<audio src="당신과 자는 사람.mp3">
<p>눈물이 말랐다</p>
<p>나 자신이 잘못한 것을 어떻게 참을 수 있습니까</p>
<p>슬픔과 기쁨의 순간이 있었습니다</p>
...
</audio>

상호작용

HTML 5는 웹 애플리케이션 1.0이라고도 불리며 대화형 기능을 더욱 발전시킵니다. 이러한 태그는 페이지의 대화형 환경을 개선하도록 설계되었습니다.

인용된 내용은 다음과 같습니다.
세부
데이터그리드
메뉴
명령

세부

특정 콘텐츠를 나타내는 데 사용되지만 기본적으로 콘텐츠가 표시되지 않을 수 있습니다. 이는 클릭 등의 방법을 통해 범례와 상호작용한 후에 표시됩니다. 이는 자바스크립트를 통해 콘텐츠 일부를 숨기고 클릭하면 표시하는 현재 방식과 다소 유사하다. 예를 들어:

삶의 모든 순간을 한 문장으로 기록하세요.

인용된 내용은 다음과 같습니다.
<상세>
<legend>더보기</legend>
<p>소통 및 공유, 친구와 더 가까워지고 MSN/GTalk/QQ, SMS, 모바일 WAP 지원</p>
</details>세부정보를 표시할지 여부를 결정하는 open 속성을 가질 수 있습니다.

데이터그리드는 데이터를 제어하는 데 사용되며 사용자나 스크립트에 의해 업데이트될 수 있습니다.

메뉴는 HTML 2에도 존재했지만 HTML 4에서는 더 이상 사용되지 않습니다. HTML 5 낭비가 사용되며 해당 기간 동안 명령 요소가 추가됩니다.

참조: HTML 5의 새로운 요소