1. Semantic Tag, Web 이란?
2. Semantic Web 을 사용하는 이유
1. Semantic Tag, Web 이란?
🔑 웹페이지 소스에서 <div> 나 <span> 과 같은 태그를 보았을 때, 우리는 해당 태그 사이에 오는 내용이 무엇일지 가늠하기가 쉽지 않습니다.
🔑 반면, <nav> 에는 '네비게이션바에 들어갈 내용이 있겠구나', <footer> 에는 '저작권 관련 사항이나 연락처, 또는 사이트맵 등의 정보가 있겠구나' 하는 등 내용을 유추할 수 있는 태그들도 있습니다.
🔑 이와 같이 태그 이름만으로도 의미를 지닌 태그들을 semantic tag 라고 합니다.
🔑 semantic tag 의 도입으로 인간 뿐만 아니라 컴퓨터 또한 태그들의 의미를 해석할 수 있게 되었습니다.
🔑 이처럼 컴퓨터가 스스로 정보를 해석하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 웹을 semantic web 이라고 일컫습니다.
- semantic tag 의 종류 예시, 출처 : w3schools - HTML Semantics
2. Semantic Tag 을 사용하는 이유
🔑 semantic tag 를 활용할 경우
-
개발자의 입장에서 코드의 가독성이 높아져 유지보수가 한결 수월해지고,
-
스크린 리더를 사용해야 웹페이지를 인지할 수 있는 사용자들에게 비교적 명확하게 문서의 구조나 내용을 전달할 수 있으며,
-
HTML 태그를 바탕으로 검색을 수행하는 검색 엔진의 특성상, 태그들의 의미가 분명해져 검색 엔진 최적화에 용이합니다.
- 예를 들어 웹페이지에 이미지를 넣고 싶을 때, css
background-image속성을 통해서 이미지를 삽입할 경우, 컴퓨터는 그 속성을 이미지라는 정보로 인식하지 못합니다. - 반면
<img>태그를 사용할 경우alt속성을 통해 이미지에 대한 설명을 넣을 수 있고, 이는 스크린 리더를 통해서 사용자에게 이미지를 설명하는데 사용되거나, 메타데이터가 되어 이미지를 검색 엔진에 노출시킬 수 있습니다. - 즉, 효과적이고 적극적으로 정보를 전달하고 싶을 경우에는 semantic tag를 사용하는 것이 훨씬 유리합니다.
- 예를 들어 웹페이지에 이미지를 넣고 싶을 때, css
"작성 내용 중 오류나 오타가 있다면, 댓글로 알려주시면 감사하겠습니다. 주니어 개발자에게 남겨주시는 작은 피드백이 큰 도움이 될 것 같습니다. 고맙습니다 :)"
Obtainment Of The Day