[HTML] Semantic Web과 Semantic Tag

안정현·2021년 4월 18일
0
  • 웹 접근성 (web accessibility)
  • 검색엔진 최적화 (SEO: Search Engine Optimization)

Semantic Web

시맨틱 웹(Semantic Web)은 '의미론적인 웹'이라는 뜻으로,현재의 인터넷과 같은 분산환경에서 리소스(웹 문서, 각종 화일, 서비스 등)에 대한 정보와 자원 사이의 관계-의미 정보(Semanteme)를 기계(컴퓨터)가 처리할 수 있는 온톨로지 형태로 표현하고, 이를 자동화된 기계(컴퓨터)가 처리하도록 하는 프레임워크이자 기술이다.

즉, 컴퓨터가 정보자원의 뜻을 이해하고, 논리적 추론까지 할 수 있는 차세대 지능형 웹을 의미한다.

  • 온톨로지(Ontology)란 사람들이 세상에 대하여 보고 듣고 느끼고 생각하는 것에 대하여 서로 간의 토론을 통하여 합의를 이룬 바를, 개념적이고 컴퓨터에서 다룰 수 있는 형태로 표현한 모델로, 개념의 타입이나 사용상의 제약조건들을 명시적으로 정의한 기술이다.

Semantic Tag

HTML에는 웹 문서 구조를 나타내는 몇 가지 태그가 새로 추가되었다. 즉, 문서 내용에는 영향을 주지 않으면서 웹 브라우저가 문서 구조를 파악하는 데 중요한 역할을 하는 태그이다.

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

우리가 흔히 사용하는 웹 사이트는 디자인은 서로 달라 보여도 구조는 비슷하다.

헤더에는 사이트 제목이나 로고가 있고, 본문 영역과 그 외의 내용을 나타내는 사이드 바, 푸터 영역 등이 있다.

이런 구조를 바탕으로 HTML에는 태그 이름만 봐도 어떤 역할을 하는지 쉽게 알 수 있는 문서 구조 태그를 추가 할 수 있다.

Semantic Elements in HTML

1. 헤더 영역을 나타내는 <header> 태그

사이트 전체의 헤더도 있지만 특정 영역의 헤더도 있다.
사이트에서 헤더는 주로 맨 위쪽이나 왼쪽에 있으며, 검색 창이나 사이트 메뉴를 삽입한다.

2. 내비게이션 영역을 나타내는 <nav> 태그

같은 웹 문서 안에서 다른 위치로 연결하거나 다른 웹 문서로 연결하는 링크를 만든다. 흔희 내비게이션을 만들 때 사용한다.
웹 문서의 위치에 영향을 받지 않으므로 헤더나 푸터, 사이드 바 안에 포함할 수도 있고 독립해서 사용할 수도 있다.
그리고 웹 문서에서 <nav> 태그를 여러 개 사용할 경우 각각 id 속성을 지정하면 내비게이션 마다 다른 스타일을 적용할 수 있다.

3. 핵심 콘텐츠를 담는 <main> 태그

웹 문서에서 핵심이 되는 내용을 넣는다. 여기에는 메뉴, 사이드 바, 로고처럼 페이지마다 똑같이 들어간 정보는 넣을 수 없고, 웹 문서마다 다르게 보여주는 내용으로 구성한다.
<main> 태그는 웹 문서에서 한 번만 사용할 수 있다.

4. 독립적인 콘텐츠를 담는 <article> 태그

아티클의 사전적 의미인 신문이나 잡지의 기사처럼 웹에서 실제로 보여주고 싶은 내용을 넣는다. 예를 들어, 블로그의 포스트나 뉴스 사이트의 기사처럼 독립된 웹 콘텐츠 항목을 말한다.
문서 안에는 <article> 태그를 여러 개 사용할 수 있고, 이 안에는 <section> 태그를 넣을 수도 있다.

5. 콘텐츠 영역을 나타내는 <section> 태그

