What does 'Semantics' mean?
의미론적(semantics)이란 말이 무엇일까? 그리고 이것은 Web과 Tags에서는 어떻게 적용되는 것일까?
1. Semantic Web
Semantics는 컴퓨터가 web page뒤에 숨겨져 있는 뜻을 이해하도록 돕는다!
오늘날의 web은 음악, 사람, 영화 등 어떤 개념이든 담을 수 있는 문서에 관한 것이지만, Semantic Web은 그 개념을 컴퓨터에게 제시하는 것뿐만이 아니라 어떻게 연관되어 있는지까지 알려주는 역할을 한다. Semantic Web은 미래에 일어날 일에 대한 것이 아닌, 현재에 일어나고 있는 것들에 대한 것이다.
예를 들어, 검색엔진은 웹 사이트 정보를 수집하는데, 음악에 관련한 블로그가 있다고 할 때 블로그의 페이지에는 곡 정보, 리뷰와 리스트들이 있을 것이다. 더 나아가 이러한 Semantic technology를 이용한다면 같은 아티스트의 앨범까지 관련짓고, 찾아줄 수도 있다. 이 때 검색 로봇은 웹사이트의 HTML 의 코드를 수집하여 사용자가 검색할만한 키워드를 미리 예상하는데, 이 때 Semantic Element을 해석하게 된다. 이렇듯 Semantic technology는 오늘날 정확성에 있어 더욱 중요해지고 있으며, 단순히 키워드 검색으로 나타난 결과뿐만이 아닌 숨겨진 의미까지 찾아주는 역할을 한다!
Semantic Web은 컴퓨터가 우리가 원하는 것을 찾게끔 도와줌으로써 우리의 삶을 더욱 쉽게 만들어주고 있다. (⁎⁍̴̛ᴗ⁍̴̛⁎)
2. Semantic Tags
HTML안 web pages를 만들 때, 사용되는 여러 가지 정보들을 의미에 맞게 잘 표현하기 위한 여러 가지 태그들이 등장하게 되는데, 특히나 HTML5가 되면서 특별한 기능은 별로 없지만 정보론적인 의미를 담은 semantic tags들이 등장하게 되었다!
header : 머리글(제목) 부분
nav : 네비게이션 메뉴
aside : 좌, 우측 사이드 위치의 공간을 의미
section : 제목별(주제별)로 나누는 공간을 의미
article : 글자가 많이 들어가는 문서의 부분을 의미
footer : 바닥글을 의미
non-semantic tags 의 예로 div,span 등은 화면상에서 명확하게 구분되어 나타내어 보여진다. 반면, semantic tags의 예로, form,table나 웹페이지의 상단에 표현되는 header, 하단에 표현되는 footer, navigaion 등은 태그를 쓰건, 쓰지 않건 간에 실제 웹페이지에서 표시되는 모습에는 어떠한 변화도 없다.
그렇다면 Semantic tags들을 왜 사용할까?
정보로서의 가치를 높일 수 있는 방법이기 때문이다! Semantic tags 들에 의해 컴퓨터가 HTML 요소의 의미를 명확히 해석하고, 그 데이터를 활용할 수 있는 semantic web이 구축될 수 있기 때문이다.
💡 연관지어 생각해볼 질문!
사이트에 이미지를 넣는 방법은 두 가지가 있다.
<img>태그를 사용하는 것과<div>태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋을까?
결국은 정보에 대한 차이!
HTML 태그인<img> 태그를 사용하여 이미지를 첨부하는 경우에는, alt=""와 같은 이미지에 대한 설명도 함께 넣을 수 있어, 검색엔진에게 노출되어 인덱싱하게 해준다! 반면에,
<div> 태그에 CSS 프로퍼티인 background-image에 속성을 추가하는 것은, 이미지에 대한 정보를 가지고 있지 않고, 단지 시각적인 화면으로만 보여줄 수 있다. 문서를 꾸며주는 CSS의 역할답게, 장식의 용도로만 쓸 수 있는 것이다!
💡요약
해당 이미지가 웹의 중심이 되는 정보이고 검색엔진에서 그 이미지가 용이하게 노출되기 원한다면, img 태그를 이용하며 단순히 시각적인 효과만을 원한다면 CSS 프로퍼티를 이용하면 된다!
프론트엔드 엔지니어로서도 단순히 시각적인 형태로만 사용자에게 전달하는 것이 아닌, 의미론적인 마크업 구조또한 항상 염두하며 작성해야할 필요가 있다 ( ᵒ̴̶̷̤໐ᵒ̴̶̷̤ )
📎 https://youtu.be/OGg8A2zfWKg
📎 https://youtu.be/uDmNhHYecL4
📎 https://seekbrevity.com/semantic-markup-important-web-design/
