[HTML] 시멘틱 (semantic) 태그
2023. 3. 7. 01:05ㆍ기술 창고/HTML
728x90
SMALL
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>시멘틱 태그</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Logo</h1>
<h2>menu</h2>
</header>
<main>
<aside><h2>Sub Menu</h2></aside>
<section>
<h2>Main Menu</h2>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
<article>
<h3>article title</h3>
<p>article contents</p>
</article>
</section>
</main>
<footer>
<h2>footer</h2>
</footer>
</div>
</body>
</html>
<!--
# 시멘틱 태그는 기존의 div 태그 안에 id 혹은 class 로 네이밍을 일일히 지정하여 불필요한 코드량을 줄여줌과 동시에
관련된 내용에 대한 명확한 명시가 되어있기때문에 파악하기에도 용이하다.
# <header> = 사이트의 상단 head에 들어갈 내용을 지정하는 태그
(시멘틱 태그를 사용하지 않을 경우 : <div id="header">)
# <main> = 사이트의 가장 중요한 본문 메인 내용을 지정하는 태그
(시멘틱 태그를 사용하지 않을 경우 : <div id="content">)
# <aside> = 사이드 쪽에 붙는 내용들을 지정하는 태그
# <section> = 본문 내용 중에서도 구역이 나눠져있는 섹션을 지정하는 태그
# <article> = 섹션 안에서도 여러 정보 구역들을 구분하기 위한 태그 (굳이 섹션 안이 아니어도 됨)
# <footer> = 사이트의 하단 foot에 들어갈 내용을 지정하는 태그
(시멘틱 태그를 사용하지 않을 경우 : <div id="footer">)
-->- 시멘틱 태그 : 의미를 부여한 태그.
- <header>, <main>, <footer> : 앞서 div 태그 안에 id 속성으로 일일히 구분값을 지정해준 경우가 있는데, 이는 복잡한 페이지의 경우일 수록 매우 비효율적인 작업이다. 따라서 시멘틱 태그는 태그 자체에 의미를 부여하여 설정하는 태그이다. header 태그는 상단에 들어갈 내용, main 태그는 본문의 중요한 메인 내용들이 들어갈 태그, footer 태그는 하단의 정보들을 포함하는 태그이다.
- <aside> : 사이드 메뉴를 지정하기 위한 태그.
- <section> : 내용 중에서 또다른 섹션 구역을 나누기 위한 태그.
- <article> : 기사 정보를 위한 태그.
728x90
반응형
LIST
'기술 창고 > HTML' 카테고리의 다른 글
| [HTML] paragraph 텍스트 (0) | 2023.03.07 |
|---|---|
| [HTML] Heading 태그 (0) | 2023.03.07 |
| [HTML] div 태그로 그룹화 (0) | 2023.03.07 |
| [HTML] 텍스트 정의 요소들 (0) | 2023.03.07 |
| [HTML] 태그 블록 인라인 요소 (0) | 2023.03.07 |