Semantic Web
이라는 개념은 2001년도에 팀 버너스리에 의해 제시되었다고 한다. 기존에는 검색엔진이 매일 전세계의 웹사이트에서 정보를 수집하고, 그속에서 필요한 정보만을 가져오려고 할때 너무 많은 불필요한 정보가 함께 돌출되었다고 한다. 그 이유를 아래 예를 보면서 함께 이해해보자.
예시
<font size="6"><b>Tree<b></font>
<h1>Tree</h1>
위의 두 코드 다 Tree
가 content
이다. 하지만 우리는 위의 코드가 <b>
Tag를 쓰고 font
size
가 6
인 것으로 중요한 키워드라는 것을 유추할 수 있지만, 컴퓨터는 그것을 유추할 수 없습니다.
그 이유로 아래의 <h1>
같은 Semantic Tag
들이 생겨났습니다. <h1>
은 header
중에서도 가장 높은 중요도의 Tag라는 것을 컴퓨터도 인식할 수 있습니다.
<header>
<section>
<footer>
<aside>
<nav>
<figure>
<main>
<mark>
<article>
<details>
위와 같은 Semantic Tag
들의 장점으로는 가독성이 좋다는 점도 있습니다. 사람이 HTML
파일을 분석할 때도 Semantic Tag
로 되어있는게 훨씬 이해가 쉽습니다.
Non-semantic
div
span
p
Semantic
form
img
table
Q. 사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
<img>
태그를 사용하는 것과<div>
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.
A. <img>
태그를 사용한 경우에는 이미지를 불러오는데 실패하면 alt
속성으로 텍스트로 대체할 수 있고, <img>
태그가 html
파일 위에 있어 수정이 용이합니다. 또한 Semantic
태그로 검색할 때 명확하게 의미를 알수 있습니다.
하지만 <div>
태그를 사용한 경우에는 css
파일에서 수정해야합니다. 또한 alt
와 같은 대응책이 없습니다. <div>
태그는 Non-semantic
태그로 의미를 유추할 수 없습니다.
보통의 경우에는 <img>
태그를 사용하고 이미지의 일부만 보여주고싶을 때는 <div>
태그를 사용할 것 같습니다.