[HTML] 시멘틱 태그 (Semantic Web) 란??? / Semantic tag

들어가기

 - HTML5의 큰 특징중 하나이다!

 - 시멘틱 요소는 자신의 의미를 브라우저와 개발자 모두에게 명확하게 설명한다. (w3schools.com)

 -  검색엔진이 HTML을 분석할때 정확하게 컨텐츠를 식별하기 위해 정한 규약이다.

 

 

시멘틱 요소들을 쓰는 이유는 다음 글을 읽어 보고 대화를 나누자 ㅋ

 

--------------------------------------------------------------------------------------------------------

 

 "나는 검색된다. 고로 존재한다.”

       - 검색엔진은 이 시대의 가장 강력한 권력 중의 하나다.

 

 SEO(검색엔진 최적화: Search Engine Optimization)

      - 같은 마케팅 도구를 사용해 검색엔진이 본인의 웹사이트를 검색하기 알맞은 구조로

        웹사이트를 조정하기도 한다.

 

  크롤링

        - 검색엔진은 로봇이라는 프로그램을 이용해 매일 전세계의 웹사이트 정보를 수집

 

인덱싱

       - 그리고 검색 사이트 이용자가 검색할 만한 키워드를 미리 예상하여 검색 키워드에 대응하는

        인덱스(색인)을 만드는 것.

       - 인덱스를 생성할 때 사용되는 정보는 검색 로봇이 수집한 정보인데 결국 웹사이트의 HTML 코드이다.

          즉, 검색 엔진은 HTML 코드만으로 그 의미를 인지하여야 하는데 이때

           시맨틱 요소(Semantic element)를 해석하게 된다.

 

HTML은 컴퓨터가 해석할수 있는 메타데이터와 사람이 사용하는 자연어 문장이 뒤섞여 있다.

 

 

--------------------------------------------------------------------------------------------------------

 

 

시맨틱 태그란 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확히 설명하는 역할을 한다

 

기존 <div> 태그는 id나 class속성으로 개발자별 각각 이름을 지정하였기 때문에 검색엔진이 html 파일을 분석할때 정확한 content를 식별하기 어려웠다, 하지만 HTML5에서는 검색엔진에게 의미론적으로 중요한 부분과 덜 중요한 부분을 파악할 수 있게 해주어 효율적인 검색을 하도록 만든다.

 

 

시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확히 해석하고 그 데이트를 활용할수 있는 시맨틱 웹이 실현될 수 있다.

 

시맨틱 웹이란 웹에 존재하는 수많은 웹페이지들에 메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집단이였던 웹페이지를 “의미”와 “관련성”을 가지는 거대한 데이터베이스로 구축하고자 하는 발상이다.

 

 

  이렇게 쉽게 검색이되는 문서를 만들수록 검색엔진에는 쉽게 노출된다.

 

 

---

HTML요소

    - HTML의 요소는 non-semantic 요소, semantic요소로 구분된다.

 

non-semantic	div, span등… content에 대하여 어떤 설명도 하지 않는다.
semantic	form, table, img등... content의 의미를 명확히 설명한다.

 

 일반적으로 <div> 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수 가 없다.

하지만 <form>, <table>, <img> 등의 태그는 대략 그 태그 안에 들어갈 내용을 유추할수 있다. 

이것이 non-sementic과 sementic의 차이이다.

 

non-sementic	<div class = "header"> <div class = "footer">
sementic	<header> <footer>

 

 

 

---

새롭게 추가된 시맨틱 태그(HTML5)

 

 

 

 

 

위의 그림처럼 시멘틱 태그를 사용하면 사이트의 레이아웃을 의미론적으로 구성하고 이해할 수 있다.

 

 

 

tag	Description
header	화면 상단에 위치하는 사이트나 문서의 정보를 정의
nav	문서의 네비게이션 항목을 정의
aside	페이지의 주요 내용 외의 내용을 정의한다 페이지의 주요 내용 주변(사이드 바)에 위치하여 관련된 내용을 배치할수 있다 예) 광고
section	본문의 여러내용(article)을 포함하는 공간
article	본문의 주내용이 들어가는 공간 section 내에서 하나의 기사를 article 태그로 감쌀 수 있다. article 내에서도 section태그가 있을 수 있다.
footer	화면 하단에 위치하는 사이트나 문서의 정보를 정의
details	사용자가 보거나 숨길 수 있는 추가적인 세부정보를 정의
figcaption	figure 에 대한 자막 정의
figure	사진이나 다이어그램과 같은 부가적인 요소를 정의
main	문서의 주가 되는 컨텐츠를 정의
mark	참조나 하이라이트 표시를 필요로 하는 문자를 정의
summary	detils에 대한 보이는 요소를 정의
time	날짜/시간 정의

 

 

---

 

 

#참고

https://poiemaweb.com/html5-semantic-web

https://searchadvisor.naver.com/guide/seo-basic-intro

https://thrillfighter.tistory.com/492

https://hianna.tistory.com/278

https://kutar37.tistory.com/entry/%EC%8B%9C%EB%A9%98%ED%8B%B1-%ED%83%9C%EA%B7%B8-Semantic-Tag