Web | Semantic Web

Semantic Web

초기의 Web은 정보를 시각화하여 사용자에게 보여주었지만 이를 server 나 computer가 이해할 수 없었다. 문단의 맨 위에 굵은 글씨로 쓰인 것이 제목이라는 것을 사용자는 알 수 있지만 machine은 단지 굵은 글씨로만 인식하기 때문이다.
시맨틱 요소(semantic element)를 사용하면 web content에 의미를 부여할 수 있고 이를 통해 서버나 컴퓨터 역시 data의 의미를 이해할 수 있게 된다.
(div 태그 대신 header, nav, p 태그 등을 사용하면 사용자가 개입하지 않아도 어디가 제목이고 네비게이션인지, 문단인지 구분이 가능하다.)
시맨틱 웹은 web of document 를 web of data로 바꾸었다.

웹 접근성

영역과 기능에 따라 적정한 시맨틱 태그를 사용하지 않고 단순히 div 와 span 만을 사용하여도 충분히 웹페이지를 구성할 수 있다. 위에서 언급했듯이 이렇게 작성하면 기계는 물론이고, 일반적으로 웹페이지에 접근할 수 없는 사람들 특히 시각장애인의 경우 제대로 된 웹경험을 할 수 없다. 개발자라면 이러한 사용자를 위해서라도 웹 접근성 또한 간과해서는 안된다.

SEO (검색엔진 최적화)

시맨틱 요소는 웹 접근성 뿐만 아니라 검색엔진 최적화(SEO : Search Engine Optimization)에도 영향을 미친다. 관련 키워드로 검색했을 때 검색 결과 상위에 문서를 노출하려면 SEO 최적화는 필수다. 검색엔진 역시 사람이 직접 수행하지 않고 sitemap.xml, robots.txt 파일을 이용하여 전세계적으로 공개된 웹을 수집(Crawling, 크롤링)하고 분석(또는 색인, Indexing)하기 때문이다.
따라서 div와 span으로만 작성된 문서는 어떤 부분이 중요한 정보인지 구분할 수 없기에 검색 키워드와 얼마나 일치하는 정보를 담고 있는지 분석할 수 없고 당연히 검색결과 상위에 노출될 수도 없다. 검색 엔진마다 알고리즘이 상이하기 때문에 무엇이 정답이라고는 할 수 없지만, 영역 구분이 확실한 문서가 더 상위에 노출될 것이라는 것은 지극히 상식적이다.

주요 Semantic elements

<header>, <footer>

<header>에는 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보를 배치한다.
<footer>에는 회사 정보나 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보를 배치한다.

<nav>

네비게이터(navigator)를 의미한다. 사이트 전체 흐름을 제어하는 기능을 담당한다. 보통 페이지 이동 등의 주요 메뉴가 바 형태로 배치되는데, 구조에 따라 상단이나 측면에 위치하기도 한다. 또한 전체 페이지 흐름을 담당하기에 문서 변화와 관계없이 고정된 위치에서 항상 노출되는 경우도 많다.

<main>, <article>, <section>

본문 영역을 나눌 때 사용되는 태그들이다.
<main> 문서에서 오직 한 번만 사용한다. 본문을 뜻하며 콘텐츠 내용 전체를 감싼다. <article>, <section>은 비교적 자유롭게 사용되며 <article>은 내용을 나누고, <section>은 형식으로 나눈다.

<aside>

주로 본문 옆에 구성하고 본문과 직접적인 관련 없는 내용이 보통 배치된다. 블로그에서 측면의 카테고리 목록이나 태그 목록 등이 포함된 영역이 이에 해당한다.
본문에서도 본문 내용과 상관없는 부가정보, 주석이나 각주 등을 나타내기도 한다.

<details> , <summary>

대부분 같이 사용되고 모바일에서 공지사항이나 FAQ 같은 페이지처럼 상세 내용이 확장되는 UI에서 흔히 볼 수 있다.

<figure> , <figcaption>

<figure>는 독립적인 콘텐츠를 의미하고 <figcaption>을 사용해 부가설명을 붙일 수 있다. 주로 인용문, 이미지, 소스코드에 설명을 쓸 때 사용한다.

Assignment

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다.
태그를 사용하는 것과 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

해당 이미지가 현재 페이지에서 얼마나 중요한지를 따져봐야한다. <img> 태그는 alt 속성으로 문자열을 전달하여 이미지가 랜더링 되지 못하거나 검색엔진에서 크롤링을 할 때 해당 이미지에 대한 정보를 전달할 수 있다. 반면 <div>태그에 background-image 속성을 추가하는 것은 이미지에 대한 어떤 정보도 전달할 수 없고 이미지가 랜더링 되지 않거나 저품질로 랜더링 될 경우 어떤 이미지인지 사용자에게 보여주기 어렵다.
따라서 현재 페이지에서 반드시 출력되어야 하는 이미지라면 <img> 태그를 사용하고, 단순 페이지를 꾸미기 위한 이미지나 배경이라면 <div> 태그에 background-image 속성을 추가해도 무방할 것이다.

출처
[HTML 바로 알기] Semantic Web을 위한 Semantic Elements (https://blueshw.github.io/2020/05/09/know-html-semantic-elements/)