HTML : HTML5는 무엇인가?

SW/HTML

HTML : HTML5는 무엇인가?

얇은생각 2020. 7. 14. 07:30

HTML5는 HTML의 다음 버전입니다. HTML을 더욱 쉽게 만들 새로운 기능들을 소개할 것입니다. 웹 사이트 레이아웃을 코더와 검색 엔진 모두에 보다 명확하게 해주는 기능을 도입하는 것입니다.

header, footer, nav, article 태그 때문에 검색 엔진에 도움이 될 수 있습니다. 웹 사이트의 주요 영역을 정의하는 새로 도입된 태그입니다.

검색 엔진에 사이트를 탐색하기 위해 Navigation이 링크를 보유할 수 있는 경우, 검색 엔진은 이 섹션의 모든 링크를 사용할 수 있습니다.

Content가 페이지에서 가장 중요한 부분이기 때문에 article 태그가 가장 중요한 태그일 수 있습니다. 검색 엔진에서 이 영역이 모든 콘텐츠의 location임을 알 수 있습니다.

HTML5에 포함된 새로운 태그 외에도 그래픽 도면을 만들고, 데이터를 오프라인으로 저장하며, 드래그 앤 드롭할 수 있는 API가 제공됩니다.

HTML5를 시작

HTML5를 사용하는 것은 매우 쉬우며 가장 좋아하는 새로운 HTML5 기능을 사용하는 것입니다.

과도기 XHTML에 대한 문서 유형이 무엇인지 기억하시나요? 새 페이지를 시작할 때마다 찾아봐야 하는 것이 분명하지는 않습니다.

HTML5를 사용하면 문서를 HTML5로 쉽게 정의할 수 있습니다.

<!doctype html>

페이지 HTML5를 만들기 위해 할 수 있는 것은 이것뿐입니다. 페이지에 아무 영향도 주지 않고 지금 바로 만들 수도 있습니다.

심지어 오래 된 IE6도 무엇인지 이해할 것입니다. 지금까지 사이트에서 변경한 것은 이것뿐입니다. HTML5로 모든 변경 작업을 하고 있지만, 지금은 문서 유형을 변경했고 HTML5를 공식적으로 사용하고 있습니다.

왜 사용하는가

HTML5는 개발자/설계자가 HTML을 더 쉽게 사용할 수 있도록 여러 가지 고급 기능이 함께 제공됩니다. 이제 HTML이 인기를 끌게 된 이유 중 하나가 바로 HTML이라는 것을 알게 되었습니다.

그러나 HTML5는 코드를 그룹화하고, 콘텐츠를 그룹화하고, 더 깨끗한 마크업을 만들고, Javascript를 작성해야 하는 고급 기능을 제공합니다. HTML5를 사용하면 캔버스에 그림을 그리거나, 비디오를 재생하거나, 더 나은 양식을 설계하거나, 오프라인에서 작동하는 웹 응용프로그램을 만들 수 있습니다.

지금 HTML5를 사용하는 주된 이유는 HTML5가 사라지지 않고 사용되기 떄문입니다. 2009년 HTML5에 대해 W3C가 말한 내용은 아래와 같습니다.

XHTML 2 워킹 그룹 헌장이 2009년 말에 예정대로 만료되면 헌장은 갱신되지 않을 것이라고 발표하였습니다. 그렇게 함으로써, 그리고 HTML 작업 그룹의 자원을 증가시킴으로써, W3C는 HTML5의 발전을 가속화하고 HTML의 미래에 대한 W3C의 입장을 명확히 할 수 있습니다.

HTML5를 지원하는 브라우저

오늘날 모든 브라우저는 특정 HTML5 태그를 지원하지만 IE6도 속기 <!doctype html>을 이해하고 페이지를 올바르게 렌더링합니다.

그러나 header, section, article과 같은 다른 새 태그를 이해하지 못하는 이전 브라우저의 경우 이러한 태그를 올바르게 렌더링하지 못하고 인라인 요소로 렌더링합니다.

이렇게 하면 스타일링에 문제가 발생할 수 있으므로 이전 브라우저에서 렌더링 방법을 이해할 수 있도록 차단할 요소의 스타일링을 변경해야 합니다.

header, section, article, aside, nav, footer {
  display: block;
}

IE에서 HTML5가 작동

그러나 Internet Explorer 8 이하에서는 이러한 태그가 무엇인지 모르기 때문에 위의 솔루션이 작동하지 않으므로 무시될 수 있으므로 코드에서 요소를 사용하기 전에 Javascript를 사용하여 요소를 만들어야 합니다.

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav'); 
  document.createElement('footer');
</script>

새로운 HTML5 Tags

HTML5는 페이지의 레이아웃과 구조를 정의하는 데 도움이 되는 새 태그를 릴리스했습니다. 이것은 이전 HTML 태그를 사용하는 일반적인 페이지입니다.

<html>
<head></head>
<body>
<div id="header">

</div>
<div id="nav">

</div>
<div id="content">
     <div id="article">

     </div>
     <div id="sidebar">

     </div>
</div>
<div id="footer">

</div>
</body>
</html>

이 HTML만 봐도 서로 다른 섹션들을 볼 수 있고, 단지 그것을 읽는 것만으로도 ID 태그 덕분에 각 div가 어떤 용도로 사용될 것인지 명확하게 이해할 수 있습니다. 하지만 검색 엔진은 이런 것들이 무엇을 위한 것인지 어떻게 알 수 있을까요? HTML5는 HTML5의 자체입니다. 아래는 HTML5의 구조와 동일합니다.

