HTML 시맨틱 웹

seul_velog·2021년 11월 10일

HTML

목록 보기

2/5

Semantic Web

시맨틱 웹이란?

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

시맨틱 웹은 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

쉽게말해, 시맨틱 웹은 기계가 사람을 대신해서 웹 페이지의 정보를 이해하고, 우리에게 필요한 정보만을 보여주거나, 정보를 우리가 필요로 하는 형태로 가공해주는 것을 의미한다.
메타데이터(Metadata): 데이터에 관한 구조화된 데이터로, 다른 데이터를 설명해 주는 데이터.

크롤링과 인덱싱 & 시맨틱 요소

검색엔진은 로봇(Robot)이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집한다. (이것을 크롤링이라 하며 검색엔진의 크롤러가 이를 수행한다.)

검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스(색인, 목록)를 만들어 둔다.(이것을 인덱싱이라 하며 검색엔진의 인덱서가 이를 수행한다.)

인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다. 즉, 검색 엔진은 HTML 코드 만으로 그 의미를 인지하여야 하는데 이때 시맨틱 요소(Semantic element)를 해석하게 된다.

크롤러: 웹상의 다양한 정보를 자동으로 검색하고 색인하기 위해 검색 엔진을 운영하는 사이트에서 사용하는 소프트웨어.
인덱서: 입력된 문서에 대해서 자동적으로 색인(소장 기록의 정보를 검색할 수 있도록 추출한 용어 리스트)을 작성하는 프로그램.

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

위의 코드를 보면

1행과 2행 모두 브라우저에서 동일한 외형을 같는데, 이유는 h1 태그의 디폴트 스타일이 1행과 같기 때문이다.
1행의 요소는 의미론적으로 어떤 의미도 갖고 있지 않으며, 폰트 스타일을 지정하는 메타데이터만을 브라우저에게 알리고있다.
2행의 요소는 header 중 가장 상위 레벨이라는 의미<h1>까지 내포하고 있으므로, 개발자가 의도한 요소의 의미까지 명확히 포함하고있다. (이는 코드의 가독성을 높이고, 유지보수를 쉽게 할 수 있음.)

시맨틱 태그는 왜 필요할까?

시맨틱 태그: <body>안에서 영역을 구분해주는 태그들

'시맨틱 요소'로 구성되어 있는 웹페이지는 검색엔진에 보다 의미론적으로 문서 정보를 전달할 수 있고, 검색엔진 또한 시맨틱 요소를 이용하여 보다 효과적인 크롤링과 인덱싱이 가능하다.
즉, '시맨틱 태그'는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 함으로써, 컴퓨터가 HTML요소의 의미를 보다 명확히 해석하고 그 데이터를 활용할 수 있는 시맨틱 웹이 실현되도록 돕는 역할을 한다.

시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목, 메뉴, 본문과 같은 내용인지 쉽게 알 수 있고, 동시에 웹사이트 사용자에게 보다 더 정확한 내용을 전달하는 것이 가능하다.
문서 구조가 정확히 나뉘어지므로 PC나 모바일의 웹 브라우저와 여러 스마트기기의 다양한 화면에서 웹 문서를 표현하기에도 쉽다고 한다. 😀

non-semantic요소와 semantic요소

non-semantic 요소
: div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.

semantic 요소
: form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명한다,

Semantic Tag

주요시맨틱 태그

<header> 헤더 영역을 나타내는 태그
<nav> 내비게이션 영역을 나타내는 태그
<main> 핵심 콘텐츠를 담는 태그
<article> 독립적인 콘텐츠를 담는 태그
<section> 콘텐츠 영역을 나타내는 태그
<aside> 사이드 바 영역을 나타내는 태그
<footer> 푸터 영역을 나타내는 태그

🔍 사이트에 이미지를 넣는 방법 두 가지가 있다. 어떤 것을 사용할까?

(1) img 태그를 사용하는 것

img 의 주소가 잘못되었거나 해당 위치의 서버에 문제가 있다면 이미지를 못 불러올 수도 있기 때문에 이미지의 대안으로써 alt속성을 이용해 대체할 수 있다.
시각장애인은 이미지를 볼 수 없기 때문에 alt속성을 스크린리더로 들을 수 있다.
이미지를 제대로 이해하지 못하는 검색엔진 역시 이미지를 이 alt속성으로 받아들인다. 즉 검색엔진최적화(SEO)에도 효율적이다.

(2)div 태그에 background-image속성을 추가하는 것.

이미지에 오류가 생기면 img tag의 alt속성이 없어서 설명이 불가능하다. 때문에 실질적으로 정보를 주는 것이 아닌, 배경이미지나 꾸미는 용도의 이미지일 경우 alt의 속성이 없는 div태그를 사용하여 이미지를 넣는다. 무의미한 내용으로써 검색엔진 역시 읽혀질 필요가 없을 경우 쓸 수 있다.

✍️ 따라서, img 태그는 이미지가 사용자에게 컨텐츠 이해에 도움이되며 검색 최적화에 필요성이 요구되면 사용하는 것이 좋고, 단순히 스타일을 주고 싶을 때 CSS background-image 속성을 추가하는 것이 좋을 수 있다.

같은 예로, <b> 태그 대신 <strong> 태그를 사용하는 것이 웹표준을 준수하는 방법일 것이다. 🧐