TIL07 | HTML Semantic Web & Semantic Tags

📑️ Semantic Web

등장배경

웹 상에 축척된 정보가 방대해 짐.

➡️ 엄청난 양의 불필요한 정보들이 생김.

➡️ 컴퓨터가 필요한 정보를 추출, 해석, 가공할 수 있는 방법이 없어 모든 정보를 사용자가 직접 개입해서 처리해야 했음.

이런 문제를 해결하고자 팀 버너스리등에 의해 Semantic Web이라는 개념이 제시됐다.

정의

"의미론적인 웹" 이라는 뜻으로, 컴퓨터가 이해할 수 있는 잘 정의된 의미로 만들자는 것이다.

이를 기반으로 의미정 상호운영성, 다양한 정보자원의 처리 자동화, 데이터 통합 및 재사용을 컴퓨터가 스스로 수행하여 인간과 컴퓨터 모두 잘 이해할 수 있는 웹을 만드는 것이 목표이다.

 

📑️ Semantic Tags

"의미론적인 태그" 라는 뜻으로 HTML5에서는 웹 페이지에서 통상 많이 사용하는 구조에 의미를 부여하기 위해서 의미론적 태그(semantic element)를 새롭게 정의했다.

Semantic Tags와 Non-Semantic Tag를 비교해보고 왜 시맨틱 태그를 써야하는지 그 중요성에 대해서 알아보자.

 

Non-semantic & Semantic tags

:: non-semantic tags

div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 없다.

:: semantic tags

header

• 머리말(헤더)를 의미.
• 문서의 제목, 로고, 작성자, 작성일과 같은 메타 정보를 배치한다.

nav

• 내비게이터를 의미.
• 페이지 이동 등의 주요 메뉴가 배치된다.

main

• 본문을 의미.

• 콘텐츠 내용 전체를 감싸며, 문서에서 오직 한 번만 사용한다.

section

• 본문의 여러 내용(article)을 포함하는 공간.

article

• 본문의 주내용이 들어가는 공간.

aside div-soup-vs-semantic-html

• 본문 옆에 구성하는 공간.
• 보통 본문과 직접적인 관련 없는 내용이 배치되며 카테고리 목록이나 태그 등이 이에 해당한다.

footer

• 꼬리말(푸터)를 의미.
• 회사 정보나 소유자의 소셜미디어 정보, 약관 등 문서와 관련이 적은 부가정보를 배치한다.

 

📑️ Semantic Tag가 중요한 이유

✨️ 유지보수성(Maintainability)

코드의 가독성을 높여 유지보수에 용이하다.

✨️ 웹 접근성(Web Accessibility)

웹페이지에 일반적인 방법으로 접근할 수 없는 사람들, 특히 시각장애인의 경우는 볼 수 없기 때문에 스크린 리더와 같이 문서를 소리로 바꿔주는 특수한 장치를 이용해야 한다. 따라서 영역과 기능에 따라 적절한 태그를 사용해 웹 접근성을 높일 수 있다.

✨️ 검색 엔진 최적화(SEO)

시맨틱 요소는 검색 엔진 최적화(SEO)에도 영향을 준다.

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

그리고 검색 사이트 이용자가 검색할만한 키워드를 미리 예상하여 검색 키워드에 대응하는 인덱스를 만든다 (인덱싱).

인덱스를 생성할 때 사용되는 정보가 웹 사이트의 HTML코드이고 이때 검색 엔진은 HTML의 Semantic element를 해석하게 된다.

<h1>Title입니다</h1>

🖕️ 검색엔진은 대체로 h1 태그 내의 content가 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높아진다.

 

검색 엔진 최적화(SEO)는 웹 페이지 검색 엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말한다. 따라서 Semantic tags를 사용하면 검색엔진이 자료를 크롤링하고 인덱싱할 때 인덱스에 포함시킬 확률이 높아지기 때문에 검색 엔진 최적화(SEO) 작업이 좀 더 효율적으로 이루어 질 수 있다.

 

🤹‍♀️️ img를 넣는 두가지 방법 (Semantic vs Non-Semantic)

HTML에서 <img>태그를 사용할 때

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">

• semantic tag 👉️ 검색엔진을 통한 검색
• alt 속성으로 이미지 노출이 실패하더라도 텍스트로 대신하면 결과 리턴

 

CSS에서 이미지 추가 (background-image 속성)

.bg-img {
  background-image: url("이미지 주소 😋️");
}

• non-semantic tag 👉️ 검색엔진할 때 크롤링이나 색인되지 않아 검색결과 노출이 상대적으로 불리
• 텍스트로 이미지를 대체 불가

 

🌈️ QnA

사이트에 이미지를 넣는 방법은 두 가지가 있습니다.

<img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.

두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요.

답변

웹 접근성, 검색엔진 최적화(SEO)를 고려해야 하는 의미있는 이미지라면 시맨틱 태그를 사용하여

이미지 노출이 실패하더라도 텍스트로 대체하여 보여주거나 노출도를 높일 수 있다.

반면 단순히 블로그 배경화면이나 내용과 무관한 미적 요소의 이미지라면 Non시맨틱 태그를 사용하면 될 듯하다.

 

참고 사이트

poiemaweb.com

[HTML 바로 알기] Semantic Web을 위한 Semantic Elements