Semantic Web
Semantic Tag
Semantic Web
시맨틱 웹(Semantic Web) : 의미론적 웹
시맨틱 웹이란, 간단히 말하자면 의미를 가지고 있는 웹이라고 할 수 있습니다. 기존의 웹은 기계가 읽을 수 없는 정보의 형태를 가지고 있었다면, 시맨틱 웹은 기계가 읽을 수 있는 유의미한 정보의 형태를 가지고 있습니다.
시맨틱 웹의 등장은,기존의 잡다한 데이터의 집합의 불과했던 웹을 👉의미와 관련성을 지는 거대한 데이터베이스로 바꾸게 해준 시작인 셈입니다.
Semantic Tag
시맨틱 태그(Semantic tag): 의미를 가지는 태그
시맨틱 웹에서 사람과 기계가 읽고, 이해할 수 있는 형태의 정보로 이뤄진 태그입니다. HTML 문법을 아예 모르는 사람들이 봐도 웹이 어떻게 구성되어있는지 이해할 수 있도록 하는 태그이죠. 전체 HTML 구조와 컨텐츠의 의미를 명확히 정의해줘, 검색 엔진에서 검색하는데 더 용이하게 만들어주기도 합니다.
✅ 시맨틱 태그의 종류
<header>: 페이지나 일부분의 머리말(헤더)부분을 지정<main>: 페이지의 가장 중요한 메인 부분을 지정<nav>: 페이지의 네비게이션 부분을 지정<section>: 페이지의 일부분을 지정<footer>: 페이지나 일부분의 꼬리말(푸더)부분을 지정<article>: 여러 문단을 묶는 태그, 독립적인 콘텐츠를 정의할 때 사용<aside>: 콘텐츠나 페이지의 외곽에 위치한 요소들을 묶는 태그, 보통 퀵메뉴나 스크롤탑 버튼등에 사용<details>: 사용자가 보거나 숨길 수 있는 세부 콘텐츠를 정의할 때 사용<summary>: 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄<figure>: 사진, 다이어그램 등과 같은 부가적인 요소를 정의<details>: 부모요소인 details 요소의 내용에 대한 요약이나 캡션등을 나타냄
💡 왜 시맨틱 웹과 태그가 중요한 것인가?
시맨틱 웹은 컴퓨터가 사람을 대신해 정보를 읽고, 이해하고 가공해 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 지닌 차세대 지능형 웹입니다. 이해하기 쉬운 의미와 정보를 지닌 웹일 수록 사용자들이 정보를 얻고자 할 때, 더욱 쉽게 내가 원하는 정보에 접근할 수 있습니다.
간단히 말하자면, 👉검색 엔진을 통해 검색할 때, 찾고자 하는 정보를 더 쉽고 빠르고 정확하게 접근👈 할 수 있게 도와주기 때문!
그래서 img 태그와 CSS background-img 속성의 차이점은?
<img>는 의미를 가지고 있는 시맨틱 태그로, 에러가 발생해도 alt속성으로 어떤 이미지인지 알 수 있습니다. 인물 사진이나, 로고 혹은 다이어그램 등 이미지가 웹 컨텐츠의 한 부분이라면, <img>를 사용하는 것이 좋습니다.
반면, background-image 는 의미를 가진 시맨틱 태그가 아닌 속성으로 어떠한 정보나 의미를 가지고 있지 않습니다. 결국 컴퓨터는 이 태그가 어떤 이미지인지 읽을 수 없는 것이죠.
따라서 이미지에 정보를 담고, 검색 엔진에 의해 웹이 잘 노출되도록 하기 위해서는 <img>를 사용하는 것이 좋습니다. background-image 는 의미를 담지않는, 디자인적인 요소를 넣을 때 활용하는 것이 좋습니다.
