3.1 <main> 태그
HTML5는 개발자들이 더 구조적이고 이해하기 쉬운 웹 페이지를 만들 수 있도록 도와주는 많은 새로운 시맨틱 요소들을 도입했어. 그중에서도 <main>
과 <aside>
태그는 각각 주요 콘텐츠와 보조 콘텐츠를 위한 컨테이너를 생성하는 데 사용돼.
<main>
태그는 문서의 주요 콘텐츠를 나타내. 이 태그 안에는 현재 페이지의 독특하고 중요한 콘텐츠가 들어가야 해. <main>
태그 안의 콘텐츠는 페이지마다 고유해야 하고, 로고, 사이드바, 네비게이션 링크, 또는 푸터와 같이 모든 페이지에 반복되는 요소들을 포함해서는 안 돼.
문법:
HTML
<main>
<!-- 페이지의 주요 내용 -->
</main>
사용 예:
HTML
<body>
<header>
<h1>Website Header</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>
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
</main>
<footer>
<p>© 2024 Example Website</p>
</footer>
</body>
주요 특징:
- 내용물:
<main>
태그는 페이지의 고유한 주요 콘텐츠를 포함해야 해. - 위치: 페이지에는
<main>
태그가 하나만 있어야 해. - 접근성:
<main>
태그는 페이지의 접근성을 향상시키고, 스크린 리더 같은 보조 기술이 주요 콘텐츠를 더 빠르게 찾을 수 있게 도와줘.
적용:
- 페이지의 주요 콘텐츠
- 현재 페이지와 관련된 독특한 내용
이점:
- 시맨틱 마크업: 검색 엔진과 보조 기술이 페이지의 주요 콘텐츠를 더 쉽게 이해할 수 있게 해줘.
- 페이지 구조 개선: 주요 콘텐츠를 페이지의 다른 부분, 예를 들어 헤더, 사이드바, 푸터와 명확히 구분해줘.
특징:
- 페이지마다 독특한 콘텐츠를 포함해야 해.
- 다른 페이지에서 반복되는 요소(예: 네비게이션 패널, 사이드바, 푸터 등)를 포함하면 안 돼.
3.2 <aside> 태그
<aside>
태그는 주요 콘텐츠와 관련 있지만 문서의 주요 흐름에 포함되지 않는 추가 콘텐츠를 나타내. 일반적으로 광고, 관련 기사 링크, 작가의 전기 등 보조 요소를 포함하는 사이드바에 사용돼.
문법:
HTML
<aside>
<!-- 추가 콘텐츠 -->
</aside>
사용 예:
HTML
<main>
<article>
<h2>Article Title</h2>
<p>This is the main content of the article.</p>
</article>
<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#related1">Related Article 1</a></li>
<li><a href="#related2">Related Article 2</a></li>
</ul>
<h3>About the Author</h3>
<p>Short bio of the author.</p>
</aside>
</main>
주요 특징:
- 내용물:
<aside>
태그는 주요 콘텐츠와 관련된 추가 정보를 포함하지만, 문서의 주요 흐름의 일부는 아니야. - 위치:
<main>
태그 안팎에 위치할 수 있으며, 컨텍스트에 따라 달라져. - 적용: 사이드바, 광고 블록, 관련 기사 링크 및 기타 보조 정보에 사용돼.
적용:
- 추가 정보가 있는 사이드바
- 광고 블록
- 관련 리소스에 대한 링크
- 주요 콘텐츠와 관련된 추가 자료
이점:
- 시맨틱 마크업: 검색 엔진과 보조 기술이 주 콘텐츠에 대한 보조 콘텐츠임을 이해할 수 있게 도와줘.
- 페이지 구조 개선: 추가 콘텐츠를 주요 콘텐츠와 명확하게 구분해서 페이지를 더 체계적이고 이해하기 쉽게 만들어.
특징:
- 주요 콘텐츠와 관련 있지만 그 일부는 아닌 콘텐츠를 포함해.
- 사이드바, 광고 블록, 구독 및 기타 추가 자료에 사용될 수 있어.