Rev. 2.73

HTML이 새로운 기능들을 가지고 한 세기를 넘어서 되돌아 왔습니다. XHTML과 달리 HTML 5의 장점은 매우 유연하다는 것입니다. HTML 5를 지원하지 않는 브라우저에서도 컨텐츠가 무리없이 출력되도록 설계되었습니다. HTML4에 기반하고 네임스페이스나 스키마가 없기 때문에 요소(Element)의 끝을 정확히 닫지 않거나 따옴표를 생략해도 괜찮습니다. 그리고 호환성이 고려된 추가적인 새 요소들이 대거 추가되었습니다. 구조 요소는 header, footer, nav, aside, figure, section이 있으며 인라인 요소로는 time, meter, progress가 있고 내장 요소로는 video와 audio가 있으며 대화형 요소로는 details, datagrid, command가 바로 새로운 요소들 입니다. 이 세로운 요소들에 대한 이해를 돕기 위해 요소의 역할을 간략하게 메모해 보았습니다.

구조 요소

  • <section>: 문서의 특정 영역을 구분
  • <header>: 문서 또는 영역의 머리말에 해당하는 내용 구분
  • <footer>: 문서 또는 영역의 꼬리말에 해당하는 내용 구분
  • <nav>: 다른 페이지를 가리키는 링크들의 모음(네비게이션) 구분
  • <article>: 하나의 글 또는 기사(본문)의 단위 구분

블럭 요소

  • <aside>: 본문의 흐름에서 벗어나는 내용 구분(참고, 팁, 사이드바, 인용)
  • <figure>: 이미지, 비디오 등에 자막(캡션) 표현
  • <dialog>: 사람 간에 일어난 대화 영역 구분

인라인 요소

  • <mark>: 강조할 필요까진 없으나 주목해야 할 문구를 표현(형광펜)
  • <meter>: 특정한 범위에 속하는 숫자 값을 표현(월급, 득표율, 테스트 점수 등)
  • <time>: 특정한 시각을 표현
  • <progress>: 현재 진행 중인 상태를 표현(다운로드 완료율)

미디어 요소

  • <video>: 별도의 플러그인 설치를 필요로 하지 않는 동영상 자료를 표시(UI API 제공)
  • <audio>: 별도의 플러그인 설치를 필요로 하지 않는 음원 자료를 표시(UI API 제공)

상호작용 요소

  • <details>: 추가적인 상세정보를 담고있는 영역(툴팁의 내용)
  • <datagrid>: 동적인 데이터를 효과적으로 표현(트리, 목록, 표)
  • <menu>, <command>: menu는 command 요소를 포함하여 즉각적인 동작 발생(콘텍스트 메뉴)

HTML 5에서 사라진 요소는 acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, noscript, s, strike, tt, u입니다. 더욱 자세한 HTML 5의 변동사항은 channy님이 번역한 HTML 4와 HTML 5의 차이점 문서를 참고하세요. 지금까지 부적절하게 사용해왔던 div와 span지옥에서 벋어날 수 있다는 사실을 인지했다면 당신은 이미 HTML 5를 사용할 준비가 된 것입니다. 이제 더 이상 div에 의존하여 class 속성으로 역할을 구분할 필요가 없어진 것이죠. XHTML에서 HTML 5로 옮겨타는 것은 그리 어려운 일이 아닙니다. 그러나 늘 그랬듯이 문제는 IE에서 발생합니다. IE를 제외한 메이저급 브라우저들이 모두 HTML 5를 수용한 상태이지만 IE에서는 HTML 5의 세로운 요소들을 인지하지 못합니다. 이 문제는 아래와 같은 자바스크립트를 상위에서 실행하는 편법으로 해결할 수 있습니다.

!!(window.attachEvent && navigator.userAgent.indexOf('Opera') === -1) && (function() {
    for (var i = 0; i < arguments.length; i++) document.createElement(arguments[i]); 
  })('header', 'footer', 'aside', 'nav', 'article', 'section', 'time');

HTML은 십수년동안 사람과 컴퓨터간 소통할 수 있는 가장 쉬운 언어로 인식되고 즐겨 사용되어 왔습니다. 그리고 HTML 5로 인하여 문서의 용도와 목적 등을 조금 더 분명하게 구분하고 표현할 수 있게 되었습니다. 컴퓨터가 이를 체계적으로 이해하면 생각치도 못했던 놀라운 세상이 펼쳐질 것이며, 웹 애플리케이션이 진보하는 밑거름이 될 것이라 믿어 의심치 않습니다.

Comments

Got something to add? You can just leave a comment.

  • pRix pRix

    추가된 요소들만 적용해도 구조화에 매우 도움이 될 것 같습니다.
    하지만 엄청난 편의성이 추가된 input type들은 어떻게 하위호환을 구현해야할지 생각만해도 앞이 깜깜하군요 ㅜ_ㅜ

    reply edit

Your Reaction Time!

captcha

avatar