728x90
시맨틱 태그
웹 문서의 구조와 의미를 명확하게 정의하기 위해 사용되는 태그
이러한 시맨틱 태그들은 웹 페이지의 가독성을 높이고 검색 엔진 최적화를 돕는데 큰 역할을 한다
시맨틱 태그의 종류
- <header> : 웹 페이지나 섹션의 제목이나 소개 부분을 감싸는 태그로, 로고, 제목, 네비게이션 등을 포함할 수 있다
- <nav> : 주요 내비게이션 링크들을 담는 태그로 사이트의 메뉴를 정의할 때 사용된다
- <main> : 문서의 주요 내용을 감싸는 태그로, 사이트의 메뉴를 정의할 때 사용된다
- <article> : 독립적인 내용의 블록을 정의하는 태그로, 뉴스 기사, 블로그 포스트, 댓글 등이 포함될 수 있다
- <section> : 문서의 일반적인 섹션을 정의하는 태그로, 주제별로 그룹화된 내용을 나타낸다
- <aside> : 주요 내용과는 관련성이 적지만 부가적인 정보를 담는 태그로, 사이드바나 광고 영역에 사용될 수 있다
- <footer> : 웹 페이지의 섹션의 바닥글을 담는 태그로, 저작권 정보, 연락처 정보 등이 위치할 수 있다
task.html
<!DOCTYPE html>
<html>
<head>
<title>간단한 블로그 포스트</title>
</head>
<body>
<header>
<h1>나의 블로그</h1>
</header>
<nav>
<ul>
<li><a href="#">홈</a></li>
<li><a href="#">블로그</a></li>
<li><a href="#">소개</a></li>
<li><a href="#">문의</a></li>
</ul>
</nav>
<main>
<article>
<h2>첫 번째 포스트 제목</h2>
<p>이곳은 첫 번째 포스트의 내용이 들어갈 자리입니다...</p>
</article>
<article>
<h2>두 번째 포스트 제목</h2>
<p>두 번째 포스트의 내용도 이곳에 적을 수 있습니다...</p>
</article>
</main>
<aside>
<h3>광고</h3>
<p>특별 할인 이벤트! 지금 바로 확인하세요!</p>
</aside>
<footer>
<p>© 2023 나의 블로그. 모든 권리 보유.</p>
</footer>
</body>
</html>
728x90
'Web > HTML' 카테고리의 다른 글
| [Javascript] 브라우저 객체 모델 (BOM) (0) | 2023.06.25 |
|---|---|
| [HTML] form 태그 (0) | 2023.06.24 |
| [HTML] table 태그 (0) | 2023.06.23 |
| [HTML] img 태그 (0) | 2023.06.22 |
| [HTML] 용어 정리 (0) | 2023.06.20 |
