HTML : 시맨틱 태그 (Semantic Tag)

HTML : 시맨틱 태그 (Semantic Tag)

2025. 7. 29. 17:17ㆍFront-end (Basic)/HTML

1. 시맨틱 태그란?

html 문서를 작성할 때 의미에 맞는 태그를 사용하여 문서를 작성하면 가독성이 높아지고 유지 보수가 쉬워진다.

<div>를 남발하기보다 의미 있는 태그를 사용하는 것이다.

<section>
<argicle>
<footer>
<nav>
<aside>

또한 브라우저 검색 엔진은 HTML의 계층 구조에 따라 키워드의 중요도를 파악하기 때문에, 크롤러에 더 구체화된 정보를 제공할 수 있다.

스크린 리더가 글을 분석할 때도 시맨틱 태그로 논리 구조를 파악하기 때문에 시각장애인이 전체 레이아웃을 빠르게 파악하거나 원하는 영역으로 점프하는 것이 가능하다.

2. 시맨틱 태그들 알아보기

시맨틱 태그들의 의미를 알아보자.

1. <h1> ~ <h6>

각 섹션의 제목을 나타낸다. h1이 가장 높고, h6이 가장 낮다.

2. <header>

제목이나 대표 이미지가 들어가는 요소이다.

- <h1> 등의 요소나 로고 등을 포함한다.

<body>의 하위 요소일 경우, 웹 페이지 전체 헤더를 정의
<article>, <section> 등 Sectioning Content의 하위 요소일 경우, 해당 영역의 헤더를 정의

<header>
	<h1>기사 제목</h1>
    <p>00일보 000 기자 작성</p>
</header>

3. <footer>

전체 문서 또는 Sectioning Content의 바닥글로 사용된다.

- 주로 작성자, 관련 문서 링크, 라이선스, 색인 등의 데이터가 들어간다.

<footer>
	<p>기자 : 00일보 000</p>
    <p>모든 컨텐츠는 저작권법의 보호를 받으니까 불펌 금지</p>
</footer>

4. <main>

페이지의 콘텐츠 영역을 의미하며, 페이지당 한 번, <body> 아래에 직접 추가한다.

<body>
	<header>
    	<h1>00일보</h1>
        <nav>...</nav>
    </header>
	<main>
		<article>...</article>
        <article>...</article>
    </main>
    <footer>...</footer>
</body>

5. <article>

하나의 의미 있는 컨텐츠 블록 영역을 나타낸다. article만으로 단일 게시물을 나타내는 것이다.

- 블로그 항목, 게시물, 기사, 위젯 등에 사용된다.

<article>
	<img src="./img.png">
    <p>[속보 00구 00도 진도 4.0 지진 발생</p>
    <footer> 30분 전 작성...</footer>
</article>
<article>
	<img src="./img.png">
    <p>한강 작가, 노벨 문학상 수상</p>
    <footer> 1시간 전 작성...</footer>
</article>

6. <section>

페이지의 단일 부분을 그룹화할 때 사용한다.

- 기사의 헤드라인을 모으거나, 각 블로그의 피드 정보가 나타나는 영역

요소의 컨텐츠를 함께 묶는 것이 합리적일 때는 <article>보다 <section>을 사용하는 것이 좋다.

단, 의미 없이 단순히 스타일링을 위한 요소로 사용할 때는 <div>를 사용하는 것이 좋다.

<h1>결혼식 식순</h1>
<section>
	<h2>식순</h2>
    <p>개식사</p>
    <p>주례 소개</p>
</section>
<section>
	<h2>피로연</h2>
    <p>하객 인사</p>
    <p>케이크 커팅</p>
</section>

7. <aside>

기본 컨텐츠와는 직접적인 관련이 없지만, 간접적인 추가 정보를 포함하는 요소이다.

- <nav>요소, 광고, 인용과 같이 분리된 컨텐츠를 나타낼 때 사용

8. <nav>

다른 페이지나 내 문서의 특정 영역으로 이동시키는 링크를 나타낸다.

3. 검색엔진 SEO

SEO는 Search Engine Optimization의 약자이다.

검색 엔진에 더 노출 시키기 위해서는 적절하게 코드를 작성할 필요가 있다.

시맨틱하게 HTML 문서 작성하기
<title>을 적절하게, 너무 길지 않게 작성하기
<meta name="description">을 이용하여 두세 문장 정도의 간략한 페이지 설명 남기기
<meta charset="UTF-8">로 통일된 인코딩 방식 지정하기
open graph, twitter 태그를 사용해 외부 사용자 유인하기

<meta property="og:title" content="페이지 이름"/>
<meta property="og:description" content="간략한 한두 줄 설명"/>

→ og 태그는 페이스북에서 만든 프로토콜로, 여러 상황에서 동일한 메타 정보를 쉽게 표시하도록 만들어졌다.

카카오, 네이버 링크 공유 시, og태그에 작성된 정보로 노출이 된다.

→ og:title, og.description과 같이 값에 og:(property)를, content 프로퍼티에 원하는 값을 입력하여 작성한다.

자세한 작성 방법 및 다양한 태그 정보를 open graph 공식 사이트(https://ogp.me/)에서 확인할 수 있다.

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

'Front-end (Basic) > HTML' 카테고리의 다른 글

<a> 태그에 대해 알아보자 (0)	2025.11.01
HTML : 메타태그 <meta> (2)	2025.07.29
HTML : 링크 태그 <a> (0)	2025.07.29
HTML 1 : html 기초 (0)	2025.01.21

🥔 감자의 오묘한 개발 🥔