요약
HTML
<main>요소는 웹 페이지나 애플리케이션에서 문서의 핵심 콘텐츠를 나타낸다.
한 문서에 한 번만 사용해야 하며, 접근성과 SEO를 높인다.
용어 설명
- HTML 요소: 웹 페이지의 구조를 정의하는 코드 조각으로, 예를 들어
<main>,<header>같은 태그. - 접근성 (Accessibility): 장애가 있는 사람들도 웹 콘텐츠를 쉽게 사용할 수 있도록 하는 기술적 배려.
- SEO (Search Engine Optimization): 검색 엔진에서 콘텐츠를 더 잘 노출시키기 위한 최적화 기술.
자세한 설명
-
<main>요소의 역할:- 문서의 핵심 콘텐츠
- 반복되는 내비게이션, 로고, 광고 같은 내용과는 구별되는 주요 정보나 기능이 담긴 영역 정의.
-
사용 규칙:
- 문서당 하나의
<main>요소만 사용. - 다른 콘텐츠 섹션(
<header>,<footer>,<aside>)과 중복되지 않도록. <main>요소는 HTML5에서 추가된 요소로, 최신 브라우저와 접근성 도구에서 기본적으로 지원.
- 문서당 하나의
-
접근성과 SEO:
- 스크린 리더(접근성 도구)가 main 콘텐츠를 빠르게 찾아 제공.
- 검색 엔진은
<main>요소를 통해 페이지의 중요한 내용을 식별하고 더 잘 인덱싱.
-
예제:
<body>
<header>
<h1>웹사이트 제목</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
</ul>
</nav>
</header>
<main>
<h2>주요 콘텐츠 제목</h2>
<p>이곳에 주요 콘텐츠를 배치합니다.</p>
</main>
<footer>
<p>저작권 정보</p>
</footer>
</body>이렇게 <main> 요소를 사용하면 문서 구조가 명확해지고, 사용성 및 검색 엔진 최적화에도 유리합니다.
Search Engine Optimization (SEO)
"검색 엔진"은 웹 페이지를 읽고, 어떤 부분이 가장 중요한지 판단한다.
<main> 태그를 사용하면 "여기가 메인 콘텐츠입니다"라고 명시하므로, 검색 엔진이 중요 정보를 빠르게 파악!
-
중복 콘텐츠와 구별:
헤더, 내비게이션 메뉴, 광고 같은 반복적이고 덜 중요한 콘텐츠와 메인 콘텐츠를 구분하기 쉽습니다.
검색 엔진은<main>태그 안의 내용을 더 중요하게 여긴다. -
결과적으로 SEO 향상:
검색 엔진이 페이지의 주요 내용을 정확히 이해하면, 사용자가 검색한 키워드와 더 잘 연결되어 검색 결과에서 상위에 노출될 가능성이 커집니다.
이렇게 <main> 을 쓰는 것은 검색 엔진에게 "이 페이지의 주제는 이거야!"라고 알려주는 효과적인 방법~~
<main> 의 2가지 특징
-
중요한 내용만 포함
- 예를 들어, 신문을 읽을 때 기사 본문이 주요 내용이죠?
반면, 신문마다 똑같이 나오는 광고나 날짜 정보는 주요 내용이 아니에요. <main>은 그 기사 본문처럼 중요하고 유일한 내용을 담는 공간이에요. 광고나 로고 같은 건 넣지 말라는 거예요.
- 예를 들어, 신문을 읽을 때 기사 본문이 주요 내용이죠?
-
구조를 바꾸지 않음
<main>은 책에서 "여기 본문 시작!"이라고 표시해주는 목차 같은 거예요.
이 태그를 써도 페이지의 구조가 바뀌진 않아요. 그냥 "본문이에요!"라고 알려줄 뿐이에요.
부가설명
-
중복되는 콘텐츠를 제외하는 이유
- 예를 들어, 웹사이트에 사이드바, 로고, 탐색 링크, 저작권 정보 등은 모든 페이지에서 반복되잖아요?
- 이런 반복되는 건
<main>에 넣으면 안 돼요. 대신<header>,<footer>같은 다른 태그에 넣어요. - 하지만, 검색 폼이 그 페이지의 가장 중요한 기능이라면
<main>에 포함할 수 있어요.
-
구조에 영향을 주지 않음
<main>태그는 페이지의 내용을 분류할 뿐, 문서의 구조적 중요도를 바꾸진 않아요.- 예를 들어,
<main>안에<h2>같은 제목이 있더라도, 검색 엔진이나 브라우저는<h2>를 여전히 중요한 제목으로 이해해요. - 즉,
<main>은 그저 주요 내용을 그룹화해서 보기 쉽게 정리해주는 역할이에요.
<main>은 "중요한 내용만 담아라!"라는 규칙을 지키면서 페이지를 정리하고 구조는 그대로 두는 도구
한양대 학생입니다. 서울캠입니다.