[HTML] Semantic Tag(시멘틱 태그)

HTML, CSS

[HTML] Semantic Tag(시멘틱 태그)

hyun0907 2024. 2. 14. 18:59

우선 Semantic(시멘틱)이란, '의미의, 의미론적'이라는 뜻입니다. 시멘틱 태그는 말 그대로 의미가 있는 태그라는 뜻입니다.

1. 시멘틱 태그를 써야 하는 이유

웹 표준 코드인 HTML5도 구조가 복잡할 경우, 소스 코드에서 구조 파악하기를 하기가 쉽지 않습니다. 따라서 시멘틱 태그를 사용하도록 권장하고 있습니다. 시멘틱 태그는 HTML5에서 추가된 태그로 페이지의 구조를 쉽게 파악하도록 도와줍니다. 또한, 검색 엔진 같은 프로그램에서도 콘텐츠를 쉽게 이해할 수 있게 됩니다. 따라서 검색 엔진 최적화 등 프로그램에서 자료를 검색하여 정보의 의미를 분석할 수 있게 도와줍니다. 그리고 시각 장애인들을 위한 웹 표준 방식이기도 합니다.

HTML5 이전, 시멘틱 태그가 나오기 전에는 웹 페이지에서 구조를 만들기 위해 대부분 코드에 <div>, <span>같은 태그로 콘텐츠를 구분했습니다. 그 다음 id 속성으로 이름을 붙여 구별했습니다. id 속성은 대부분 작업자에 의해 지정되었고 코드를 수정하거나 구조를 파악하기 위해서는 많은 어려움이 있었습니다. 또한 시각 장애인이 화면 낭독기를 이용하여 검색 엔진에서 웹 소스를 읽을 때 어떤 부분이 메뉴이고 본문인지 구분하기 어려워 부적합한 구조가 됐습니다.

하지만, HTML5에서 시멘틱 태그가 나오면서 더 명시적이고 직관적인 구조의 설계가 시작됐습니다.

일반적인 태그와 시맨틱 태그의 차이를 살펴봅시다.

/* CSS */

.header{

height: 200px;

background: pink;

}

header{

height: 200px;

background: gold;

}

<body>

</body>

이렇게 원래는 div에 class나 id 이름을 붙여 역할을 명시했지만, 시멘틱 태그가 나오면서 태그 자체 이름이 <header>처럼 쓸 수 있게 되었습니다.

시멘틱 태그를 써야하는 이유에 대해서 정리하자면 크게 4가지입니다.

검색 엔진 최적화
접근성 향상
코드의 가독성 향상
유지, 보수 유용

2. 시멘틱 태그의 종류

시멘틱 태그는 다양한 의미가 포함된 태그들로 구성되어 있습니다.

1) <header> 태그

<header>는 페이지 맨 위에 삽입하는 머리말입니다. 사이트 전체의 헤더는 주로 로고를 중심으로 내비게이션, 메뉴, 검색 창 등이 들어갑니다. 내비게이션 메뉴는 <nav> 태그로 구성할 수 있습니다.

2) <nav> 태그

해당 태그를 사용하면 어떤 부분이 메뉴인지 쉽게 파악할 수 있고 사이트 내의 내비게이션 메뉴를 묶거나 독립적으로 구성할 수 있습니다. 문서 내에서 여러 개의 <nav> 태그를 사용할 경우 id 선택자로 구분하여 스타일을 꾸미고, 메뉴로 구성되어 있는 영역에 대해서는 <nav> 태그를 언제든지 내부적으로 사용하거나 독립하여 사용할 수 있습니다. 문서의 모든 링크가 <nav>에 포함되어 있을 필요는 없습니다. 주요 탐색 링크 블록을 위한 요소입니다.

3) <section> 태그

콘텐츠 영역을 포함하는 태그입니다. 해당 콘텐츠를 주제별로 묶을 때 사용하며 <section> 태그 내부에는 <h1>~<h6> 제목 태그가 사용됩니다. <section> 태그 안에 다른 <section> 태그를 넣을 수도 있습니다.

4) <article> 태그

article의 사전적 의미는 신문이나 잡지의 '기사'를 뜻하는 것으로 <article> 태그는 웹 상의 실제 내용을 작성하는 것입니다. 블로그의 포스트나 웹 사이트 내용과 같은 독립적인 웹 콘텐츠가 이에 해당합니다. <section> 태그는 문맥의 흐름 중 콘텐츠를 주제 별로 묶을 때 사용하지만, <article> 태그는 독립적인 하나의 콘텐츠입니다. 블로그 게시물, 뉴스 기사, 제품 리뷰 등이 있습니다. <article> 태그 안에 <section> 태그를 넣을 수도 있습니다.

5) <aside> 태그

웹 문서 왼쪽이나 오른쪽 또는 하단에 사이드 바가 표시되는 것을 볼 수 있는데, 이런 사이드 바를 만드는 태그가 <aside> 태그입니다. <aside> 태그는 필수 요소는 아니며 광고나 일반적인 링크 모음처럼 문서의 메인 내용에 영향을 미치지 않는 내용을 넣을 때 사용합니다.

6) <footer> 태그

웹 문서의 하단에 들어가며 저작권 표시와 같은 내용과 연락처 정보 등을 표시합니다. 도움이 되는 소셜 미디어 사이트에 대한 링크와 같은 추가 링크도 포함될 수 있습니다.

