HTML과 CSS 기초를 복습했다.
Semantic Web, Semantic Tags에 대해서 알아보자

Semantic Web : 의미를 가지는 웹

간단한게 말하면 문서의 의미에 맞게 구성된 웹이다.

semantic web 의 배경

수많은 웹페이지가 생겨나면서 우리에게 필요하고 유익한 정보들도 많지만, 불필요한 정보들도 넘쳐나게 되었고, 이렇게 되면 사람들이 일일이 수 많은 정보들 가운데에 자신이 필요한 정보를 찾아나서야 하는 문제점이 생기게 됩니다.

이러한 문제점을 해결하기 위한 방법이 "시맨틱 웹"이라는 개념이었고, 웹의 창시자 '팀 버너스 리(Tim Berners-Lee)'가 제안했어요.

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

Semantic Tag

과거 무분별한 태그의 사용으로 인해 정보를 찾기 위해 사람이 직접 개입해야 하는 비효율적인 시스템을 개선하고자, 의미있는 태그들을 개발하기 시작했다.

non-semantic Tag 와 semantic Tag를 비교해보면

• div, span 등 이들 태그는 content에 대한 어떤 설명도 없지만
• 반면에 header, article 등 태그의 이름이 content의 의미를 설명하고 있다는 것을 알수 있다.

시맨틱 태그는 이처럼 의미를 브라우저와 개발자 모두에게 전달할 수 있다.
HTML5에서는 Semantic Tag(시맨틱 태그)를 사용하여 코드의 가독성을 높이고 의미를 명확하게 해주는 장점이 있다.

👉 content의 의미를 설명해주면서 웹 검색 엔진에서도 검색을 용이하게 한다

Semantic Tag 사례

img 태그와 div backgroung-image를 사용하는 것의 차이

<img>

• img 태그를 사용하면 alt 속성에 문자열로 내용을 설명할수 있다.
• alt속성에 설명한 내용은 meta정보가 되어 검색 엔진에서 인식하여 구글링을 용이하게 해주며 검색 시 노출 될수 있도록 한다.

div backgroung-image

반면에 background-image 속성에 있는 이미지는 구글에서 크롤링 하거나 색인을 생성하지 않고, 이미지에 대한 정보를 가지고 있지 않다.

👉 해당 이미지가 사용자의 검색에 노출되려면 img태그를 이용하는 것이 좋다.
👉 이미지에 대한 설명이나 내용이 중요한 것이 아니라 단순한 사이트의 꾸밈이나 장식이라면 background-image를 사용한다.

프론트엔드 개발자에게 마크업 구조를 시맨틱하게 짜는 것은 매우 중요하다!

• 디자인 시안과 똑같이 마크업을 짜는것도 중요하지만,단순히 시각적 형태로만 볼 것이 아닌, 데이터를 보여주어야 함!

• 의미론적으로 마크업 구조를 짜야 하고 태그들을 적절한 상황에 맞게 사용해야 누가 보아도 이해하기 쉽다.

** 마크업 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

HTML5에서의 시맨틱 요소

-<article> 내용을 정의한다.
-<aside> 페이지 콘텐츠를 제외한 콘텐츠를 정의한다.링크, 광고, 사이드바 표시 등.
-<details> 사용자가 보거나 숨길 수있는 추가 세부 정보를 정의한다.
-<figcaption> <figure> 요소에 대한 캡션을 정의한다.
-<figure> 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함 된 콘텐츠를 지정한다.
-<footer> 문서 또는 섹션의 바닥글을 지정한다. 주로 저작권, 연락처 정보 등 내용이 삽입되며 header, section, article 등 다른 레이아웃 사용가능.
-<header> 문서나 섹션의 머릿글을 지정한다. 사이트 맨 위쪽이나 왼쪽에 사용하며 헤더 안에 -<form> 태그를 이용, 검색창을 넣거나 <nav>태그를 이용해 사이트메뉴를 넣는다.
-<mark> 강조표시된 텍스트를 정의한다. 형광펜을 칠한 것처럼 노랗게 칠해진다.
-<nav> 네비게이션 링크를 정의한다. 같은 사이트내의 링크나 다른 사이트로의 링크들의 모음이다.
-<section> : <header>, <footer>와 함께 문서의 구역을 정의한다.
-<section>안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣는다.
-<summary> :<details> 요소를 위한 눈에 보이는 제목을 정의한다.
-<time> 날짜/시간을 정의한다.