01. Semantic Web

컨텐츠 구조화를 위해 Semantic Tag로 작성된 Web

1.1 Semantic Web?

Semantic Web이란 HTML을 바탕으로 CSS와 JavaScript 조합을 사용해 원하는 방식으로 HTML 요소들을 동작시킬 수 있도록 구조화된 Web.

1.2 Semantic Web의 목적

1. 더 쉬운 개발 - 명확하게 이해 가능한 개발.

2. 모바일 최적화 - semantic HTML은 non-semantic code 보다 가볍고 빠른 반응으로 모바일 환경에 적합하다.

3. SEO에 적합 - 검색 엔진은 의미가없는 키워드 등에 포함 된 키워드보다 semantic code로 작성된 키워드에 더 중요성을 둔다.

4. 웹 접근성 - 웹 접근성 측면에서, screen-reader에 포함되는 정보 등을 통해 누구나 웹에 접근할 수 있도록 돕는다.

출처

02. Semantic Tag

Semantic Tag = 의미 있는 태그이다.

2.1. Semantic Tag?

Semantic Tag란 사용자, 브라우저, 개발자에게 명확한 의미를 전달 해 주는 것이다.

• non-semantic Tag: 컨텐츠가 의미하는 바가 없는 태그
  e.g) <div> and <span>

• semantic Tag: 컨텐츠가 명확하게 의미를 전달하는 태그
  e.g) <form>, <table>, <artice>

2.2. Semantic Tag로 짜여진 HTML 구조

2.3. HTML에서 사용되는 Semantic Tag

<article> : Defines independent, self-contained content
<aside> : Defines content aside from the page content
<details> : Defines additional details that the user can view or hide
<figcaption> : Defines a caption for a <figure>element
<figure> : Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> : Defines a footer for a document or section
<header> : Specifies a header for a document or section
<main> : Specifies the main content of a document
<mark> : Defines marked/highlighted text
<nav> : Defines navigation links
<section> : Defines a section in a document
<summary> : Defines a visible heading for a - <details> element
<time> : Defines a date/time

출처

03. 결론 ✏️

의미 전달의 목적에 따라 적합한 태그를 사용해야 한다.

의미 전달의 목적에 따라 적합한 태그를 사용해주어야 한다. 즉, semantic-tag와 non-semantic tag 중 무조건 하나를 써야 맞는 태그가 아닌 것이다.

아래 예제를 통해서 확인해보면,

사이트에 이미지를 넣는 방법은 두 가지가 있다. 두 가지 방식을 비교하여 그 차이점과 어떤 경우에 사용하면 좋을까?

• <img> 태그를 사용
• <div> 태그에 background-image 속성 추가

3.1. <img> 태그 사용

먼저, <img>는 HTML 내에서 이미지를 추가하기 위한 tag이며, 아래와 같은 속성을 가지고 있다.

• alt: 이미지가 뜨지 않았을 때, 이미지 대신 보여줄 텍스트
• src: 이미지 파일 경로 or 이미지 url 주소

이러한 속성을 바탕으로 tag를 작성한다면, semantic-web의 목적에 맞도록 코드가 작성된 것이다.

3.2. <div> 태그에 background-image 속성 추가

<div> 태그에 background-image 속성 추가는 <div>의 배경으로 이미지를 넣어 주는 것이다. 따라서 태그 자체가 지닌 의미가 없다. 따라서, 내용의 의미가 없이 단순 스타일 요소로 사용하는 것이 좋다. 또한 <div>는 non-semantic tag이기 때문에 alt를 이용한 정보 전달이 어렵다.

3.3. 결론

• <img> 태그를 사용 : 이미지가 Web에서 의미있는 정보 전달의 역할을 할 때
• <div> 태그에 background-image 속성 추가 : 스타일적인 요소로만 사용될 때

위의 두가지 목적에 따라서 코드를 작성해야 한다.