Semantic Tag 란?
Semantic Web 이란 무엇인가?
시멘틱 웹을 직역해보면 의미론적인 웹이란 뜻이다.
즉, 문서의 의미에 맞게 구성된 웹이다.
Q. 그래서 뭘까..?🤔
A. 개발자가 의도한 요소의 의미가 명확히 드러나게 작성하는 방법이자 방식이다.
Q. 그래서 왜 쓰나요..?🤔
A. 코드의 가독성을 높이며 유지보수를 높일 수 있다.
시멘틱 태그 사용의 장점은?
검색엔진최적화 (SEO):검색엔진은 태그 기반으로 페이지 내 검색 키워드 우선순위를 판단한다. ( 제목은 h1, 중요한 단어는 strong 또는 em 을 사용하는 등 의미에 맞는 올바른 태그를 사용하는것이 중요하다. )
시각장애가 잇는 사용자가 스크린 리더를 사용하여 페이지를 탐색할 때 도움이된다.
시멘틱 태그를 정하는 팁과 유의사항
사용할 태그를 결정하기전 ' 채워야하는 데이터를 가장 잘 설명하고 나타내는 요소는 무엇일까? ' 를 먼저 생각해본다.
사용할 HTML 태그는 스타일 기반이 아닌 채워질 데이터를 기반으로 결정되어야한다.
<div class = "title"> 제목입니다 </div>
보다는
<h1 class = "title"> 제목입니다 </div>
으로 작성했을때 태그만 보고도 '아 이건 제목이네!' 라고 바로 인식할 수 있다.
또한, 검색엔진은 대체로 h1 요소내의 콘텐츠를 웹문서의 중요한 제목으로 인식하고 인덱스에 포함시킬 확률이 높다. 또한 h1 요소 내의 콘텐츠가 제목임을 알 수 있다.
이처럼 의미를 가진 HTM 요소 작성방식인 Semantic Web은 SEO에 기여할 수 있는 좋은 방법이다.
시멘틱 웹이란 존재하는 수많은 웹페이지들에 메타데이터 (Metadata)를 부여하여, 기존의 여러 데이터 집합이었던 웹페이지를 '의미'와 '관련성'을 가지는 거대한 데이터베이스를 구축하고자 사용한다.
HTML 요소는 non-semantic 요소와 semantic 요소로 구분 할 수 있다.
시멘틱 웹을 위한 HTML 태그
Q."사이트에 이미지를 넣는 방법은 두 가지가 있습니다. 태그를 사용하는 것과
태그에 background-image 속성을 추가하는 것. 두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."