시맨틱 웹이란?
위키피디아에서 시맨틱웹을 아래와 같이 설명한다.
'시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.'
다시 말해, 여러 형태의 정보와 자원의 의미를 사람이 아닌 컴퓨터가 처리할 수 있게 해주는 기술이다.
검색엔진최적화(SEO)
seo는 웹페이지의 자료를 수집해서 검색에 상위 노출 될 수 있게 한다. 검색에서 상위 노출된 웹페이지는 당연하게도 마케팅과도 큰 연관이 있기 때문에 기업의 입장에서는 중요한 마케팅 방법이다.
이때, 엔진은 시맨틱요소를 해석하게 된다고 한다.
당연히, 개발자도 기업의 일원으로서 자사의 웹페이지의 상위 노출을 고민해야 할 것이다!
(https://poiemaweb.com/html5-semantic-web)
Semantic Tag
html5의 주요 시맨틱 태그를 알아보자
- header
- article
- aside
- footer
- main
- details
- nav
- summary
- time
- mark
- main
- figure
- figcaption
header
특정 섹션이나 문서의 머릿글을 지정한다.
article
내용을 지정한다. 뉴스, 기사, 게시판 등이 있다.
aside
문서의 주요 내용과 간접적인 내용을 사이드에 배치할 수 있다.
footer
문서나 섹션의 바닥글이다. 주로 저작권, 연락처 등의 정보를 지정한다.
main
문서의 주 내용이다
details
사용자가 노출하거나 숨길 수 있는 자세한 정보를 지정한다.
nav
현재 페이지 내 다른 페이지로 이동할 수 있는 링크이다 주로 목차, 메뉴 등에 쓰인다.
summary
details에 대한 요약을 지정한다. summary와 details와 주로 같이 사용할 수 있을 것 같다. 채용 페이지의 QnA에서 많이 본 듯한 기분이 든다.
``
I have keys but no doors. I have space but no room. You can enter but can’t leave. What am I? A keyboard. ``time
날짜/시간을 정의한다.
mark
하이라이트 또는 표시를 나타낸다
main
<body>의 주요 컨텐츠를 나타낸다.figure
독립적인 컨텐츠를 표현한다. 사진이나, 다이어그램 등의 자체 컨텐츠를 뜻함.
figcaption
figure를 정의한다. 즉, figure를 설명해 줄 수 있다.
"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."
-> 단순한 이미지 추가, 미적요소만을 고려한 상황이라면 background-image 속성을 사용하여도 상관없다. 그러나 SEO, 웹이 정보를 수집하는 과정 등을 생각한다면 시맨틱 태그를 사용하는 편이 검색결과나 속도에 훨씬 유리할 것이다.
또한, 시맨틱 태그를 사용한 코드들이 훨씩 직관적으로 작업자의 의도를 파악할 수 있어 유지보수에 용이하다. 시간이 흐른 뒤에 다른 사람이 보수를 한다해도 말이다.
즉, 기업과 같은 검색결과 상위노출 잦은 유지보수 등이 필요한 입장에서 시맨틱태그는 필수적이라고 생각한다.
틀린 점이나, 바꾸어 생각해야 할 게 있다면 알려주세여..공부에 도움이 될 거에요 ㅜㅜ
