[TIL-html] Semantic HTML-2

sgr2134·2021년 3월 10일
0
post-thumbnail

Semantic elements

지난 포스팅에서 Semantic HTML에 대한 간략한 설명을 했다. 이번 포스팅에서는 Semantic elements 중 상대적으로 자주 쓰이는(내 기준) 태그들을 소개해보려고 한다.

header는 이름과 같이 페이지의 머리부분에서 소개를 담는 내용이나 강조하고 싶은 부분들을 주로 배치한다. w3schools에서는 주로 heading elements(h1~h6)에 해당하거나 로고나 아이콘, 저자의 정보가 들어간다고 적어놓았지만, 나는 주로 웹페이지 상단의 슬라이더 부분을 header로 지정해 놓았다. 일반적인 쓰임새는 있겠지만, 개발자의 정의에 따라 달라진다.

note: HTML문서 내 여러 header 요소를 가질 순 있지만 header안에 footer나 address, 또 다른 header를 넣을 수는 없는 것으로 보인다. 쉽게 HTML(header1, header2, section, footer..)이런식의 구조는 괜찮지만, header1(header2, address, footer)이렇게 구성될수는 없다는 뜻인거 같다.

note: nav에서 링크들의 집합은 문서 내 모든 링크를 의미하는 것이 아닌 주요 항목에 대한 범위정도가 되겠다.

section

section 또한 의미 그대로 문서내 한 부분을 의미한다. W3C의 설명에 따르면 section은 제목을 포함한 본문 내용이라 할 수 있다.보통 section은 소개, 내용, 연락처 정보 등으로 나누어 질 수 있다. 여러개의 section은 article로 묶을 수 있고 여러개의 article은 section으로 묶을 수 있다.

note: 보통 section과 article, div가 혼동되는데 어떻게 구별될 수 있을까?
모두 내용들을 덩어리로 묶어 분리하는 용도로 사용하기에 혼동될 가능성이 있다. 이때 구분하는 방법들을 구글링을 통해 알아보았다.

  • article: 내용이 서로 관계없이 독립적으로 존재할 때 article 사용
  • section: 내용이 서로 관계가 있다면 section을 사용
  • div: 오직 덩어리로 묶고만 싶다면 div사용

figure

figure 태그는 일러스트나 사진 도형 리스트들 처럼 특정 컨텐츠가 같이 있는 경우 사용한다. 그 중 figurecaption은 해당 figure의 캡션(설명글)같은 거라고 할 수 있다. 보통 처음 혹은 마지막에 캡션이 배치된다. 아래와 같이 사용될 수 있겠다.

<figure>
<img src="photo.jpg" alt="bear">
<figcaption>북극곰</figcaption>
</figure>

이렇듯 figure가 작은 상자라고 생각하면 될 듯하다.

profile
못하는것도 지겨워서 공부한 걸 기록합니다.. 나아지겠죠 🙏

0개의 댓글