시맨틱 태그란? 기본 개념부터 기능 태그까지 Semantic Tags를 알아보자!

 

 

시맨틱 태그?

프로그래밍에서, 시맨틱은 코드 조각의 '의미'를 나타냅니다. 

 

이 HTML 엘리먼트가
가진 목적이나 역할은 무엇일까요?

많은 의미적 HTML 태그는 페이지의 레이아웃을 전달하게 됩니다.

이러한 "구조적" 태그는 HTML4가 HTML5로 업그레이드되었을 때 도입되었으며,

일반적으로 의미적 HTML5 태그 또는 의미적 HTML5 요소라고도 합니다.

 

 

시맨틱 태그 (Semantic Tags) 종류는 다음과 같습니다.

시맨틱 태그 (Semantic Tags) 종류
	header	헤더 태그는 페이지 상단에 위치하며 로고나 제목 등이 포함
	nav	Navigation의 약자로 탐색 링크 즉 메뉴 링크를 모아놓은 영역을 말하며 <header> 태그 내에서 사용하기도 하고, 보조 탐색 <nav> 태그로도 일반적으로 사용합니다.
	main	main	헤더와 푸더를 뺀 본문 전체 영역으로 페이지의 주요 콘텐츠 영역을 말합니다. 페이지당 태그는 하나만 있어야 합니다
		article	해당 페이지나 사이트와 독립적으로 존재할 수 있는 콘텐츠를 정의 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용.
		section	페이지를 여러 주제나 하위 제목 등 목록을 형성하며비슷한 주제의 근처 콘텐츠를 그룹화하는 방법입니다. 한 영역 안에서 구분이 필요한 경우 <div>를 대신하여 사용합니다. <section> 안에 <section>을 넣을 수도 있고, <article>을 이용해 내용을 넣을 수도 있습니다.
		aside	페이지 콘텐츠를 제외한 콘텐츠를 정의하며 주로 사이드바에 사용되며 보완적이지만 필수적이지 않은 정보를 추가하는 영역입니다.
	footer	페이지 하단에 위치하며 저작권이나 연락처, 소셜 미디어 계정 링크, 일부 사이트 탐색을 포함됩니다

 

 

 

그 외에도 

<details>

태그는 접은글 형식으로 보통 Q&A에서 많이 사용되며 사용자가 보거나 숨길 수 있는 추가 세부 정보를 정의하는 태그입니다. 

사용자와 상호작용이 가능하다는 점이 특징이며, 사용자는 버튼을 통해 열고 닫을 수 있습니다. 

기본적으로 닫은 상태에 있고, 클릭하면 내용이 보이면서 확장되는 성질을 가집니다.

<details> 태그만 사용시 타이틀에 "▶세부정보" 라고 나오지만, <summary> 태그로 제목 부분의 텍스트를 변경할 수 있습니다.

 

    <details>
        <summary>
            자세히보기
        </summary>
        <p>자세히 보아야 이쁘다</p>
    </details>

 

 

<hgroup>

제목과 관련된 부제목을 묶는 태그입니다

하나 이상의 h1 - h6 요소를 묶을 때 사용하며  <p> 태그도 사용 가능합니다.

<hgroup>
	<h1>주요 제목</h1>
	<h2>부제목</h2>
	<p>내용이 들어갑니다.</p>
</hgroup>

 

 

 

<mark> 

현재 맥락에 관련이 깊거나 중요한 부분 강조하는 태그로

형광펜 효과처럼 노란색 배경으로 표현되며, CSS 스타일을 입혀서 사용합니다.

단순 강조는 <span> 사용을 권장합니다.

<mark>가 있다는 것을 알아야 한다면 CSS ::before과 ::after 의사 선택자의 content 속성을 사용하세요. [사용법 보기]

<mark>시멘틱 코드</mark>를 사용해보세요

 

 

<time> 

시간을 나타내는 텍스트임을 알려주는 시맨틱 태그로

시간의 특정 지점 또는 구간, datetime과 같은 속성을 이용해 알림같은 기능 구현합니다.

별다른 css 효과는 없습니다.

<div>오늘은 <time datetime="2024-10-06">10월 6일</time>입니다</div>
<div>
  <time datetime="18:00">오후 6시</time>부터 <time datetime="PT2H30M">2시간 30분</time>
  안에 저녁을 먹어야 합니다.
</div>

 

 

 

<address> 

<address> 콘텐츠 작성자나 사이트 소유자의 정보 즉 물리적 주소, URL, 이메일 주소, 전화번호, SNS ID, 좌표 등를 표시합니다. 

주로 이탤릭체(italic)로 표현되며, 대부분의 브라우저들은 <address> 요소의 위쪽과 아래쪽에 약간의 공백을 자동으로 삽입하여 다른 텍스트와 구분합니다.

<p>연락처</p>
<address>
  <a href="https://code-ruach.tistory.com/">code-ruach.tistory.com</a><br />
  <a href="tel:+821012341234">010-0000-0000</a>
</address>

 

 

 

 

<progress>

요소는 작업의 진행도를 나타내는 게이지를 표시합니다.

<meter> 요소와는 달리, <progress>의 value는 항상 0 이상이어야 하고, min 특성은 지정할 수 없습니다.

:indeterminate 의사 클래스를 사용해서 불확실한 상태의 <progress>만 선택할 수 있습니다

