Semantic 태그 (의미론적 태그)
Semantic 태그의 이점
- 검색엔진 최적화
- 웹 접근성 향상
- 가독성 향상
- 레이아웃 구성 시 유용하게 사용됨
HTML Semantic Elements
- <header> : 페이지에 대한 정보를 담는 태그로, 페이지 상단에 위치
- <nav>: 다른 페이지나 같은 페이지 안에 다른 부분으로 이어주는 네비게이션 링크로 구성된 섹션을 표현
- <aside>: 페이지 전체 내용과는 어느 정도 관련성이 있지만, 주요 내용과는 직접적인 연관성은 없는 분리된 내용을 담고 있음
- <main>: 문서의 body요소의 주 콘텐츠를 정의할 때 사용
- <section>: 문서나 응용프로그램의 일반적인 섹션을 표현
- <articles>: 여러가지 아이템들을 묶어 재사용 가능하게 그룹화
- <footer>: 주로 저작권 정보나 서비스 제공자 정보들을 나타내면 사이트 하단에 위치
- <details>: 추가적인 정보를 나타내거나 사용자가 요청하는 정보를 나타냄
- <summary>: 부모요소인 details 요소의 내용에 대한 요약이나 캡션 등을 나타냄
- <figcaption>: 부모요소인 figure 요소의 내용들에 대한 캡션, 혹은 제목을 나타냄
- <figure>: 일러스트, 다이어그램, 사진, 코드 등에 주석을 다는 용도로 사용
- <mark>: 하나의 문서 내에서 다른 문맥과의 관련성을 나타내기 위해서 참조 목적으로 마킹되거나 하이라이트 된 텍스트를 표현
- <time>: 24시간에서의 시간 혹은 그레고리력에서의 정밀한 날짜를 나타냄
https://developer.mozilla.org/ko/docs/Glossary/Semantics
Semantics - 용어 사전 | MDN
프로그래밍에서,시맨틱은 코드 조각의 의미를 나타냅니다 — 예를 들어 ("이게 어떻게 시각적으로 보여질까?" 보다)"이 Javascript 라인을 실행하는 것은 어떤 효과가 있는가?", 혹은 "이 HTML 엘리먼
developer.mozilla.org
<-- semantic 적용 X -->
<body>
<div class="header">Header 영역</div>
<div class="nav">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</div>
<div class="main">Content 영역</div>
<div class="footer">Footer 영역</div>
</body><-- semantic 적용 O -->
<body>
<header>Header 영역</header>
<nav>
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
<main>Content 영역</main>
<footer>Footer 영역</footer>
</body>
'프론트엔드 > HTML' 카테고리의 다른 글
| 이미지 & 멀티미디어 태그 (0) | 2022.11.18 |
|---|---|
| Block 레벨 요소와 Inline 레벨 요소 (0) | 2022.11.18 |
| Table태그 (0) | 2022.11.18 |
| 목록태그 (0) | 2022.11.18 |
| Font태그 (0) | 2022.11.18 |
