IT 강좌 HTML 기초 016_시맨틱 요소
시맨틱 요소
HTML5는 많은 시맨틱 요소를 도입했으며, 이러한 요소의 목적은 문서 구조의 의미를 향상시켜 문서의 가독성과 유지보수성을 높이고, 검색 엔진과 개발자 모두에게 더 친화적이도록 만드는 것입니다.
페이지 구조는 일반적으로 헤더, 푸터, 제목, 내비게이션, 콘텐츠, 사이드바 등을 포함합니다.
<div> 요소를 사용한 페이지 레이아웃 설계:
[!요약]
- 개발자가 코드를 작성하기에 불리합니다. 화면 가득한
<div>요소를 마주했을 때 그것들이 나타내는 의미를 빠르게 구분하기 어렵습니다.- 검색 엔진 최적화(SEO)에 불리합니다. 브라우저는 당신이
<div>요소를 사용했다는 것만 알 뿐이며,div요소 자체는 어떤 의미도 가지지 않고 단지 컨테이너일 뿐입니다.
시맨틱 요소를 사용한 페이지 레이아웃 설계:
<header> <nav> <main> <aside> <footer>를 사용하여 페이지의 서로 다른 영역을 각각 나타내면, 이러한 태그는 페이지에 좋은 의미와 구조를 부여하여 개발자와 브라우저 모두 웹페이지 콘텐츠를 빠르게 이해할 수 있게 합니다.
| 요소 | 역할 |
|---|---|
<header> | 페이지의 헤더 영역을 정의하는 데 사용되며, 일반적으로 웹사이트 로고, 주요 내비게이션, 사이트 전체 링크 및 검색창을 포함합니다. |
<nav> | 페이지의 내비게이션 링크 부분 영역을 정의하는 데 사용됩니다. |
<main> | 페이지의 주요 콘텐츠 또는 주요 기능 부분을 정의하는 데 사용되며, 이 콘텐츠는 페이지에서 유일해야 합니다. |
<aside> | 페이지의 사이드바 콘텐츠를 정의하는 데 사용되며, 이 콘텐츠는 주요 콘텐츠와 관련이 있지만 선택 사항입니다. |
<footer> | 페이지의 푸터 영역을 정의하는 데 사용되며, 일반적으로 저작권 정보, 연락처 정보 및 기타 관련 정보를 포함합니다. |
<article> | 독립적인 기사, 문서, 페이지, 애플리케이션 또는 기타 콘텐츠 영역을 정의하는 데 사용됩니다. |
<section> | 웹페이지에서 일반적인 독립 섹션을 정의하는 데 사용되며, 일반적으로 제목이나 단락, 블록을 포함합니다. |
<figure> | 독립적인 이미지, 차트, 사진 등의 콘텐츠를 정의하는 데 사용됩니다. |
<figcaption> | <figure> 요소에 제목이나 설명을 제공하는 데 사용됩니다. |
예제:
<!DOCTYPE html><html lang="en"><head> <title>나의 웹페이지</title></head><body> <header> <h1>나의 웹페이지</h1> </header>
<nav> <ul> <li><a href="#">홈</a></li> <li><a href="#">내 소개</a></li> <li><a href="#">연락하기</a></li> </ul> </nav>
<main> <article> <h2>나의 소개</h2> <p>제 이름은 XXX이며, 이것은 시맨틱 요소의 예제입니다.</p> </article> </main>
<aside> <h2>관련 링크</h2> <ul> <li><a href="#">나의 블로그</a></li> <li><a href="#">나의 GitHub 페이지</a></li> </ul> </aside>
<footer> <p>저작권 2023 XXX</p> </footer></body></html>효과:
이 예제는 HTML5의 시맨틱 요소를 사용하여 웹페이지 콘텐츠의 의미를 설명하는 웹페이지를 포함합니다.
<header>요소는 페이지의 헤더 영역을 정의하며, 웹사이트 로고와 주요 내비게이션을 포함합니다.<nav>요소는 페이지의 내비게이션 링크 부분 영역을 정의합니다.<main>요소는 페이지의 주요 콘텐츠를 정의하며, 나의 소개 기사를 포함합니다.<aside>요소는 페이지의 사이드바 콘텐츠를 정의하며, 관련 링크를 포함합니다.<footer>요소는 페이지의 푸터 영역을 정의하며, 저작권 정보를 포함합니다.
[!요약]
- 검색 엔진이 웹페이지 콘텐츠를 더 잘 이해할 수 있어 검색 결과에서 웹페이지의 순위를 향상시킵니다.
- 장애가 있는 사람들이 웹페이지 콘텐츠를 더 쉽게 이해할 수 있도록 도와 웹페이지의 접근성을 향상시킵니다.
- 개발자가 웹페이지 구조를 더 잘 구성할 수 있도록 도와 웹페이지의 유지보수성을 향상시킵니다.