Today Yurim Learned

# HTML5

# HTML5

  • HTML 4.0이후에도 W3C에 의해 HTML은 HTML 4.01, XHTML1.0등으로 진화하기 위해 많은 노력을 해옴.
  • 그 과정에서 W3C는 HTML의 Version up을 중단하고 XHTML로 개발 방향 변경함.
    • XHTML 2.0은 하위호환성을 고려하진 않는 새로운 언어로 디자인
    • 이상과 현실의 차이로 인해 XHTML은 브라우저들에게서 외면
    • => WHATWG라는 working group이 개발현실을 반영하면서도 하위버전 HTML과도 호환되는 발전된 HTML을 정의하기 시작함.
  • 2009년 10월 W3C도 WHATWG를 인정하고 HTML5라는 이름으로 새로운 HTML을 디자인

# HTML5의 디자인 원칙

  • 호환성
    • 컨텐츠의 호환성
    • 이전 브라우저와의 호환성
    • 기능의 재사용
    • 이용 방법의 호환성
    • 혁신보다는 발전을 우선함
  • 실용성
  • 상호 운영성
  • 보편적 접근성

# HTML4 vs HTML5

  • HTML5이전
    • 블록레벨 element와 inline element로 구분되어지는 태그들로 표현함
    • 이러한 태그들은 tree형태의 계층구조를 이루어 문서의 outline을 구성하고 contents에 접근가능
  • HTML5
    • Contents Model이라는 새로운 개념 추가
      • 문서의 아웃라인을 잡고 contents를 구성
      • <header>, <footer>, <article>
  • DOCTYPE
    • <!DOCTYPE HTML>
  • Encoding
    • <meta charset="UTF-8">
  • Root Element
    • <html lang="ko">

# Tag

  • section
    • 문서의 section
    • 제목이 있는 주제를 갖는 그룹
    • 재사용 가능한 / 배포 가능한 본문 영역
  • article
    • 독립적인 자체적으로 만족되는 내용
    • 글/기사. 그 자체로도 의미를 가질 수 있어야 함.
    • 웹사이트의 나머지 부분과는 독립적으로 배포가능
  • nav
    • 탐색 링크의 집합.
    • 안에는 <a href…들이 들어감.
  • aside
    • 주요 내용을 제외한 내용의 정의
  • header
    • 문서 섹션, 섹션 헤더.
    • 소개 내용에 대한 컨테이너로 사용
    • 하나의 문서에 여러 헤더 요소를 포함가능
  • footer
    • 문서나 구역의 바닥 글
    • 포함하는 요소에 대한 정보를 포함
    • 문서의 작성자, 저작권 정보, 이용 약관에 대한 링크, 연락처 정보
    • 하나의 문서에 여러 footer요소를 포함가능.

# 예제

  • div – 본문의 폭을 제한하거나 중앙으로 배치하는 역할만 합니다. 별 의미는 없기에 div 요소를 사용 했습니다.
    • header – 사이트 제목과 설명이 등장하는 헤더 섹션입니다.
      • h1 – 사이트 최상위 제목.
    • main – main 요소는 웹 문서 또는 웹 애플리케이션의 본문 요소 입니다. 하나의 문서에 한 번만 사용할 수 있습니다.
      • article – 포스트 본문 섹션으로써 처음에는 section 요소와 어떤 의미적 차이를 지니는지 구분하기 어려웠습니다. 그러나 article 요소는 이 영역을 독립적으로 다른곳에 옮겨놔도 하나의 완전한 문서 또는 섹션이 될 수 있는 ‘재 사용’ 가능한 또는 ‘배포 가능한’ 본문 영역이라고 설명할 수 있겠습니다. section 요소와 마찬가지로 hx 요소를 갖는 것을 강력하게 권장합니다. section과 article 요소 가운데 무엇을 써야 할지 망설여질 때에는 주변의 맥락과 분리하여 독립해도 하나의 완전한 콘텐츠가 되는지 아닌지를 판단해 보세요. 독립적이라면 article에 가깝고 현재 문서의 개요와 구조를 결정하는 역할이라면 section에 가깝습니다.
        • h1 – 포스트 본문 제목. h1이 두 번째 등장하죠. h1은 하나의 웹 페이지에 2번 이상 등장할 수 있습니다. W3C 웹 사이트도 이런 구조를 가지고 있으며 검색엔진 최적화에 좋습니다. 게시판에서 게시물 제목도 h1으로 마크업 하면 검색엔진으로부터 좋은 점수를 받을 수 있습니다. h1에 포함된 텍스트가 문서 헤드의 title 요소에도 들어가 있으면 금상 첨화죠. 제 블로그는 그렇게 처리되어 있습니다. 검색엔진이 좋아합니다.
        • section – 댓글 목록 섹션.
          • h2 – 댓글 목록 제목.
        • section – 댓글 쓰기 섹션.
          • h2 – 댓글 쓰기 제목.
          • form – 댓글 쓰기 폼.
    • nav – 사이트 글로벌 네비게이션 영역.
      • h2 – 사이트 글로벌 네비게이션 제목.
      • h3 – 사이트 글로벌 네비게이션 하위 제목.
      • ul – 비순차 목록 컨테이너. h3에 대한 게시물 목록.
        • li – 네비게이션 항목. h3에 대한 게시물 항목.
    • footer – 저작물 이용 안내 및 RSS 주소를 담은 풋터 섹션.

# HTML5 Markup – Form Controls

<input type=”search” autocomplete=”on” />
검색창의 인풋 타입이 search 입니다.

<input type=”url” autocomplete=”on”  />
댓글 쓰기 창에서 웹 사이트 주소 입력 인풋 타입이 url 입니다.

# Refer

http://direct.co.kr/cs/HTML5.pdf HTML5 오픈 레퍼런스 eBook (opens new window) http://naradesign.net/wp/2011/05/27/1483/

← Udacity RWD →