TIL 3. Semantic Tag, Semantic Web

주민콩·2020년 10월 21일
0
  • 사이트에 <img> 태그를 사용하는 것과 <div>태그에 background-image 속성을 추가하는것의 차이점과 어떠한 경우에 사용하면 좋은지 알아보자 !
  • Semantic Web 과 Semantic Tag에 대해 알아보자 !

Semantic Tag

Semantic : '의미의', '의미론적인'
HTML5에 도입된 semantic tag 는 개발자와 브라우저에게 의미있는 태그를 제공한다.

  • non-semantic elements : <div>, <span>

  • semantic elements : <form>, <table>, <article>

    일반적으로, <div>, <span> 태그만 보고는 이 태그 안에 들어간 내용을 알 수가 없다 😂
    반면, <table>, <article>등의 태그는 대략 어떠한 내용이 들어갈지 유추할 수 있다.
    <table>태그 안에는 표가 들어갈 것이고, <article>태그 안에는 글이 들어갈 것이다.

Semantic Elemenets

  • <section> : 문서에서 세션을 정의할 때 사용한다.
  • <header> : 헤더
  • <nav> : 네비게이션
  • <aside> : 사이드에 위치하는 공간을 의미
  • <article> : 본문의 주 내용이 들어가는 공간을 의미
  • <footer> : footer

Semantic Web

  • 시맨틱 웹은 "의미론적인 웹" 즉, 기계가 이해할 수 있는 형태로 제작된 웹을 말한다.
  • 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

Q&A

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

: 차이점은 background-image 속성에 있는 이미지는 Google에서 크롤링하거나 색인을 생성하지 않습니다.
img 태그에는 alt="" 로 이미지에 대한 설명을 넣을 수 있어 노출되는 용도로 사용이 가능합니다.
그에 반해 background-image는 이미지에 대한 정보를 가지고 있지 않습니다.
의미가 있는(ex, 글과 함께 있어야 하는 관련 이미지라면 <img> 태그를 사용하고 background-image는 '장식'으로 할 때 사용하는 것이 좋습니다.

profile
코딩하면서 기록하는 메모장 ᰔ

0개의 댓글