- semantic web 이란 무엇인가?
- semantic tag 이란 무엇인가?
우리는 궁금하거나 찾고 싶은 정보가 있을 때 구글링을 합니다. 검색엔진 사이트를 이용하여 각자가 원하는 정보를 빠르게 취득하죠.
이 검색 엔진은 로봇(Robot)이라는 프로그램을 통해 실시간으로 웹사이트 정보를 수집(크롤링)합니다. 그리고 이용자가 검색할 만한 keyword를 미리 예상하여 검색 keyword에 대응하는 index를 만들어주기도 합니다.
즉, 해당 웹사이트의 html 코드를 로봇(Robot)이 크롤링하고 이 정보를 통해서 index를 생성하는 겁니다. 검색엔진은 html 코드만으로 의도를 해석한뒤 움직입니다. html 문서는 컴퓨터가 이해할 수 있는 메타데이터(metadata)와 이해할 수 없는 자연어가 존재합니다.
1. Semantic Web
그럼 semantic web은 무엇일까요? semantic web은 web에 존재하는 수 많은 웹페이지들에 이 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 web page를 '의미'와 '관련성'을 가지는 거대한 데이터베이스로 구축하고자 하는 것입니다.
그러니까, 기존의 웹페이지들에 컴퓨터가 이해할 수 있는 메타데이터(semantic metadata)를 사용함으로서 보다 효율적인 데이터베이스를 구축하자는 발상인 것입니다. semantic web의 궁극적인 목표는 컴퓨터가 우리를 대신하여 보다 효율적으로 정보를 조작할 수 있도록 하는 것이고요.
그리고 바로 이 semantic web을 실현시키기 위해 필요한게 semantic tag 입니다.
2. Semantic Tag
<h1> : 제목 중 가장 상위 레벨 태그
<div> : 아무런 정보가 없는 태그여기 h1과 div 태그가 있습니다. 검색엔진이 index에 포함시킬 확률이 더 높은 것은 무엇일까요? 이러저러한 목적과 정보가 담긴 h1 태그가 선택될 확률이 더 높겠죠. 컴퓨터 뿐만이 아닙니다. 코드를 확인하는 사람도 이 h1 안에 있는 콘텐츠가 제목 요소라는 것을 쉽게 이해할 수 있습니다.
semantic tag는 코드의 가독성을 높이고, 유지보수를 보다 효율적으로 만듭니다. 브라우저, 검색엔진, 개발자 등등 모두에게 코드의 의도 및 의미를 명확히 설명해줍니다. semantic tag를 해석한 데이터를 활용하여 semantig web을 실현시킬 수 있습니다.
참고로 html의 요소에는 semantic tag 뿐만 아니라, non-semantic tag도 있습니다.
non-semantic tag
: 아무 것도 지칭하지 않으며, 의미가 없는 tag.
<div> <span>semantic tag
: 제목, 문단, 내비게이션 등 이름 자체에 지칭하는 뜻과 의미가 있는 tag.
<header> <main> <footer> <address>
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. img태그를 사용하는 것과 div 태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
<img> tag
~ semantic tag ~
1. 접근성 : 브라우저, 검색엔진, 개발자 등등 모두에게 코드의 의도 및 의미를 명확히 설명해주며, 이미지를 대체할 수 있는 대체 텍스트나, 속성 같은 attritubes를 사용함으로서 검색엔진의 접근성을 높인다.
2. 큰 배경이미지를 다운로드할 때 : html이 구문 분석이 되자마자 요청이 이루어지므로 속도가 빠르다.
<div> css에서 적용하는 background-image 선언
~ non-semantic tag ~
1. 접근성 : 이미지를 대체할 수 있는 텍스트나 속성 같은 attritubes를 사용할 수 없다. 태그 자체에 목적과 정보가 담기지 않았기 때문에 컴퓨터가 해석할 수 없으며 검색엔진이 index를 생성하는데 어려워진다.
2. 큰 배경이미지를 다운로드 할 때 : 브라우저가 css 파일의 구문을 분석하고 이미지를 풀다운로드 하는데 시간이 더 오래 걸리며, 이는 전체 페이지 로드를 지연되게 만든다.
3. 이미지에 적용하는 효과 값이 많을 경우에 고려되는 방법이다. 순전히 접근성과 효율성을 따져보았을 때, html에 img 태그를 선언하는 것을 권장합니다. 다만, 접근성과 성능을 무시하고 오직 심미적인 효과를 우선시하여 이미지에 변화를 많이 줘야하는 경우라면 div 태그에 background-image를 선언하는 것을 고려해봐도 좋을 것입니다.
