20211025_TIL(1) HTML의 대하여 알아보자

nais·2021년 10월 26일
0

HTML 5, HTML 4.01 , XHTML1.0 모두

  • HTML5는 HTML4 와 XHTML1과 거의 완벽하게 호환된다

  • HTML의 문법적인 느슨함 ( 대소문자 구분 x,종료 태그 생략 , value 생략등) 을 보완해서 내려온게 XML이다

  • XML은 정형식 구조로 열였다면 반드시 종료태그가 있어야하고 모두 소문자만 사용 등 일관된 코드를 만들 수 있고 개발자가 실수를 줄일 수 있다

  • 위와같은 것들의 스펙을 재정의한 것이 XHTML이다

그렇다면 이들의 차이점은 무엇인가?

HTML 5에 새로 도입된 항목

1) 아웃라인 알고리즘(outline Algorithm)

HTML5에서 정보 구조를 명확히 하기위한 개념 도입 (책의 목차와 비슷하다)

  • 섹셔닝 루트(sectioning Root)
    독립적인 콘텐츠로 분리되어 아웃라인 영향에 주지는 않지만, 보이지 않는 자기만의 제목이 있다.
    독립체지만 구조 중 하나에 포함될 수 있도록 해줘야 좋은 아웃라인
    ex) <blockquote>,<body>,<detail>, <fieldset>
  • 섹셔닝 콘텐츠(Sectioning Content)
    명시적 개요를 생성하기 위한 개요 컨테이너
    ex) <section>, <article>, <nav>, <aside>
  • 헤딩 콘텐츠(Heading Content)
    문서의 아웃라인을 고려하여 사용해야함
    제목을 뽑아 내야지 아웃라인이 생기고 그래야지 구조적인 사이트가 되는 것이다.

ex) <h1>, <h2>, <h3>

2) 새롭게 등장한 콘텐츠 모델(Content Models)

  • 명확한 정보 구조 설계를 카테고리로 정의하여 각 요소별로 비슷한 성격을 가지고 있는 것 끼리 그룹화 하였는데 이를 HTML 의 콘텐츠 모델이라고 한다

1) 메타 데이터 컨텐츠 (metadata content)

  • 콘텐츠의 모양, 동작을 설정하거나 다른 문서와의 관계를 나타낸다

ex) base, command , link ,meta, noscript, script, style, title

2) 플로우 콘텐츠 (flow content)

  • 대부분의 body 요소 안의 포함된다.
  • 플로우 콘텐츠는 하위 텍스트나 임베디드 콘텐츠를 포함한다

ex) a, abbr, address, map>area, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1 ~ h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, style[scoped], sub, sup, svg, table, textarea, time, ul, var, video, wbr

3) 섹셔닝 콘텐츠 (sectioning content)

  • 헤딩과 푸터의 범위를 결정하는 요소이다
  • 모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가지고 있다

ex) article, aside, nav , section

4) 프레이징 콘텐츠(phrasing content)

  • 문서의 텍스트를 의미한다. 프레이징 콘텐츠는 하위 텍스트나 임베디드 콘텐츠를 포함한다

ex) a, abbr, map>area, audio, b, bdo, br, button, canvas, cite, code, command, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr

5) 임베디드 콘텐츠(embeded content)

  • 이미지 , 비디오 플래시 등 외부 콘텐츠 문서 내에 표현한다

ex) audio, canvas, embed, iframe, img, math, object, svg, video

6) 인터액티브 콘텐츠(interative content)

  • 사용자와 상호작용하는 요소들이다

ex) input, textarea, label, button a, audio

7) 트랜스패런트 콘텐츠(palpable content)

  • 기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말하며
profile
왜가 디폴트값인 프론트엔드 개발자

0개의 댓글