콘텐츠 모델
Nothing 콘텐츠 모델
요소가 공백 문자 포함 어떤 콘텐츠도 담고 있지 않은 경우 Nothing 으로 취급
콘텐츠의 종류
1. Metadata 요소 — 콘텐츠의 동작을 설정하거나 다른 문서와의 관계를 설정. <head> 내에서 정보 전달
- base : 문서 안의 모든 상대 URL이 사용할 기준 URL 지정
- link : css 호출 등
- meta : 페이지 설명. 즉 페이지 작성자, 문자세, 공유 정보 등
- noscript : 자바스크립트가 동작하지 않는 경우
- script : 자바스크립트
- style : css를 페이지 내에서 작성
- template
- title : 페이지 제목
2. Flow 요소 — body 내부에 존재하는 대부분 요소들. 문서의 자연스러운 흐름에 의해 배치되는 요소들
3. Sectioning 요소 — 제목 요소와 푸터 요소의 범위를 나타내는 요소들. 문서의 구조와 아웃라인에 영향
4. Heading 요소 : 섹션의 제목을 나타내는 요소
5. Phrasing 요소 : 문서 내의 텍스트
6. Embedded 요소 — 외부에서 콘텐츠를 가져오는 요소. 오디오, 비디오, 이미지 관련 요소
- audio
- canvas
- embed
- iframe
- img
- MathML
- math
- object
- picture
- SVG
- sag
- video
7. Interactive — 유저와 상호작용하는 요소
8. Palpable 요소 — flow 콘텐츠나 phrasing 콘텐츠를 허용하는 요소는 최소 하나 이상의 노드를 가져야하는 것 그 콘텐츠를 palable요소라고합니다.
9. Script-Supporting — 외부 스크립트를 사용하기 위한 요소
- script
- templete
시멘틱 마크업
HTML5에서는 웹 페이지의 레이아웃을 위한 별도의 새로운 요소를 제공합니다. semantic (의미있는) 마크업이란 뜻으로 기계가 잘 이해할 수 있도록 적절한 html 요소를 올바르게 사용하여 검색엔진에 최적화를 시켜주는 것
<header>
<nav>
<section> — 논리적으로 관계 있는 문서 요소를 분리할 때 사용
<article> — 문서 혹은 요소가 독립적으로 존재할 때 사용. section 안에 article이 들어가는 것은 이상합니다. 관계 있는 내용을 section 안에 모아놓을 건데 article로 다시 나누는 것은 부자연스럽죠. article 안에 section이 들어가야 자연스럽습니다.
<aside>
<footer>
<figcaption>
<figure>
<main>
<mark>
<time>
'웹 개발 > 웹프로그래밍' 카테고리의 다른 글
| CSS | 6. 레이아웃 (0) | 2020.12.25 |
|---|---|
| CSS | 8. 구체성과 상속 (0) | 2020.12.24 |
| CSS | 7. 조합자와 가상선택자 (0) | 2020.12.23 |
| CSS | 3. 선택자 (0) | 2020.12.20 |
| CSS | 4. 폰트 텍스트 관련 (0) | 2020.12.16 |
| CSS | 2. 구문과 적용 방법 (0) | 2020.12.14 |
| HTML | 6. 인라인 프레임 (iframe) 속성 (0) | 2020.12.12 |
| HTML | 4. meta 태그의 속성과 종류 (0) | 2020.12.04 |
댓글