Semantic Web과 Semantic Tag

손종일·2020년 8월 19일
0

HTML/CSS

목록 보기
8/8

Semantic Web

시맨틱 웹(Semantic Web)은 "의미론적인 웹"이라는 뜻으로, 기계가 이해할 수 있는 형태로 제작된 웹을 의미합니다.

Semantic Tag

시맨틱 태그(Semantic Tag)는 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명한다.
시맨틱 태그를 사용하면 유저가 웹에서 검색을 했을 때 웹페이지의 해당 코드를 찾아 그 정보를 기반으로 의미있는 내용이 출력되도록 도와준다.
이렇게 웹 문서를 구조화하여 시맨틱 태그를 사용한 웹을 시맨틱 웹이라고 한다.

그럼 Semantic Tag가 아닌것은 무엇이고, Semantic Tag는 어떤 것 일까?

- non-semantic elements : <div>, <span>
- semantic elements : <article>, <aside>, <footer>, <header> ..

아래와 사진처럼 HTML5에서는 Semantic Tag(시맨틱 태그)를 사용하여 코드의 가독성을 높이고 의미를 명확하게 해주는 추가되었다. 검색 엔진이 데이터를 효율적으로 추출하여 더욱 의미있는 검색결과를 만들어 내기 위해서는 태그에 의미를 담아 검색엔진이 이해할 수 있도록 돕는것이 좋은 방법일 수 있다.

<nav> : 네비게이션을 의미한다.
<aside> : 사이드에 위치하는 공간을 의미한다.
<section> : 본문의 여러 내용(artivle)을 포함하는 공간을 의미한다.
<article> : 본문의 주 내용이 들어가는 공간을 의미한다.
<footer> : 문서 또는 섹션의 바닥글을 지정한다.

profile
Allday

0개의 댓글