시맨틱 태그를 사용하면 좋은 점

시맨틱 태그는 콘텐츠의 형식 뿐만 아니라 콘텐츠의 의미와 구조를 설명합니다.
시맨틱 태그를 사용하면 접근성과, SEO, 가독성 측면에서 다양한 이점을 얻을 수 있습니다.

 

인용 출처 - 시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 - TBWA 데이터랩

시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점

 

---

■ 시맨틱 (Semantic) 단어 자체의 뜻은?

 

`의미의, 의미론적인` 라는 뜻이 담겨있습니다. 이로 유추해보면, 시맨틱 태그는 태그 내용에 의미를 부여하는 태그 입니다.

웹 기술이 발전함에 따라 태그의 내용은 정보로서 높은 가치를 포함해야 한다는 점이 점점 더 중요해지고 있습니다.
그래서 개발자들은 유용한 형태의 데이터로 웹을 만들기 위해 노력해야 합니다.
그러한 노력 중 하나가 바로 시맨틱 태그를 사용하는 것입니다.
이를 통해 사람들은 코드를 읽는 것이 훨씬 쉬워지고, 검색엔진 즉, 기계 입장에서는 콘텐츠를 더 쉽게 이해할 수 있습니다.
따라서 SEO (검색엔진최적화) 성능을 더욱 향상할 수 있습니다.
-
시맨틱 태그 (Semantic Tag)란? - 태그 요소의 종류와 이점 - TBWA 데이터랩

 

---

대표적인 시맨틱 태그에는 <header>, <nav>, <article>, <section>, <footer>, <main> 등이 있습니다.

이 시맨틱 태그들은 포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖게 합니다.

 

즉 HTML의 구조에서, 태그에 의미를 부여함으로써 웹사이트의 구조를 파악하기 쉽도록 만드는 것이 시맨틱 태그의 역할입니다.

 

`HTML5`이전에는 <div>태그에 id 또는 클래스 등으로 구분하여 구조를 설계했으나, HTML5에서는 시맨틱 태그를 통해 명시적이고 직관적인 구조를 설계하는것이 가능해졌습니다.

 

---

■ 다양한 시맨틱 태그들 :

<article> 태그는 독립적인 글을 다루는 데 사용하는 태그입니다.

<aside> 태그는 옆에 위치하는 콘텐츠를 담는 태그입니다.

<details> 태그는 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다. 

<summary> 태그는 <details> 에서 보이는 부분을 담당합니다.
<summary> 태그는 <details> 태그의 첫 번째 하위 항목이어야 합니다.

<figure> 태그는 일러스트레이션, 다이어그램, 사진, 코드 목록 등과 같은 자체 포함된 콘텐츠를 지정합니다.

<figcaption> 태그는 <figure> 요소에 대한 캡션을 정의하며, 문서에서 사진의 설명을 추가하기 위해 사용됩니다. 

<footer> 태그는 문서 또는 섹션의 바닥글을 지정하며, 문서의 아래쪽에 위치합니다.

<header> 태그는 문서나 섹션의 머릿글을 지정하며, 정보가 포함된 페이지 상단부분을 정의합니다.

<main> 태그는 메인 내용을 담는 태그로, 웹사이트의 텍스트 본문이나 콘텐츠를 나타냅니다.

<nav> 태그는 웹사이트의 메뉴, 탭, 탐색경로 등 탐색 링크가 포함된 페이지 부분을 정의합니다.

<section> 태그는 문서의 부분을 의미하는 태그입니다.

 

---

 

이번 탐구 주제는 시맨틱 태그였습니다.

 

`HTML5`에서 추가된 시맨틱 태그를 사용함으로써, 웹페이지의 구조를 설명할 수 있게 되었습니다.

 

시맨틱 태그를 사용한 문서는 사람도 코드의 목적을 이해하기 쉬워지고, 검색엔진(기계) 입장에서도 문서의 컨텐츠를 이해하기 쉬워집니다.

 

HTML의 태그에 의미를 부여함으로써, 웹문서의 컨텐츠를 파악하기에도 용이해집니다.

 

곧 시맨틱 태그는 웹페이지의 접근성을 향상시키고, 검색엔진에 친화적으로 만들며, 콘텐츠의 명확하고 일관된 흐름을 구성하여 웹페이지의 가독성을 향상시킵니다.