또 다른 태그의 종류로는 다음과 같은 태그들이 있습니다.

<main>

메인 내용 즉, 문서의 핵심을 담는 태그입니다. 웹 사이트의 텍스트 본문이나 콘텐츠를 나타냅니다. 문서에서 단 한 번만 사용되어야 하므로 주요 내용을 모두 감싸는 구조로 들어갑니다. 또한 어떤 태그의 자식으로 들어갈 수 없습니다.

<details>

사용자가 보거나 숨길 수 있는 추가 세부 정보에 대한 태그입니다. 사용자와 상호작용이 가능합니다. 기본적으로 닫은 상태이며 클릭하면 내용이 보이면서 확장됩니다. 참고로 <details> 태그와 함께 쓰이는 <summary> 태그는 <details>에서 보이는 부분을 담당합니다. <summary> 태그는 <details>의 첫 번째 자식이어야 합니다.

<figcaption>, <figure>

이 두 태그들에 대해서는 다음 글에서 이미 설명했으므로, 넘어가겠습니다.

[HTML] 이미지 태그 - <img>, 경로, <figure>, <figcaption>

1. : 이미지 HTML 문서에는 img 태그를 사용하여 이미지를 넣을 수 있습니다. 웹 페이지에서 주로 사용되는 이미지는 다음과 같습니다. JPEG (대표적인 이미지 표현 방식으로 색상을 가장 잘 표현할

hyun0907.tistory.com

<time>

시간 관련 태그입니다.

쓸 수 있는 속성으로 datetime이 있으며 datetime 속성 값에는 다음과 같은 값이 들어갑니다.

YYYY(년도)-MM(월)-DD(일)
T(혹은 공백으로 날짜와 시간을 함께 쓸 경우에 구분하는 용도)
hh(시):mm(분):ss(초)
TZD 표준 시간대 ('+09:00' 처럼 사용)

만약 datetime을 ins와 del에 사용 시 언제 추가/삭제된 글인지 명시할 수도 있습니다.

<dfn>

용어 정의 태그입니다. 문서 내에서 중요한 키워드로 인식합니다.

<dfn>에 대해서는 다음 글에서 자세히 다룬 적이 있습니다.

[HTML, CSS] 목록 표현 태그 <li>, <ul>, <ol> / 정의 목록 태그 <dl>, <dt>, <dd>, <dfn>와 목록 스타일 속성

1. 목록 표현 태그 웹 문서를 작성할 때, 목록을 작성해야 할 때가 많습니다. 순서 정렬이나 메뉴 등 리스트를 표시해야 할 때가 있는데 이때 목록 표현 태그를 사용합니다. CSS를 적용하면 홈페이

hyun0907.tistory.com

<wbr>

<br> 태그가 강제 줄 바꿈이었다면, <wbr>은 정해진 규격 내에서 자동으로 줄을 바꿉니다. 길이가 긴 글인 경우에 잘못된 부분에서 단어 자체가 줄 바꿈이 되어 나타나지 않게 하기 위하여 사용합니다. 따라서 영문에서 많이 쓰입니다.

<dfn>, <time>, <wbr> 예문

<style>

width: 300px;

border: 5px solid #000;

}

</style>

<body>

<br>

<br>

<p>The storybegins<br>inthenursery of Darling home, where Mrs. She is surprised to find that all the children have been thinking of someone named Peter Pan. </p>

<p>The storybegins<wbr>inthenursery of Darling home, where Mrs. She is surprised to find that all the children have been thinking of someone named Peter Pan. </p>

</body>

3. 시멘틱 태그로 레이아웃 구조 연습해보기

시멘틱 태그를 이용하여 레이아웃 구조를 구성해보겠습니다.

<body>

<ul>

</ul>

</nav>

</header>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</aside>

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum, ducimus culpa doloribus, quidem sint consequuntur consequatur debitis perspiciatis quo, similique provident! Dolorem, delectus? Magnam sunt vitae aperiam, harum fuga laudantium.</p>

</section>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam, fugit unde? Alias nam dolor nostrum similique.</p>

</article>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam, fugit unde? Alias nam dolor nostrum similique.</p>

</article>

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Numquam, fugit unde? Alias nam dolor nostrum similique.</p>

</article>

</section>

</main>

<address>서울특별시 OO구 OO동</address>

</footer>

</div>

</body>

<style>

/* 초기화*/

*{margin: 0; padding: 0;}

ul, li{list-style: none;}

.wrap{

width: 1000px;

margin: 0 auto;

}

header{

height: 100px;

border: 2px solid #000;

}

header h1{

float: left; /* nav와 옆으로 나열하기 위해 */

width: 200px; line-height: 100px;

background: pink;

text-align: center;

}

header nav{

float: right;

}

header nav li{

float: left; /* li도 나열하기 위해 */

background: gold;

line-height: 50px;

padding: 0 30px;

}

main{

background: beige;

}

main::after{

content:"";

display: block;

clear: both;

}

aside{

width: 280px;

background: gold;

float: right;

}

section{

width: 700px;

float: left;

background: skyblue;

margin: 10px;

}

article{

width: 210px;

background: #ccc;

float: left; /* 블로그, article 영역을 옆으로 나열하기 위해 */

margin: 10px;

}

footer{

border: 2px solid #000;

height: 100px;

text-align: center;

line-height: 100px;

}

</style>