2023. 10. 4. 15:41ㆍHTML5
<header> 요소는 웹 페이지 상단이나 웹 페이지 내의 섹션의 소개 또는 탐색 콘텐츠를 정의하는 데 사용됩니다.
일반적으로 페이지 제목, 로고, 탐색 메뉴 및 다른 콘텐츠가 포함되며 컨텍스트를 제공하거나 탐색을 돕는 데 사용됩니다.
<header> 요소는 블록 레벨 컨테이너이며 HTML5에서 도입된 의미론적 요소 중 하나로 웹 문서의 구조와 의미를 향상시키는 데 사용됩니다.
<header> 요소에 대한 자세한 설명
1. 소개: <header> 요소는 섹션 또는 페이지의 시작 부분에 나타나는 콘텐츠에 대한 컨테이너로 사용됩니다. 일반적으로 웹 페이지의 가장 위에 위치하며 주요 정보와 탐색 옵션을 제공합니다.
2. 페이지 제목: <header> 내에서 주로 페이지 제목 또는 헤딩을 포함하는 것이 일반적입니다. 이는 주로 가장 중요한 콘텐츠와 컨텍스트를 제공합니다.
3. 로고: 많은 웹 사이트는 브랜딩을 위해 로고를 <header> 내에 배치합니다. 이는 주로 <img> 요소를 사용하여 구현됩니다.
4. 탐색: <header>는 탐색 메뉴를 배치하기 위한 일반적인 위치입니다. 목록 (<ul> 및 <li>)과 앵커 링크 (<a>)를 사용하여 탐색 메뉴를 만들 수 있습니다.
5. 컨텍스트: <header> 내의 콘텐츠는 나머지 페이지 또는 섹션에 대한 컨텍스트를 제공합니다. 사용자는 웹 사이트의 이름, 목적 및 사용 가능한 탐색 옵션을 빠르게 확인할 수 있습니다.
6. SEO (검색 엔진 최적화): 검색 엔진은 일반적으로 <header> 내의 콘텐츠에 더 중요한 가중치를 부여합니다. 이는 주로 페이지에 대한 중요한 키워드와 페이지 정보를 포함하기 때문입니다.
7. 스타일링: 웹 사이트의 <header> 및 내용을 원하는 시각적 모양으로 만들기 위해 CSS를 사용할 수 있습니다.
다음은 HTML 문서에서 <header> 요소를 사용하는 방법에 대한 기본 예입니다.
<!DOCTYPE html>
<html>
<head>
<title>Sample Page</title>
</head>
<body>
<header>
<h1>Welcome to Our Website</h1>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<!-- 페이지의 주요 내용이 여기에 표시됩니다. -->
</main>
<footer>
<!-- 바닥글 내용이 여기에 표시됩니다. -->
</footer>
</body>
</html>
- <header> 요소는 페이지 제목에 대한 <h1> 요소와 <nav> 요소 내의 탐색 메뉴를 포함하는 소개 콘텐츠를 포함합니다.
- <header> 내에서 <h1> 요소는 페이지의 기본 제목을 나타내며 필수적인 콘텐츠와 컨텍스트를 제공합니다.
- <nav> 요소 내에 포함된 탐색 메뉴는 순서가 지정되지 않은 목록(<ul>)과 다른 섹션에 대한 앵커 링크(<a>)가 포함된 목록 항목(<li>)으로 구성됩니다.
<header>요소는 웹 문서 내에 구조화되고 의미 있는 계층 구조를 생성하여 문서 또는 섹션의 시작을 나타내는 데 도움이 됩니다.
웹 페이지의 여러 부분을 깔끔하게 분리하는 동시에 접근성, 검색 엔진 최적화 및 전체 문서 구조를 향상시킵니다.
'HTML5' 카테고리의 다른 글
| [HTML5] <src> 와 <href> 뭐가 다를까? (0) | 2024.06.27 |
|---|---|
| [HTML5] 목록을 만들어 주는 <ol>and</ol>, <li>and</li> (1) | 2023.10.03 |
| [HTML5] 문장을 하나의 단락으로 만들어 주는 <p>and</p> (0) | 2023.10.03 |
| [HTML5] 드롭다운 메뉴 <select><option value="option1">옵션1</option></select> (0) | 2023.10.01 |
| [HTML5] 나이(숫자) 입력 양식 폼 <type="number"> (0) | 2023.10.01 |