.jpeg)
Semantic Web
: 의미론적인 웹으로, 문서의 의미에 맞게 어플리케이션의 의미에 맞게 구성된 웹
- 컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹
- 정보를 분석하여 그 정보의 관계 속에서 의미론적인 자료들을 추출하여 웹상에 보여줄 수 있는 웹
Semantic Tag
: 시맨틱 웹에서 사람과 기계가 이해할 수 있는 형태, 즉 활용하기 좋은 형태의 데이터로 웹을 발전시키기 위해 나온 tag.
- HTML5 언어에 익숙하지 않는 사람이 보고도 저 태그가 무엇을 의미하는지 알아볼 수 있도록 하는 태그
종류
-
<header>
: 페이지에서 머릿말 대부분 페이지의 맨위나 왼쪽에 위치해서 로고나 메뉴 등이 들어간다. -
<nav>
: 네비게이션 역할을 하는 태그로 어디든 사용 가능하나<header>안에 사용하여 홈페이지의 공통 영역으로 지정하는 경우가 많다. -
<section>
: 주로 컨텐츠 영역을 나타낼 때 사용한다. 컨텐츠를 주제별로 묶어서 사용한다.
<div class="wrapper">의 개념과 비슷하다. -
<article>
: 실질적인 내용이 들어가야 하는 영역으로 사용된다. -
<aside>
: 배너, 사이드바와 같은 영역에 많이 사용된다. -
<iframe>
: 외부문서를 삽입할 때 사용된다. -
<address>
: 주로<footer>안에 사용되고 사이트의 제작자 정보, 연락처를 적을 영역에 사용된다. -
<footer>
: 페이지의 하단 영역에 사용된다.그 외에
<detail>,<time>,<main>등이 있다.
질문
img tag는 의미가 있는 시맨틱 태그로 컴퓨터가 이해할 수 있고 alt 속성으로 에러 발생 시 이미지가 깨져도 어떠한 이미지인지 알 수 있지만
background-image는 의미있는 태그가 아닌 그냥 속성으로 에러 발생 시 어떠한 이미지인지 어떠한 정보도 알 수 없다. 또 컴퓨터는 이 태그가 어떤 이미지인지 알 수 없다.
결론은 사용자를 위한 에러 발생 시 이미지가 깨져도 어떠한 이미지인지 정보가 들어가야하고 조금 더 검색엔진에 의해 웹이 잘 노출되도록 하기 위해서는 시맨틱 태그인 img tag를 사용하고, 그저 웹디자인과 같은 미적요소로 이미지를 보여주기 위해서는 background-image를 사용하는 게 좋다!
