Semantic Web & Semantic Tag

isTuna·2020년 12월 14일
2

Semantic Web & Semantic Tag

Semantic Web이라는 개념은 2001년도에 팀 버너스리에 의해 제시되었다고 한다. 기존에는 검색엔진이 매일 전세계의 웹사이트에서 정보를 수집하고, 그속에서 필요한 정보만을 가져오려고 할때 너무 많은 불필요한 정보가 함께 돌출되었다고 한다. 그 이유를 아래 예를 보면서 함께 이해해보자.

예시

<font size="6"><b>Tree<b></font>
  
<h1>Tree</h1>

위의 두 코드 다 Treecontent이다. 하지만 우리는 위의 코드가 <b> Tag를 쓰고 font size6인 것으로 중요한 키워드라는 것을 유추할 수 있지만, 컴퓨터는 그것을 유추할 수 없습니다.

그 이유로 아래의 <h1> 같은 Semantic Tag들이 생겨났습니다. <h1>header 중에서도 가장 높은 중요도의 Tag라는 것을 컴퓨터도 인식할 수 있습니다.

Semantic 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> 태그를 사용할 것 같습니다.


profile
청소연구소 개발자 (2021. 05~ )

0개의 댓글