HTML 문법3

# 콘텐츠모델, 시멘틱마크업, 블록&인라인

---

■ 콘텐츠모델(HTML 규칙에 비슷한 성격의 요소끼리 그룹화함)

 

Content Models 의 7 분류  

1. Metadata Content
2. Flow Content
3. Sectioning Content
4. Heading Content
5. Phrasing Content
6. Embedded Content
7. Interacitve Content

• Metadata : 콘텐츠의 표현, 동작, 다른 문서와의 관계, head내 존재, base, link, meta, script, style, title 등
• Phrasing : 문서 텍스트, 문서 내부레벨, a, abbr, audio , b, br, button, i 등
• embeded : 외부 콘텐츠, audio, video, img, canvas, embed 등
• interactive : 상호작용, audio,. button , a, embed, img 등
• heading : 섹션의 헤더, h1~h6
• sectioning : 문서의 구조, 아웃라인, article, aside, nav, section
• flow : 대부분, metadata의 일부분 제외

■ 시멘틱마크업

 

html 코드를 작성할 때 얼마나 시멘틱하게 코드를 짰느냐가 중요

시멘틱: 의미론적인 

시멘틱 마크업: 브라우저가 잘 이해할 수 있는 코드 

= 의미에 맞는 태그 사용, 문서의 구조화, 인간과 기계 모두 이해할 수 있는 것이 목표

 

<b>는 의미 없이 단순히 텍스트를 굵게 표현하는 태그 / <strong>은 중요하다는 의미. 중요하다는 의미에 맞춰 브라우저에 의해 굵은 스타일로 표현

-> 중요하다는 의미를 포함할 때는 <b>가 아닌 <strong>을 사용하는 것이 적절하고 시멘틱한 마크업입니다.

이외에 <i>는 단순히 기울어진 글자를 표현하지만, <em>은 글자의 특정 부분을 강조하는 의미

<u>와 <s>는 단순히 글자에 선을 그은 것이고, <ins>와 <del>은 내용이 새롭게 추가되거나 삭제가 되었다는 의미

 

□ 시멘틱 마크업을 위한 Html5 구획 구분 정의

• <article> : 내용을 내부에서 구분하여 정의 내림 

article

• <aside> : 주요 내용과 간접적으로만 연관된 부분 표현, 사이드바 혹은 콜아웃 박스로 주로 표현 

aside

• <figcaption> : <figure> 내 콘텐츠에 대한 설명/범례
• <figure> : 독립적인 콘텐츠를 표현

figcaption

• <footer> : 꼬릿말(구획의 작성자, 저작권 정보, 관련 문서)

footer

• <header> : 머릿말(소개 및 탐색을 위한 제목(h1~2) 시멘틱 마크업). 제목, 로고, 검색 폼, 작성자 이름 등

header

• <main> : 본문,  주요 콘텐츠

main

• <mark> : 현재 맥락에 관련이 깊거나 중요한 부분 하이라이트

mark

• <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구문 생성(<li> 활용)

nav

• <section> : HTML 문서의 독립적인 구획을 나타냄. 내용을 내부에서 구획화

section

• <time> : 시간의 특정 지점 또는 구간 표현, datetime 이라는 특성으로 유효한 날짜 구문 마크업 가능

time

■  블록&인라인

 

→ block level : 한 줄에 하나의 요소 표시

ex) div,h1~h6, p, ul, li, table 등

→ inline level : 한 줄에 여러개 요소 표시 가능

ex) span, i, img, em, strong 등

블록레벨, 인라인 레벨 비교