[HTML] 시멘틱 태그

header

- 위치: 페이지 맨 윗쪽, 왼쪽

- form 태그를 사용해 header안에 검색창을 넣는다. 

- nav 태그를 사용해 header안에 사이트 메뉴를 넣는다.

- haeder태그를 본문의 머리말로 사용한다.

 

 

 

nav

- 위치: 어디에서나 사용된다.

- 동일한 사이트 안의 문서나 다른 사이트의 문서로 연결하는 링크 모음을 나타낸다.

- 푸터에 있는 사이트 모음 부분에 사용된다.

 

 

 

*section과 article

대체로 section 요소는 HTML 문서의 전체적인 내용에 포함되며,

article 요소는 문서의 전체적인 내용과는 별도의 독립적인 내용이 들어갈 때 사용하면 됩니다.

section	article
- HTML문서의 전체적인 내용과   관련이 있는 콘텐츠를    주제별로 묶을 때 사용한다. - h1~h6 제목태그가 함께 사용된다. - section태그 안에   또 다른 section태그를 넣을 수 있다.	- 블로그의 포스트, 웹 사이트의 내용,   사용자가 등록한 코멘트,   독립적인 웹 콘텐츠 항목이 해당된다. - article 부분을 떼어 독립적으로 배포하거나   재사용해도 완전히 하나의 콘텐츠가 되면   article태그를 쓰면 된다. : 그 자체의 내용만 두고 봐도 이해가 되어야 한다.  즉, 웹 사이트의 나머지 부분과는  별도로 읽을 수 있어야 한다. - article 태그 안에 article, section을 넣을 수 있다. - article요소가 중첩되어 있을 때  안쪽에 있는 요소는 바깥쪽 요소와  관련된 글을 나타낸다. ex). 블로그 글(article)의 댓글(article)

흠.. 근데 article안에 section을 넣는건 대체 뭔 상황이지

이미 html문서와 독립적인 article 태그라고 해버렸으면서

전체적인 html내용과 관련있는 section을 그 안에 써도 된다는건?..

 

 

aside

- 위치: 왼쪽이나 오른쪽 하단의 사이드바

- aside안에 들어가는 내용은 필수내용이 아니다 : 광고, 링크 모음..

- 본문 내용 외에 주변에 표시되는 기타 내용을 나타낸다.

 

 

 

figure

<figure>     <img>     <figcaption> </figure> 대략 이와 같은 구조로 활용된다.

figure  - 설명 글을 붙여야 할 대상을 지정하거나 웹문서에서 멀티미디어 파일을 비롯해    한 단위가 되는 요소를 묶을 때 사용한다. - 설명글이 필요한 대상을 묶어준다. figcaption - 설명하는 글을 넣는다. - 설명하는 대상: 이미지, 오디오, 비디오, 텍스트 단락, 표..

 

 

 

 

출처

- 고경희, HTML5 + CSS3 웹 표준의 정석, 이지스퍼블리싱, 2020, 102-103, 374-386쪽.

- https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

- http://tcpschool.com/html/html5_element_semantic