TIL. 20 HTML - Semantic web, Semantic tag

Minjae Choi·2021년 6월 7일
0

HTML

목록 보기
5/5

🎈 일반 웹과 시맨틱 웹


  • semantic web 시맨틱 웹은 기계에게 단순히 단어를 제공하는 것이 아니라, 이해할 수 있는 형태로 제작된 웹을 말한다.(ex: {바나나, 노란색}이라는 형태가 아닌 {바나나, 색, 노랑}이라는 바나나라는 것의 색상이 노랗다는 것을 이해시킴)

  • non-semantic tag div, span 등과 같은 태그는 콘텐츠에 대한 어떤 설명이 없는 태그이다.

  • semantic tag 시맨틱 태그는 form, table, img 등 콘텐츠의 의미를 명확하게 설명하는 태그를 말한다.

예를 들어,

<div id="header">는 시맨틱 태그로 <header>라고 표현할 수 있다.
  • HTML5에서는 article, aside, footer, header, main, nav 등 의미가 명확한 태그들이 등장했다.

🎈 배경 이미지 넣는 방법의 차이(HTML, CSS)


  • img vs div background-image img 태그를 사용시 alt 속성에 문자열을 넣을 수 있으며 이에 대한 정보를 사용자에게 전달할 수 있고, css를 사용시 단순한 이미지 첨부이며 문제가 생겼을 시 어떠한 정보도 담지 않는다.

  • 결론적으로, 이미지가 사용자에게 노출되며 이에 대한 정보를 반드시 제공해야 한다면 img를 사용하는 것이 좋고, 순수한 장식을 위해서라면 css를 사용하는 것이 좋다.

HTML 태그로 표현한 이미지

<img alt="error" src="https://www.w3schools.com/whatis/img_js.png">
CSS로 표현한 이미지

.bg-img {
  background-image: url("https://www.w3schools.com/whatis/img_js.png");
  width: 150px;
  height: 170px;
  background-size: 100%;
}

위 두 가지 방법으로 표현한 이미지는 코드는 다르지만 서로 같다.

0개의 댓글