Semantic Web과 Semantic Tag

Joah·2022년 5월 23일

HTML

목록 보기

1/5

"의미론적인 웹"으로 기계가 이해할 수 있는 형태로 제작된 웹을 의미한다._
-wiki백과-

컴퓨터가 사람을 대신하여 정보를 읽고, 이해하고 가공하여 새로운 정보를 만들어 낼 수 있도록 이해하기 쉬운 의미를 가진 차세대 지능형 웹
-나무위키-

아래 설명된 Semantic Tag를 이용하여 만든 Web
-내가 정의한 Semantic Web-

HTML의 태그는 그 이름만 봐도 의미를 알 수 있어 Semantic Tag라고 한다.

텍스트 단락(paragraph)를 줄인 p태그나 앵커(anchor)를 줄인 a 태그 등 이름만으로도 어떤 역할을 하는지 쉽게 알 수 있다.

시맨틱 태그를 사용하면 웹 브라우저가 HTML의 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있다.
```
<header>제목</header>
<footer>하단</footer>
```
문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기 쉽다.
인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다. 검색엔진최적화(SEO)는 검색 엔진이 정보를 수집(크롤링)할 때 HTML 코드를 해석한다. 따라서 시맨틱 태그로 작성된 HTML은 원하는 정보가 정확히 어디에 있는지 사용자에게 전달할 수 있다.

<header>
주로 제목을 나타내는 헤드 영역을 포함한다.
<nav>
내비게이션 영역을 나타낸다. 웹 문서의 위치에 영향을 받지 않아 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.
<main>
핵심 내용을 담는다. 웹 문서마다 다르게 보여 주느 내용으로 구성하여 웹 문서에서 한 번만 사용할 수 있다.
<article>
독립적인 콘텐츠를 담는 이 태그는 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 콘텐츠 항목을 작성할 때 사용한다. <article> 안에는 아래의 <section>태그를 넣을 수도 있다.
<section>
웹 문서에서 콘텐츠 영역을 나타낸다는 점에서 <article>과 비슷하지만 <section>태그는 몇 개의 콘텐츠를 묶는 용도로 주로 사용된다.
<aside>
본문 내용 외에 왼쪽이나 오른쪽, 혹은 아래쪽에 사이드 바를 나타낸다. 필요할 경우 사용한다.

Front-end Developer