Semantic-Web과 SemanticTags의 차이

티스토리 뷰

HTML CSS

Semantic-Web과 SemanticTags의 차이

choi95 2021. 10. 5. 17:50

예시

다음과 같이 각기 다른 두 개의 태그인 div와 img를 사용하여 배경 이미지를 랜더링하였다.

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- img태그에 src 어트리뷰트를 사용한 경우 --> <img class="js" alt="js" src="https://www.w3schools.com/whatis/img_js.png" style="width: 100px;"> <!-- div태그 내 style 속성에 background-url를 사용한 경우 --> <div style="width: 100px;"> <img src="https://www.w3schools.com/whatis/img_js.png" alt="bg-img" style="width: 100%;"> </div> <script src="index.js"></script> </body> </html>

두 태그를 사용하였을 경우에 동일하게 화면에 랜더링되는 결과를 확인할 수 있다.

그렇다면 배경 이미지를 지정할 때 두 개의 태그 중에 아무 태그나 무분별하게 사용해도 괜찮을 것인가?
이와 관련되어 궁금증이 생겨 관련 사항에 대해서 검색해 보았고 마크업 언어에서 다음과 같이 중요한 개념이 선제됨을 알 수 있었다.

Semantic-Web과 SemanticTags의 차이

시맨틱 웹(Semantic-Web)

World-wide-web을 창안한 팀 버너스리가 제안한 차세대 웹 기술
웹 상에 존재하는 정보를 사람 뿐만 아니라 기계가 의미(Semantic)를 파악 및 사용자의 요구에 적합한 결과를 서비스
부여받은 자동화된 프로그램이 사람을 대신해 웹상의 정보를 추출 및 새로운 정보를 가공

시맨틱 웹 특성 중 3번째 사항을 유의 있게 볼 필요가 있다.

SEO(검색엔진 최적화: Search Engine Optimization)같은 마케팅 도구를 사용하여 검색 엔진이 본인의 웹 사이트를 검색하기 알맞은 구조로 웹 사이트를 조정한다.

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전 세계의 웹 사이트 정보를 수집(크롤링)한다.
그리고 검색 사이트 사용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인)을 생성한다.

인덱스르 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 이는 HTML의 마크업 언어이다.
즉, 검색 엔진은 HTML 코드만으로 그 의미를 인지해야 하는데 이때 시맨틱 요소(Semantic Element)를 해석한다.

div태그와 같이 의미론적으로 어떤 것도 함유하지 않는 태그는 의도가 명확하지 않기 때문에 요소에 지정된 background-url와 같은 메타 데이터(meta-data)만을 브라우저에게 송신하여 의미론적인 문서 정보를 전달하는 데에 한계가 있다.

반면에 img태그는 그 자체의 함유하는 의미를 브라우저, 검색엔진, 개발자 모두에게 명확히 설명하는 역할을 하여 이 데이터를 활용할 수 있는 시맨틱 웹을 구축할 수 있다.

저작자표시

'HTML CSS' 카테고리의 다른 글

position 속성 - relative, absolute, fixed (0)	2021.10.06
float 속성을 이용하여 header-menu 위치 조정 (0)	2021.10.06
이벤트 제어(pointer-events) 속성을 통해 팝업창 비활성화 (0)	2021.07.19
동적 Tabs (0)	2021.07.07
html, body 높이값 초기화 (0)	2021.05.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

GitHub

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

choi95의 TIL📝

티스토리 뷰

Semantic-Web과 SemanticTags의 차이

예시

Semantic-Web과 SemanticTags의 차이

'HTML CSS' 카테고리의 다른 글

티스토리툴바