1. HTML5

HTML은 웹 표준 구조 언어로서 보여지는 웹 페이지를 구조화하고 브라우저가 해석할 수 있도록 작성하는 데 사용되는 마크업 언어이다. 어도비에서 제공하는 플러그인을 통해 기능을 확장하던 이전 버전의 경우, 독점에 가까운 플러그인 제공에 의한 폐쇄성, 보안 취약점 등 여러 문제를 안고 있었고, 특히 PC와 마우스 사용을 통한 인터렉션에 특화되어 제작되어 모바일 시대에는 적합하지 않다는 평가를 받게 되었다. (스티브 잡스가 기고한 글을 정리한 레퍼런스가 있어 링크해두었다.) 이러한 단점을 혁신보다는 발전에 초점을 두어 HTML5를 개발하게 되었다.

특징

  1. 자바스크립트 구현 혹은 플러그인을 통해 제공되었던 기능들을 자체 태그를 통해 제공

  2. 멀티미디어, 오디오, 비디오, 그래픽, 위치 정보 등 기능 제공

  3. 웹, 서버에서 직접적인 양방향 통신 지원 (Web socket)

  4. CSS3에서 글씨체, 색상, 배경 등 다양한 스타일 이펙트 기능 제공

  5. 오프라인 상태에서 웹 이용을 가능하도록 기능 제공

  6. 시멘틱 태그 제공으로 기계가 마크업의 의미를 이해할 수 있도록 하며, 마크업 가독성 또한 높임

디자인 원칙

HTML5는 호환성 측면에서 이전 버전과 호환을 충분히 고려할 수 있도록 설계되었다. 이전 버전으로 제작한 컨텐츠들도 문제없이 기능을 수행할 수 있어야 하며, 구 버전의 브라우저에서 이용이 가능해야 한다. 또한 각각의 브라우저에서만 제공하는 기능들을 통합하여 통일된 기능을 제공한다.

주요 구문

<!doctype html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>HTML5 Document type</title>
    </head>
    <body>
        <!-- 콘텐츠 영역 -->
    </body>
</html>

DOCTYPE

기존 HTML 타입을 표현하기 위한 문서 타입보다 간결하게 해당 HTML 문서의 버전을 브라우저에게 알리는 데 사용할 수 있다.

<!doctype html>

Encoding

HTML 문서에서 사용되는 문자셋 인코딩을 특정지어 선언해줄 수 있다. 주로 utf-8을 사용한다. 국문, 일본어 등 모두 지원한다.

<meta charset="UTF-8">

html

html 태그는 문서의 최상단 요소로서 모든 요소들은 html 태그의 자손 태그가 된다. 내부 하나의 head, body 태그를 포함할 수 있으며 암시적인 ARIA 로서 이를 대체할 수 없다. manifest, version 등 대부분의 특성들이 더 이상 사용되지 않거나, 옵션으로 변경되었다.

lang

  1. 태그 내 텍스트의 언어, 수정 가능한 텍스트가 사용해야 하는 언어를 정의

  2. 접근성을 고려하여 스크린 리더가 음성을 표현할 때 사용할 언어를 선택하는 데 도움을 줌

  3. 페이지의 주 언어를 지정하며 값이 없는 경우 보통 운영체제의 언어 설정을 따

<html lang="ko">

head

브라우저가 식별할 수 있는 문서의 메타데이터를 갖는 요소로서, 제목, 스크립트, 스타일 시트 등이 자식 요소들로 구성된다. head 태그는 화면을 구성하지 않는다. html5가 호환되는 브라우저의 경우 head 태그가 없다면, 자동으로 이를 생성하여 규칙을 지켜낸다.

<head>
  <meta charset="UTF-8">
  <title>HTML5 Document type</title>
</head>

body

화면에 랜더링되는 태그와 정보들이 포함된다. 스크립트의 경우 body 끝에 위치하는 것이 일반적이다. 마크업을 파싱해서 랜더 트리를 구축하는 과정에서 script 태그를 만나면 브라우저의 자바스크립트 파서에게 실행권이 넘어가게 되어 마크업 랜더링에 블로킹이 발생한다. 이를 방지하기 위해 화면에 랜더링되어야 할 태그들이 모두 파싱된 후 스크립트를 파싱할 수 있도록 하는 것이 좋다.

<body>
  <!-- 콘텐츠 영역 -->
</body>

시멘틱 태그

시멘틱 태그를 사용하여 HTML 문서를 파싱하는 대상이 마크업 의미를 전달할 수 있다. 또한, 개발자로서 해당 태그의 역할을 가독하는 데 효과적으로 그 의미를 전달한다.

대표적으로 HTML5에 새롭게 추가된 시멘틱 태그는 Header, Footer, Nav, Section, Article, Aside, Figure, Figcaption 가 있다.

이점

  1. 검색엔진 최적화 측면에서 시멘틱 태그는 효과적이다. 검색 엔진 봇은 해당 페이지의 검색 키워드들을 예상하고 인덱스를 생성하게 되는데, 이때 시멘틱 태그를 사용하여 검색 엔진 봇에게 중요한 혹은 적절한 키워드를 전달하여 검색 엔진이 인덱스를 생성하는 과정에서 해당 키워드의 의미와 힌트를 전달할 수 있다.

  2. 접근성 측면에서 스크린 리더는 시멘틱 태그의 의미를 파악하고 태그에 담긴 의미를 사용자에게 전달할 수 있다.

Reference

PreviousHTMLNext2. Head

Last updated