[Html] 시멘틱 웹과 의미 요소

시맨틱 웹(Semantic Web)

• 시멘틱 웹이란 사용자가 입력한 검색어가 포함된 문장 및 단락의 의미를 분석하여 검색의 결과물을 보여주는 웹 형식이다.
• 검색엔진은 크롤러인 로봇 프로그램으로 웹사이트 정보를 수집(crawling)하고, 인덱서 프로그램으로 검색 키워드에 대응하는 인덱스(indexing)를 만든다.
• 검색 로봇이 수집한 HTML 코드를 기반으로 인덱스를 생성하는데, 이 때 HTML의 시맨틱 요소(Semantic element)는 콘텐츠의 의미를 명확히 설명해주는 역할을 한다.

<!-- 화면상으로는 같은 크기의 글자 -->
<h1>Hello</h1>                          <!-- 이 글자는 제목으로 인식하고 인덱스에 포함시킬 확률이 높고 -->
<font size="6"><b>Hello</b></font>      <!-- 이 글자는 단순 글자로만 인식 -->

 

의미 요소(semantic element)란?

• HTML 요소는 무의미(non-semantic)와 의미(semantic) 요소로 구분할 수 있는데, 의미 요소란 그 자체로 의미를 가지고 있는 요소다.
• div, span 등의 무의미 요소는 무슨 목적으로 사용되었는지 코드를 살펴봐야 알 수 있지만, form/table/img 등의 의미 요소는 코드를 보지 않아도 해당 요소의 의미를 명확히 설명해준다.
• 의미 요소가 추가되기 전인 HTML4까지는 div 요소를 사용하여 레이아웃을 작성했다.

http://www.tcpschool.com/html/html5_element_semantic

• <header> : 문서 또는 섹션의 머리글 정의
• <footer> : 문서 또는 섹션의 바닥글 정의
• <main> : 문서의 주요 컨텐츠 지정
• <nav> : 내비게이션 링크 정의
• <menuitem> : 사용자가 팝업 메뉴를 통해 선택할 수 있는 메뉴의 아이템을 정의
• <section> : 여러 내용(article)을 포함하는 공간 정의
• <article> : 본문의 주내용이 들어가는 공간 정의
• <aside> : 사이드에 위치하는 공간 정의
• <mark> : 강조 표시된 텍스트 정의
• <details> : 사용자가 보거나 숨길 수 있는 추가 세부사항 정의
• <summary> : <details> 요소에 나타날 주제를 정의
• <figure> : 일러스트, 다이어그램, 사진, 코드 목록 등의 자체 컨텐츠 지정
• <figcaption> : <figure> 요소에 대한 캡션
• <bdi> : 기본 출력방향과는 다른 방향으로 출력되는 텍스트를 정의
• <dialog> : 다이얼로그 박스나 다이얼로그 윈도우를 정의
• <time> : 날짜/시간 정의

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/