HTML - 시맨틱 요소

 

 

웹사이트의 노출 및 검색 엔진 최적화(SEO)는 현대 인터넷 환경에서 매우 중요한 역할을 합니다. 검색 엔진은 웹사이트를 수집하고 사용자가 검색 시 원하는 정보를 제공하기 위한 강력한 도구로서 작용하며, 웹사이트가 검색 결과에 노출되는 정도가 중요합니다.

SEO를 통해 웹사이트가 검색 엔진에 노출되도록 만들기 위해서는 검색 엔진이 웹사이트 정보를 수집하는 방식을 이해해야 합니다. 검색 엔진은 크롤러 또는 로봇 프로그램을 사용하여 전세계의 웹사이트 정보를 수집합니다. 이 프로세스는 크롤링이라고 불리며 검색 엔진의 크롤러가 실행합니다.

검색 엔진은 미리 예상한 키워드에 대응하는 인덱스(색인)을 생성하여 사용자에게 검색 결과를 제공합니다. 이 과정은 인덱싱이라고 불리며 검색 엔진의 인덱서가 수행합니다.

검색 엔진이 인덱스를 생성하는 데 사용하는 정보는 웹사이트의 HTML 코드입니다. 따라서 검색 엔진은 HTML 코드를 해석하여 웹페이지의 의미를 이해해야 합니다. 이때, 시맨틱 요소(semantic element)가 중요한 역할을 합니다. 시맨틱 요소는 HTML 요소의 의미를 명확하게 정의하며, 검색 엔진은 이러한 요소를 해석하여 검색 결과를 개선하는 데 활용합니다.

HTML 문서는 기본적으로 컴퓨터가 해석할 수 있는 메타데이터와 사람이 이해하는 자연어 문장이 혼합되어 있습니다. 검색 엔진은 이러한 혼합된 정보를 해석하여 웹페이지의 내용을 이해하고 사용자에게 정확한 검색 결과를 제공합니다.

 

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

 

1행의 요소는 의미적으로 모호합니다. 이 요소는 단순히 폰트 크기와 볼드체를 지정하는 메타데이터를 브라우저에 전달하고, 그 의도가 명확하지 않습니다. 반면, 2행의 요소는 "header(제목)" 중에서 가장 상위 레벨의 의미를 내포하고 있으며, 개발자가 원하는 요소의 의미가 명확히 드러납니다. 이것은 코드의 가독성을 향상시키고 유지보수를 용이하게 만듭니다.

검색 엔진은 일반적으로 h1 요소 내의 콘텐츠를 웹 문서의 중요한 제목으로 인식하고 이를 인덱스에 포함시킬 가능성이 높습니다. 또한, 사람들도 h1 요소 내의 콘텐츠가 제목임을 인식할 수 있습니다. 시맨틱 요소로 구성된 웹 페이지는 검색 엔진에 보다 의미론적으로 문서 정보를 전달하고, 검색 엔진도 시맨틱 요소를 활용하여 더 효과적인 크롤링과 인덱싱을 수행할 수 있습니다. 다시 말해, 시맨틱 태그는 브라우저, 검색 엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 설명하는 역할을 합니다. 이러한 시맨틱 태그 덕분에 컴퓨터는 HTML 요소의 의미를 더 명확하게 해석하고 해당 데이터를 활용할 수 있는 시맨틱 웹이 실현됩니다.

시맨틱 웹은 많은 웹 페이지에 메타데이터(Metadata)를 부여하여, 기존의 단순한 데이터 집합이었던 웹 페이지를 "의미"와 "관련성"을 가지는 거대한 데이터베이스로 구축하려는 개념입니다.

 

HTML 요소는 non-semantic 요소, semantic 요소로 구분할 수 있습니다.

non-semantic 요소div, span 등이 있으며 이들 태그는 content에 대하여 어떤 설명도 하지 않는다.semantic 요소form, table, img 등이 있으며 이들 태그는 content의 의미를 명확히 설명합니다.

 

다음은 HTML5에서 새롭게 추가된 시맨틱 태그입니다.

 

태그설명

 

header	헤더를 의미한다
nav	내비게이션을 의미한다
aside	사이드에 위치하는 공간을 의미한다
section	본문의 여러 내용(article)을 포함하는 공간을 의미한다
article	분문의 주내용이 들어가는 공간을 의미한다
footer	푸터를 의미한다