<!doctype html>

<header>

</header>

<nav></nav><section><article></article><aside></aside></section>  

<footer>

</footer>

이제 이러한 섹션이 무엇이고 어떤 콘텐츠를 담을 것인지 정확하게 알 수 있지만, 이러한 섹션이 정의된 태그이므로 검색 엔진은 섹션이 무엇인지 알게 됩니다. 또 다른 차이점은 문서 유형입니다. HTML5에는 문서 시작 시 항상 정의되는 1개의 문서 유형만 있습니다.

<!doctype html>

이것은 단순히 브라우저에게 HTML 문서라는 것을 알려줍니다.

Semantic Tags

HTML5의 주요 변경 사항은 더 많은 의미 태그를 만들어 이러한 태그에 어떤 종류의 콘텐츠를 넣을 것인지 설명하는 것입니다.

Header

<header>

</header>

header 요소는 소개 또는 탐색 보조 도구 그룹을 나타냅니다. 헤더 요소는 일반적으로 섹션의 제목(h1–h6 요소 또는 hgroup 요소)을 포함하기 위한 것이지만, 반드시 필요한 것은 아닙니다.

페이지 및/또는 섹션의 header가 포함되므로 header는 페이지의 여러 위치에 나타날 수 있습니다. 또한 페이지 및/또는 섹션에 대한 로고, 검색 양식 또는 목차에 이상적인 장소일 수 있습니다.

Nav

<nav>

</nav>

nav 요소는 다른 페이지 또는 페이지 내의 부분으로 연결되는 페이지의 섹션(탐색 링크가 있는 섹션)을 나타냅니다. 페이지의 링크 그룹이 모두 탐색 요소에 있을 필요는 없으며, 주요 탐색 블록으로 구성된 섹션만 nav 요소에 적합합니다.

따라서 nav 태그를 이동하기에 이상적인 위치는 header 또는 footer입니다. 머리글에는 일반적으로 사이트를 탐색하는 데 도움이 되는 링크가 포함되며 바닥글에는 일반적으로 웹 사이트에 대한 중요한 링크가 포함됩니다.

Section

<section>

</section>

주제별로 그룹화할 수 있거나 관련이 있는 내용을 포함하는 새로운 구조 요소 중 가장 일반적인 요소입니다. section은 구조 태그 중 가장 일반적인 것으로, section은 내용의 주제 그룹으로 정의됩니다.

section은 일반적으로 자신의 header와 내용을 만족하며, 페이지에 별도로 사용할 수 있습니다. section의 예로는 탭으로 된 페이지 또는 번호가 매겨진 섹션이 있습니다.

일반적인 웹 설계에서는 웹 사이트의 내용을 서로 다른 섹션, 소개, 기능, 뉴스, 연락처 등으로 구분할 수 있습니다.

Aside

<aside>

</aside>

aside 엘리먼트는 사이드 요소 주위의 내용과 접선적으로 관련된 내용으로 구성되며, 해당 내용과는 별개로 간주될 수 있는 페이지의 섹션을 나타냅니다.

이러한 섹션은 타이포그래피에서 표현되는 경우가 많습니다. 일반적으로 기본 컨텐츠와 관련되지만 독립적으로 이동할 수 있는 컨텐츠에 사용되며, 인용문 또는 사이드바에 이상적으로 사용됩니다.

페이지에 연결되어 있지만 독립적으로 사용할 수도 있습니다.

Article

<article>

</article>

article 요소는 문서, 페이지, 응용프로그램 또는 사이트의 자체 포함 콘텐츠로 구성됩니다. article의 내용은 독립적으로 배포하거나 다른 곳에서 재사용할 수 있습니다.

페이지 내용, 포럼 게시물 또는 블로그 게시물에 이상적으로 사용됩니다. 페이지에서 분리하여 값을 유지할 수 있습니다. 그런 다음 페이지의 이 영역을 결합할 수 있습니다.

Footer

<footer>

</footer>

footer은 일반적으로 페이지 끝에 나타나지만 header과 마찬가지로 섹션의 끝을 정의하는 데 사용되는 페이지당 여러 개의 바닥글을 가질 수 있습니다.

HGroup

<hgroup>

</hgroup>

hgroup 요소는 섹션의 제목을 나타냅니다. 이 요소는 제목에 하위 제목, 대체 제목 또는 태그 선과 같은 여러 수준이 있을 때 h1-h6 요소 집합을 그룹화하는 데 사용됩니다.

저작자표시

'SW > HTML' 카테고리의 다른 글

HTML : Google지도에서 HTML5 GeoLocation API를 사용하는 방법 : 예제, 구현 (0)	2020.07.21
HTML : HTML5 Details Tag 사용 방법 : 예제, 구현 (0)	2020.07.20
HTML : Gravatar를 Favicon으로 사용하는 방법 : 예제, 구현 (0)	2020.07.19
HTML : HTML5 Form 개념, 특성 알아보기 (0)	2020.07.16
HTML : HTML5 Placeholder 특성 사용 방법 : 예제, 구현 (0)	2020.07.15

현재글HTML : HTML5는 무엇인가?

쵸코쿠키의 연습장