웹 문서에서 콘텐츠 영역을 나타낸다. <section> 태그는 <article> 태그와 비슷해 보이기도 한다. 하지만 <section> 태그는 몇 개의 콘텐츠를 묶는 용도로 사용하고, <article> 태그는 블로그의 포스트처럼 독립된 콘텐츠를 쓴다.

6. 사이드 바 영역을 나타내는 <aside> 태그

본문 내용 외에 왼쪽이나 오른쪽 혹은 아래쪽에 사이드 바를 만든다.
보통 웹 사이트에서 사이드 바는 필수 요소가 아니므로 필요할 경우에만 사용한다.

웹 문서에서 맨 아래쪽에 있는 푸터 영역을 만든다. <footer> 에는 사이트 제작 정보나 저작권 정보, 연락처 등을 넣는다.
또한, 푸터 영역에는 <header> 태그를 비롯하여 <section>, <article> 등 다른 시멘틱 태그를 모두 사용할 수 있다. 이러한 시맨틱 태그를 이용해 푸터 안에 다양한 정보를 넣는다.

시맨틱 태그가 필요한 이유

웹 문서는 시맨틱 태그를 사용하지 않더라도 만들 수 있다. 시맨틱 태그를 사용하든 사용하지 않든 웹 문서에 특별히 차이가 나는 것도 아니다. 그렇다면 시맨틱 태그는 왜 필요할까?

  1. 시맨틱 태그를 사용하면 웹 브라우저가 HTML의 소스 코드만 보고도 어느 부분이 제목이고 메뉴이고 본문 내용인지 쉽게 알 수 있기 때문이다.
    그래서 시각장애인이 웹 사이트를 이용할 때 쓰는 화면 낭독기와 같은 보조 기기에서 사이트의 구조를 제대로 이해할 수 있다.
    그러면 웹 사이트 사용자에게 보다 더 정확한 내용을 전달할 수 있다.

  2. 문서 구조가 정확히 나눠지므로 PC나 모바일의 웹 브라우저와 여러 스마트 기기의 다양한 화면에서 웹 문서를 표현하기가 쉽기 때문이다.

  3. 인터넷에서 웹 사이트를 검색할 때 필요한 내용을 정확히 찾을 수 있다.
    즉, 웹 사이트의 본문 내용을 검색해야 한다면 메뉴나 푸터 영역이 아니라 본문 영역 안에서만 검색을 할 것이다.

질문 사항

"사이트에 이미지를 넣는 방법은 두 가지가 있습니다. <img> 태그를 사용하는 것과 <div> 태그에 background-image 속성을 추가하는 것.
두 가지 방법의 차이점과 각각 어떠한 경우에 사용하면 좋은지 설명해보세요."

나의 답변

<img> 태그는 웹 문서에 이미지를 삽입하는 가장 기본적인 태그로, 주요 속성은 다음과 같다.
src 속성은 이미지 파일의 경로를 지정하여 웹 브라우저에 알려주는 역할을 하며 반드시 있어야 한다.
alt 속성에는 화면 낭독기 등에서 이미지를 대신해서 읽어 줄 텍스트를 입력한다. 이는 인터넷이 불안정하거나 이미지를 제대로 표시할 수 없는 경우 이미지 대신 텍스트가 나타나게 된다.

<div> 태그는 <div id="header">나 <div class="detail"> 처럼 id나 class 속성을 사용해서 문서 구조를 만들거나 스타일을 적용할 때 사용한다.
즉, 영역을 구별하거나 단순히 스타일을 적용하려고 콘텐츠를 묶으려면 <div> 태그를 사용한다.

즉, 표현하고자 하는 image가 웹 상에서 의미가 있고 정보로서 가치를 갖고자 한다면 <img> 태그를 사용하는 것이 좋겠고,
단순히 웹 페이지 상에서 영역을 구분하기 위한 용도라면 <div> 태그를 사용하는 것이 좋겠다.

<출처>
1. 위키피디아
2. HTML+CSS+자바스크립트 웹표준의 정석(2021. 고경희 지음)

0개의 댓글