Semantic HTML

Semantic HTML

시맨틱 HTML은 페이지에 의미를 부여하는 것을 말함

현대표준, 웹사이트의 SEO(검색 엔진 최적화)가 향상되고 사람들이 웹사이트에 액세스할 수 있게함. (검색했을 때 상위에 랭크됨)

---

Sectioning Elements = 단원

단원의 주제는 곧 제목이다.

따라서 아래의 sectioning elements들은 heading태그를 반드시 써야한다.

 

section

article

nav

aside

---

기본구조 : header/main/footer (논리적으로 완결된 집합체에 의미를 더 정확히 해줌) - not sectioning elements

 

header : 문서의 도입부 또는 한 section의 도입부에 사용 / 뉘앙스를 나타낼 때 언제든지 사용가능

main : 본문에 있어 핵심이 되는 부분을 묶는다.

    ㄴmain은 sectioning elements가 아니기 때문에 heading 태그를 적을 필요가 없다.

    ㄴmain은 html문서에 단 한 번만 들어갈 수 있다.

    ㄴmain은 다른 sectioning  안에 쓸 수 없다.

footer : 문서의 하단부 또는 section의 하단부에 div보다 의미적으로 더 정확한 뉘앙스를 나타낸다.

 

section : 논리적으로 완결된 집합체를 덩어리로 나눌 때는 section이 div보다 의미적으로 더 정확한 뉘앙스를 나타낸다.

nav : 문서 페이지 간의 이동을 포함하는 메뉴

article : 기사, 블로그, 댓글 등 자체적으로 이해되는 콘텐츠(정보)로서 완결성이 있는 경우

aside : 주요한 내용과 관련이 있지만 필수적이지는 않은 정보

 

figure : 모든 유형의 미디어를 캡슐화

figcaption : 미디어를 설명하는 글(figure에 종속)

audio/video/embed : 미디어 파일 넣기

embed : 외부 데이터와 연결

ㄴcontrols

ㄴsrc