[HTML] 시맨틱 웹(Semantic Web)

---

1.시맨틱 웹(Semantic Web)

웹 상의 정보와 데이터에 의미(semantic)를 부여하여 사람뿐만 아니라 컴퓨터도 이해하고 처리할 수 있게 하는
메타데이터(Metadata)를 부여하여, 기존의 잡다한 데이터 집합이었던 웹페이지를 ‘의미’와 ‘관련성’을 가지는 거대한 데이터베이스로 구축하고자 하는 발상

 

 

 

2.시멘틱 태그

<header>

문서나 섹션의 머리글 부분을 정의. 로고, 네비게이션 메뉴, 검색창 등을 포함.

 

 

<nav>

내비게이션 링크의 집합을 정의. 메뉴, 목차, 링크 모음에 사용.

 

 

<section>

문서의 일반적인 섹션을 정의. 주제로 그룹화된 콘텐츠를 포함.

 

 

<article>

독립적으로 구분할 수 있는 콘텐츠를 정의. 기사, 블로그 포스트, 뉴스 기사 등에 사용.

 

 

<aside>

문서의 주요 내용과 간접적으로 관련된 콘텐츠를 정의. 사이드바, 광고, 관련 링크 등을 포함.

 

 

<footer>

문서나 섹션의 바닥글 부분을 정의. 저작권 정보, 연락처 정보, 사이트맵 등을 포함.

 

 

<main>

문서의 주요 콘텐츠를 나타냄. 문서의 핵심 콘텐츠를 포함하고, <header>, <footer>, <nav>, <aside>와는 독립적으로 사용.

 

 

<figure>

독립적인 콘텐츠를 캡션과 함께 그룹화. 이미지, 다이어그램, 일러스트레이션 등을 포함.

 

 

<figcaption>

<figure> 요소의 캡션을 정의.

 

 

<mark>

하이라이트 표시된 텍스트를 정의. 중요하거나 관련성이 높은 부분을 강조할 때 사용.

 

 

<time>

시간을 정의. 날짜나 시간 값을 포함.

 

 

<address>

연락처 정보를 정의. 이메일 주소, 전화번호, 물리적 주소 등을 포함.

 

 

<details>

추가적인 정보를 나타내며, 사용자 인터랙션을 통해 표시.

 

 

<summary>

<details> 요소의 요약이나 제목을 정의.

 

 

<dialog>

대화 상자를 정의. 모달, 경고창 등 사용자와의 인터랙션을 위한 대화 상자에 사용.

 

 

 

 

---

🎈참고자료

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