1.3 [HTML] 콘텐츠모델, 시멘틱마크업, 블록 & 인라인

 

1) 콘텐츠 모델

 

① Matadata

② flow

③ sectioning

④ heading

⑤ phrasing

⑥ embedded

⑦ interactive

 

2) 시멘틱 마크업

시멘틱 : 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것.

 

<b> vs <strong>

<i> vs <em>

<u> vs <ins>

<s> vs <del>

 

+ <article> <aside> <figcaption> <figure> <footer> <header> <main> <mark> <nav>

<section> <time>

 

[참고 사이트]

https://developer.mozilla.org/ko/docs/Glossary/Semantics

Semantics - 용어 사전 | MDN

 

• <article> : 내용을 내부에서 구분하여 정의 내림 
• <aside> : 주요 내용과 간접적으로만 연관된 부분 표현, 사이드바 혹은 콜아웃 박스로 주로 표현 
• <figcaption> : <figure> 내 콘텐츠에 대한 설명/범례
• <figure> : 독립적인 콘텐츠를 표현
• <footer> : 꼬릿말(구획의 작성자, 저작권 정보, 관련 문서)
• <header> : 머릿말(소개 및 탐색을 위한 제목(h1~2) 시멘틱 마크업)
• <main> : 본문,  주요 콘텐츠
• <mark> : 현재 맥락에 관련이 깊거나 중요한 부분 하이라이트
• <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구문 생성(<li> 활용)
• <section> : 내용을 내부에서 구획화
• <time> : 시간의 특정 지점 또는 구간 표현, datetime 이라는 특성으로 유효한 날짜 구문 마크업 가능

 

3) 블록 & 인라인

콘텐츠 모델을 크게 두 가지로 구분  -->  블록 레벨 / 인라인 레벨

* 인라인 레벨 요소는 블록 레벨 요소를 감쌀 수 없다. (예외 – anchor 요소)