2024. 10. 15. 21:17ㆍFront-End의 모든것/HTML
안녕하세요!
오늘도 활기차게 HTML에 대해서 한번 알아볼까요?
이전시간에는
시맨틱 마크업에 필수적인 태그중 하나인 <footer>태그에 대해서
알아보았는데요,
이번에도 빠질 수 없는 태그인 <header> 태그에 대해서 한번 알아보고자 합니다!
1️⃣ header 태그란?
<header> 태그는 HTML5에서 도입된 구조적 요소로, 웹 페이지나 문서의 머리말 부분을 정의할 때 사용됩니다. 일반적으로 웹사이트나 각 섹션의 소개나 내비게이션, 로고, 제목 등의 요소가 포함됩니다. <header>는 웹 페이지 전체의 헤더 또는 개별 섹션의 헤더로 사용할 수 있습니다.
2️⃣ 주요 특징
- 구조적인 의미: <header> 태그는 단순히 스타일링을 위한 요소가 아니라, 웹 페이지의 머리말 구조를 명확하게 정의하는 의미론적 요소입니다. 검색 엔진, 스크린 리더 등도 이 구조를 인식하여 문서의 의미를 파악합니다.
- 내부에 포함될 수 있는 요소들:
- <h1> ~ <h6>: 제목
- <nav>: 내비게이션 메뉴
- 로고 이미지 또는 브랜드 이름
- 기타 소개 텍스트나 버튼 등
- 반복 사용 가능: <header>는 웹 페이지나 각 섹션마다 여러 번 사용할 수 있습니다. 예를 들어, 웹 사이트 전체의 머리말뿐만 아니라, 기사나 섹션별로도 고유의 <header>를 가질 수 있습니다.
- 헤더의 위치: 일반적으로 문서 상단에 위치하지만, 반드시 상단에 있어야 하는 것은 아닙니다. 예를 들어, 섹션 내에서 사용할 때는 그 섹션의 상단에 위치하게 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Header 태그 예시</title>
</head>
<body>
<!-- 웹사이트 전체 헤더 -->
<header>
<img src="logo.png" alt="사이트 로고">
<h1>내 웹사이트</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- 본문 내용 -->
<section>
<header>
<h2>섹션 제목</h2>
<p>이 섹션에 대한 소개입니다.</p>
</header>
<p>섹션의 본문 내용이 여기에 들어갑니다.</p>
</section>
</body>
</html>
3️⃣ 주의 사항
- <header> 태그 안에 다른 헤더 관련 태그(<header>, <footer>, <address>)를 중첩해서 사용하지 않도록 주의해야 합니다.
- <header>는 반드시 문서의 최상단에 있어야 하는 것은 아니며, 필요한 곳에 적절히 배치할 수 있습니다.
<header>는 웹 페이지의 구조와 접근성을 높이는 중요한 요소로,
사이트의 기본적인 레이아웃을 정의하고 사용자가 페이지를 더 쉽게 탐색할 수 있도록
도와주는 역할을 하고있습니다!
예전에는
(정말 너무 옛날이긴 하지만..)
div태그로 모든게 다 가능해 div가 짱이야 !
라는분들이 계셨는데..
아직도 이러한분은 안계시리라 믿습니다
다음 시간에는 <nav> 태그에 대해서 알아보고자 하는데요,
항상 관심가져주시고 제 글을 읽어주시는 분들께
너무너무 벅찬마음을 가지고 있어요 ㅠㅠ
HTML, CSS, Javscrpt등 궁금하신 점이 있으시다면
댓글로 언제든지 질문해주시면 최대한 빠르고 정확하게 답변드리겠습니다!!
소통!!
그럼 저는 이만!
'Front-End의 모든것 > HTML' 카테고리의 다른 글
| HTML 이란? - main 태그에 대해서 -7 (4) | 2024.10.17 |
|---|---|
| HTML 이란? - nav 태그에 대해서 -6 (1) | 2024.10.16 |
| HTML 이란? - footer 태그에 대해서 -4 (0) | 2024.10.14 |
| HTML 이란? - body 태그에 대해서 -3 (3) | 2024.10.13 |
| HTML 이란? - head 태그에 대해서 -2 (6) | 2024.10.12 |