Semantic Web & Semantic Tags

sae0428·2021년 11월 4일
0

만약 누군가가 Semantic Tag 와 Semantic Web 에 대해서 묻는다면 내가 명확하게 구두로 설명할수 있을까?

-----> 이 두가지에 대해서는 어렴풋이 느낌정도만 알고있는것 같아 이번기회에 확실히 짚고 넘어가고자 한다!

누군가가 나에게 물었을때 명확하고 이해하기쉽게 설명할수있도록.

1. Semantic Tag 와 Semantic Web 이란 무엇일까?

  • 웹페이지에 개발자도구를 열어서 코드들을 확인할때
    <div><span> 과 같은 태그들을 보았을때,
    우리는 해당 태그사이에 오는 내용이 어떤것일지 가늠하기가 쉽지않다.

  • 즉, content에 대하여 어떤 설명도 하지않는다고 생각할수 있는데
    이것들을 non-semantic 태그라고도 말할수있다.

  • 반면,
    <header> 는 "이것이 헤더부분이겠구나"
    <nav> 는 "여기에는 네비게이션바에 대한 내용이 있겠구나"
    <article> 은 "이곳에는 본문의 주 내용이들어가겠구나"

    등등 눈으로만 봐도 그 내용을 유추할 수 있는 태그들도 있다.

  • 이와 같이 태그 이름만을 보고도 유추할수 있고, 의미를 가지고있는 태그들을 semantic tag 라고 한다.

HTML5에서 새롭게 추가된 시맨틱 태그

  • semantic tag가 생기고 나서부터는 사람 뿐만 아니라 컴퓨터 또한 태그들의 의미를 해석할 수 있게 되었고 그 데이터를 활용할 수 있는 semantic web을 실현할수 있게 되었다.

  • 이처럼 컴퓨터가 스스로 정보를 해석하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹을 semantic web 이라고 한다.

2. Semantic Tag을 사용하는 이유는 무엇일까?

  1. 컴퓨터 및 다른 개발자들에게 태그의 명확한 의도를 전달할수 있다.

  2. 개발자의 입장에서 코드의 가독성이 높아지기에 유지보수가 편리해진다.

  3. HTML 태그를 바탕으로 검색을 수행하는 검색 엔진의 특성상, 태그들의 의미가 분명해져 검색엔진에 노출시키기 쉽고, 최적화에 용이하다.

    • 예를 들면 웹페이지에 이미지를 넣고 싶을 때,
      CSS의 <background-color> 속성을 통해서 이미지를 삽입할 경우,
      컴퓨터는 그 속성을 이미지라는 정보로 인식하지 못한다.


    • 반면<img> 태그를 사용하여 이미지를 삽입할 경우 alt 라는 속성을 통해 이미지에 대한 설명을 넣을 수 있고, 이는 스크린 리더 소프트웨어를 통해서 사용자에게 이미지를 설명하는데 사용되거나, 그림에대한 정보를 검색 엔진에 노출시킬수 있다.


    • 결론은 해당 이미지에 대한 정보를 담은 페이지를 만들고 싶고,
      이미지가 검색 엔진에서 노출되기를 원하면서 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 semantic tag <img> 를 사용하는 것이 더 좋다.


    • 반면 단순히 어느 한 element 를 지정하여 그 element 에 백그라운드 이미지를 입힐때 사용하거나, 표현하려는 이미지가 실제 그 페이지에 내용이 아니어도 상관없고, 단순히 CSS 속성을 이용하여 순수하게 디자인만 표현하려고 한다면 <background-color> 를 사용하는것이 좋다.


    • 참고로 만약 이미지에 에러가 나게 됬을 경우,
      <img> 는 <alt> 라는 속성을 사용하여 이미지를 설명하는 텍스트를 노출하는 반면, <background-img> 는 아무일도 일어나지 않는다.



참고.
https://ko.wikipedia.org/wiki/%EC%8B%9C%EB%A7%A8%ED%8B%B1_%EC%9B%B9
https://namu.wiki/w/%EC%8B%9C%EB%A7%A8%ED%8B%B1%20%EC%9B%B9
https://chanho-yoon.github.io/web/web-semanticWeb-semanticTag/
https://velog.io/@okcleff/TIL-Semantic-Web-%EA%B3%BC-Semantic-Tag
https://developer.mozilla.org/en-US/docs/Web/HTML/Element
https://www.w3schools.com/html/html5_semantic_elements.asp

profile
# 불편함을 편리함으로 바꾸고싶은 주니어 Back-end 개발자

0개의 댓글