// 불확실한 상태
// 프로그레스바가 좌우로 계속 왔다갔다함
<progress></progress>

// 게이지가 정해진 상태
// 왼쪽에서 오른쪽으로 게이지가 참
<progress id="progress-bar" aria-label="불러오는 중..."></progress>

// 게이지가 정해진 상태
// 왼쪽에서 오른쪽으로 게이지가 참
<label for="progress">업로드 중:</label>
<progress id="progress" max="9" value="7"></progress>

progress 속성값
max	<progress>가 나타내는 작업을 완료하려면 필요한 총 작업량을 지정합니다.  지정할 경우 0보다 큰 유효한 부동소수점 숫자를 사용해야 합니다.  기본 값은 1입니다.
value	현재까지 완료한 작업량을 지정합니다.  0 이상, max 특성의 값 이하인 유효한 부동소수점 숫자를 사용해야 합니다.  value 특성을 지정하지 않을 경우, 작업이 언제 완료될지 특정할 수 없는 불확실한 상태를 나타내게 됩니다.

 

 

 

<meter>

범위를 정하고 해당하는 값이 어느정도인지 bar 형태로 알려주는 그래프 표시합니다.

// 기본
<meter value="40" min="0" max="100"></meter>

// 기본+타이틀
<div>
    참여율:
    <meter min="100" max="200" value="180"></meter>
</div>

// 기본+타이틀
<label for="gauge">게이지:</label>
<meter id="gauge" min="0" max="100" low="33" high="66" optimum="80" value="50">
</meter>

// bar 그래프 커트롤가능
<div>
    <label for="control">게이지 조절:</label>
    <input id="control" type="range" list="temperatures" min="100" max="240" value="180" />
  </p>
  <datalist id="gauge">
    <option value="160"></option>
    <option value="200"></option>
  </datalist>
</div>

meter 속성값
value	현재 값입니다. 최소와 최대 값(min과 max 특성)을 지정한 경우 그 사이 값을 사용해야 합니다. 지정하지 않았거나 잘못된 숫자일 경우의 기본 값은 0입니다. 지정했으나 최소 또는 최대 범위 밖으로 나가는 경우 각각 최소와 최대 값을 지정한 것으로 취급합니다.
max	측정 범위의 최대 한계입니다. 지정할 경우 최소 값(min 특성)보다 커야 합니다. 기본 값은 1입니다.
min	측정 범위의 최소 한계입니다. 지정할 경우 최대 값(max 특성)보다 작아야 합니다. 기본 값은 0입니다.
high	value가 이 값 이상이면 높은 값으로 취급합니다. 지정할 경우 최대 값(max 특성)보다는 작고, 낮은 값 및 최소 값(low와 min 특성)보다는 커야 합니다. 지정하지 않거나 최대 값보다 큰 값을 지정할 경우 최대 값과 동일하게 지정한 것으로 취급합니다.
low	value가 이 값 이하면 낮은 값으로 취급합니다. 지정할 경우 최소 값(min 특성)보다는 크고, 높은 값 및 최대 값(high와 max 특성)보다는 작아야 합니다. 지정하지 않거나 최소 값보다 작은 값을 지정할 경우 최소 값과 동일하게 지정한 것으로 취급합니다.
optimum	계량한 값이 최적의 상태인 경우를 지정합니다. min과 max 범위 내에 포함돼야 합니다. low와 high 특성을 함께 사용한 경우 어떤 범위가 최적의 범위인지 나타낼 수 있습니다. 예를 들어 optimum 특성 값이 min과 low 값의 사이라면 낮은 값 범위를 최적의 범위로 취급합니다. value가 최적 범위 내인지 바깥인지에 따라 브라우저가 <meter>의 색을 다르게 표현할 수 있습니다.
form	<meter>를 양식 소유자(<form> 요소)와 연결합니다.  같은 문서 상에 존재하는 <form>의 id 값을 지정하세요. 이 특성이 존재하지 않으면 <meter>의 양식 소유자는 가장 가까운 조상 <form>이 됩니다. form 특성은 <input type="number">의 값처럼, <meter>가 양식에 관련된 값을 보여줄 때만 사용합니다.

 

 

---

 

 

 

시멘틱 태그를 사용하는 이유

1. 접근성 향상

검색 엔진이 태그의 목적에 부합하게 설계되어있는 구조의 사이트에서 더욱 빨리 효율적으로 정보를 파악할 수 있어 검색 결과의 노출에 유리할 수 있게 해준다.

2. SEO (검색엔진최적화) 향상

일반적인 브라우저에서는 차이가 없지만 스크린리더(시각장애인을 위한 웹 서핑 프로그램)과 같은 환경에서는 웹 접근성과 사용성을 향상시켜준다.

3. 가독성 향상 (유지보수 향상)

시맨틱 태그를 사용하면 웹페이지의 가독성 또한 향상됩니다. 많은 div사용으로 관리가 어려워지는 문제점에서 벗어나 불필요하거나 중복되는 코드를 피하는 데 도움이 된다는 것입니다. 이를 통해 웹페이지를 더 빠르고 효율적으로 만들 수 있습니다.

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

 

---

 

Semantic HTML: What It Is and How to Use It Correctly

출처 : https://www.semrush.com/blog/semantic-html5-guide/

Semantic HTML: What It Is and How to Use It Correctly

 

---

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의

 

Semantics - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

 

html 태그 참조

W3Schools.com