2024. 10. 17. 21:53ㆍFront-End의 모든것/HTML
오늘 하루는 어떠셨을까요?
고된하루를 보내신 분도 계실거고
비교적 순탄히 지나가신 분들도 계실거라 생각이 드는데...
이 모든 분들이
제 글을 읽어주시기 위해 접속해주시다니..
완전 럭키비키쟈냐
그럼 오늘은 <main> 태그에 대해서 알아보고자 합니다!
다들 조금만 힘내셔서 다함께 알아보도록 해요 !!
1️⃣ main 태그란?
<main> 태그는 HTML5에서 도입된 시맨틱 태그로, 문서의 주요 콘텐츠를 정의할 때 사용됩니다. 이 태그는 웹 페이지에서 핵심적인 내용(본문)을 구분하며, 페이지에서 유일하게 한 번만 사용해야 하는 중요한 시맨틱 요소입니다.
2️⃣ 주요 특징
- 문서의 주요 콘텐츠를 정의:
- <main> 태그는 웹 페이지나 애플리케이션의 주 콘텐츠 영역을 명확히 정의합니다. 주로 웹 페이지의 중앙에 위치하며, 해당 페이지의 주제를 중심으로 관련된 콘텐츠를 담습니다.
- 유일성:
- <main> 태그는 한 페이지에서 단 한 번만 사용해야 합니다. 이 태그는 페이지의 주된 내용을 나타내기 때문에, 다른 내비게이션이나 부가적인 요소(예: 사이드바, 헤더, 푸터 등)와는 분리되어야 합니다.
- 구조적 구분:
- <main> 태그 안에는 <header>, <footer>, <aside>, <nav> 등의 요소가 포함되지 않아야 합니다. 이들은 주 콘텐츠 외의 부수적인 정보나 내비게이션을 담당하는 부분들이기 때문에 구분되어야 합니다.
- 접근성:
- <main> 태그는 접근성 측면에서 매우 유용합니다. 스크린 리더와 같은 접근성 도구를 사용하는 사용자들은 이 태그를 통해 페이지의 핵심 콘텐츠로 바로 이동할 수 있습니다. 또한, 검색 엔진도 이 태그를 사용하여 주 콘텐츠를 더 명확하게 인식할 수 있습니다.
3️⃣ 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example</title>
</head>
<body>
<header>
<h1>웹사이트 제목</h1>
</header>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
<main>
<h2>메인 콘텐츠 제목</h2>
<p>이곳에 주요 콘텐츠가 들어갑니다. 메인 콘텐츠는 페이지에서 가장 중요한 정보를 포함하며, 주제를 중심으로 구성됩니다.</p>
</main>
<aside>
<p>부가 정보나 광고 등의 사이드바 내용</p>
</aside>
<footer>
<p>© 2024 웹사이트. All rights reserved.</p>
</footer>
</body>
</html>
구조적 구분
위의 예시에서 보듯이, <main> 태그는 페이지의 주된 내용을 감싸며, <header>, <nav>, <aside>, <footer> 등의 요소는 모두 <main> 바깥에 위치하게 됩니다. 이것은 각 부분의 의미와 역할을 명확하게 구분하기 위한 방법입니다.
4️⃣ 주요 목적과 사용 사례
- 주 콘텐츠 구분:
- <main> 태그는 사용자나 검색 엔진이 페이지의 주 콘텐츠를 쉽게 찾을 수 있도록 도와줍니다. 예를 들어, 블로그 포스트, 제품 설명 페이지, 뉴스 기사 등의 핵심 내용을 감싸는 데 사용됩니다.
- SEO(검색 엔진 최적화):
- 검색 엔진이 페이지를 크롤링할 때, <main> 태그는 문서의 중요한 콘텐츠를 식별하는 데 도움을 줍니다. 이로 인해 SEO 측면에서 더 나은 검색 결과를 얻을 수 있습니다.
- 접근성 향상:
- 스크린 리더와 같은 접근성 도구를 사용하는 사용자들은 <main> 태그 덕분에 불필요한 요소들을 건너뛰고 바로 중요한 콘텐츠로 접근할 수 있습니다. 특히 내비게이션 링크나 사이드바를 계속해서 들을 필요 없이 빠르게 주요 내용으로 이동할 수 있습니다.
- 중복 피하기:
- <main> 태그는 문서에서 유일하게 존재해야 하기 때문에, 하나의 문서에 여러 개의 주 콘텐츠 블록이 있을 경우 <section>이나 <article>과 같은 태그를 사용하는 것이 좋습니다. 예를 들어, 여러 개의 독립적인 기사나 섹션이 있는 페이지에서는 각각을 <article> 또는 <section>으로 감싸고, 이들 모두를 <main> 안에 포함시킬 수 있습니다.
5️⃣ 잘못된 사용 예시
<main>
<header>
<h1>잘못된 예시</h1>
</header>
</main>
이 경우, <main> 태그 안에 <header>를 포함하는 것은 적절하지 않습니다. <header>, <footer>, <nav>는 주 콘텐츠와 구분되는 요소이기 때문에 <main> 바깥에 있어야 합니다.
6️⃣ <main> 태그가 필요하지 않은 경우
페이지의 부가적 내용(예: 사이드바, 광고, 보조 메뉴 등)을 담을 때는 <main> 태그를 사용하지 않습니다. 이러한 요소는 메인 콘텐츠가 아니므로 <aside>, <nav> 등 다른 시맨틱 태그로 구분해야 합니다.
7️⃣ 접근성 및 SEO 관점에서의 이점
- 접근성:
스크린 리더가 <main> 태그를 인식하여, 사용자가 반복적으로 듣게 되는 페이지 내비게이션이나 사이드바 등을 건너뛰고, 바로 주요 콘텐츠로 이동할 수 있습니다. 이는 접근성 표준을 준수하고 웹사이트 사용자 경험을 크게 향상시킵니다. - SEO:
<main> 태그는 검색 엔진에게 문서의 주요 콘텐츠가 어디에 위치하는지 알려줍니다. 검색 엔진은 <main> 안에 포함된 콘텐츠를 보다 중요하게 취급할 수 있으며, 이는 검색 결과에서 더 높은 순위를 차지할 가능성을 높입니다.
<main> 태그는 웹 페이지의 핵심 내용을 정의하고,
문서의 구조를 시맨틱하게 구분하여 사용자와 검색 엔진이 쉽게 인식할 수 있게 도와주기에,
적절한 내용을 담아서 사용하는게 좋겠죠??
결론적으로,
<main> 태그는 웹 개발에서 웹 페이지 구조를 명확하게 하고,
접근성과 SEO 측면에서 중요한 요소입니다.
오늘은 HTML5의 구조적으로 중요한 태그인
<main>태그를 알아보았습니다!
태그를 모두 배우기에는 너무 많아 쉽게 지칠 수 있어,
주요 태그들 위주로 알아본 후
실제로 상황에 맞는 태그를 생각하며 코딩을 하시는 트레이닝이 된다면
마크업장인(?) 이 되실수 있어요!
그럼 오늘 하루도 힘차게 마무리 하도록할게요!
다들 굿잠!
'Front-End의 모든것 > HTML' 카테고리의 다른 글
| HTML 이란? - section 태그에 대해서 -9 (6) | 2024.10.19 |
|---|---|
| HTML 이란? - article 태그에 대해서 -8 (1) | 2024.10.18 |
| HTML 이란? - nav 태그에 대해서 -6 (1) | 2024.10.16 |
| HTML 이란? - header 태그에 대해서 -5 (1) | 2024.10.15 |
| HTML 이란? - footer 태그에 대해서 -4 (0) | 2024.10.14 |