html은 순차적 마크업 언어라고 기억하고 계신데요.
html은 웹 싸이트에서 흔히 쓰일때는 데이터를 주고 받아서 처리하는데 한계를 나타내게 됩니다.
그걸 보완하게 나온게 바로 xml (extensible markup language) 라는 마크업 언어입니다.
xml도 자세하게 하려면 이것도 정해진 문법이 있기때문에 나중에 다루겠습니다.
우선 기억하셔야 될건 xml 을 이용해서 html 을 발전시켜서 XHTML을 표준으로 만들려고 했습니다.
하지만 웹의 호환성 문제와 함께 html의 고질적인 active x, 플래쉬, flex , flex 등의 플러그 인으로 보완을 하고 있었지만
브라우저마다 제대로 작동이 안되고 다양한 문제는 계속 끊이지 않았습니다.
그래서 웹 표준화 기구인 W3C(World Wide Web Consortium) 에서 HTML5을 만들면서
웹의 환경이나 모바일이나 각종 전자기기에서 다양하게 사용될 수 있도록 목표를 삼았습니다.
그래서 이제 흔히 이야기하는 HTML5는 HTML의 최신 버전이고
중간에 XHTML이라는 걸 시도 했었다고라고 기억하시면 됩니다.
HTML5은 기존 버전하고 좀 특별하게 진 점이 몇 개 있습니다.
기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록 요소(Block Level Element)로
구분하는 정도의 개념만 존재하였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 위해 카테고리를 정의하여
각 요소별로 비슷한 성격을 가지고 있는 것끼리 그룹화한 콘텐츠 모델(Content Models)이라고 합니다.
** 섹셔닝 루트(Sectioning Root) : 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향이없음
- <blockquote>, <body>, <detail>, <fieldset>, <figure>, <td>
** 메타데이터 콘텐츠(Metadata Content): 기본적인 웹 브라우저에 직접적으로 표시되지 않으며, 문서(document)와 문서 간의 관계를 설정
- <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>
** 플로우 콘텐츠(Flow Content): body 요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델
- <a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>
** 섹셔닝 콘텐츠(Sectioning Content): HTML5에서 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠
- <article>, <aside>, <nav>, <section>
** 헤딩 콘텐츠(Heading Content): 섹션의 제목
- <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
** 프레이징 콘텐츠(Phrasing Content) : 문서의 텍스트를 나타내며, 그 텍스트를 문단 내부 레벨로 마크업하는 요소
- <a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, <map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>
** 임베디드 콘텐츠(Embedded Content): 서 안에 외부 자원(‘외부 리소스’라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠
<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>
** 인터랙티브 콘텐츠(Interactive Content): 사용자가 어떤 기능을 조작할 수 있는 (상호 작용) 콘텐츠
- <a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>, <img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>, <label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>, <video>(controls 속성이 있는 경우)
** 팰퍼블 콘텐츠(Palpable Content): 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소
- <a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우), <base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, <data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>, <dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, <input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>, <ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>, <ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)
** 스크립트 지원 요소(Script-supporting Elements): 사용자에 대한 기능 등에 해당하는 스크립트를 지원
- <script>
** 트랜스 패어런트 콘텐츠(Transparent Content) : 트랜스페어런트 콘텐츠는 투명하다는 의미가 아니라 트랜스 패어런트 콘텐츠 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다는 것을 의미
- <table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>
이번에 HTML을 배우시면 웹에 대한 요소들을 접하게 처음 접하시는 분들이라면 낯썬용어와 개념들이지만
기존에 HTML을 사용하셨던 분들이라면 옛날하고 비슷한데 하실겁니다. HTML5는 HTML을 업그레이드해서
다양한 웹의 환경에서 편하게 사용되도록하는게 목적입니다.
그러다보니 좀 더 명확한 규칙과 문법을 적용하게 됩니다.
댓글