Semantic Web & Semantic Tag

Semantic

• 의미론적인
• 인류는 사람에게도 의미있고 기계들에게도 활용하기 좋은 데이터로 웹을 발전시키기 위한 여러가지 노력을 하게 된다.
• 그 과정에서 웹의 중요한 트렌트 중 하나인 Semantic Web가 탄생한다.
• HTML 태그 안에서 사용되는 여러 가지 정보들을 의미에 맞게 잘 표현하기 위한 태그들이 등장한다.
• HTML5 부터 웹의 상단 부분, 하단 부분, navigation, 본문 부분을 명확하게 표현하는 태그들이 등장한다.
• 이것을 Semantic tag 라고 한다.

Semantic Tag

Semantic Tag의 종류

article

• 본문

aside

• 광고와 같이 페이지의 내용과는 관계가 적은 내용들

details

• 기본적으로 표시되며 화면에 표시되지 않는 정보들을 정의

figure

• 삽화나 다이어그램과 같은 부가적인 요소를 정의

footer

• 화면의 하단에 위치하는 사이트나 문서의 전체적인 정보를 정의

header

• 화면의 상단에 위치하는 사이트나 문서의 전체적인 정보를 정의

main

• 문서에서 가장 중심이 되는 컨텐츠를 정의

mark

• 참조나 하이라이트 표시를 필요로 하는 문자를 정의

nav

• 문서의 네비게이션 항목을 정의

section

• 문서의 구획들을 정의

time

• 시간을 정의

Semantic tag 사용 예시

<header>
  <h1>제목</h1>
</header>

<nav>
  <ol>
    <li>메뉴 1</li>
    <li>메뉴 2</li>
  </ol>
</nav>

<article>
  본문
</article>

<footer>
  <li>개인정보 정책</li>
</footer>

• <header> 태그는 웹 페이지에서 아무런 기능이 없다. 기능이 없고 의미만 가지고 있는 태그이다. 기본적으로 위에 위치하는 태그이다.
• <footer> 태그는 기본적으로 밑에 위치하는 태그이다.
• <article> 과 <section>의 차이
  • <section> 은 역할이 분명하지 않은 영역들을 묶어준다.
  • <article>은 본문 영역이라는 역할이 존재한다.

<img> 태그를 사용해 이미지를 삽입하기 vs <div> 태그에 background-image 속성 추가해 이미지를 삽입하기

차이점

• <img> 태그는 HTML 문서에서의 역할 의미를 잘 나타내준 태그이기 때문에 Semantic Tag라고 할 수 있다.
• <div> 태그는 HTML 문서에서의 역할을 확실히 나타내지 않고 있기 때문에 Non-Semantic Tag로 분류된다.

어떠한 상황에 사용한다면 좋을까?

1. <img> 태그

• 모든 사용자에게 의미전달을 쉽게 하고 싶을 때
• 다른 사용자가 페이지를 인쇄하고 기본적으로 이미지를 포함하기를 원할 때
• 백그라운드에서 애니메이션 성능을 향상하려는 경우
• 이미지에 필수적인 의미가 있는 경우(예: 경고 아이콘)

2. <div> 태그

• 검색 결과에 큰 역할이 필요 없고, 콘텐츠와 연관성이 적을 때
• 이미지가 설계용으로만 사용되는 경우
• 이미지가 컨텐츠의 일부가 아닌 경우
• 다른 사용자가 페이지를 인쇄할 수 있고 기본적으로 이미지가 포함되지 않도록 하려는 경우.
• 다운로드 시간을 단축하려는 경우
• 이미지의 일부만 표시되도록 해야 하는 경우.
• 텍스트의 이미지를 대체하려는 경우.
• 전체 창을 채우도록 배경 이미지를 확장해야 하는 경우. 배경 크기를 "커버"로 설정한 상태에서 사용한다.
• 사진을 반복해야 하는 경우.

<참고>

• https://www.w3docs.com/snippets/html/when-to-use-html-img-tag-and-css-background-image-property.html
• https://youtu.be/uDmNhHYecL4