[HTML] 첫발 내딛기 <3. 시멘틱 요소>

HTML의 시멘틱 요소 소개와 사용 방법

시멘틱 요소는 특정한 의미를 가지고 있는 요소를 말한다.

기본적으로 HTML의 거의 모든 요소는 시멘틱 요소라고 볼 수 있다.

시멘틱 요소가 중요한 이유는 접근성이다.

시멘틱 요소를 사용하면 쉽게 페이지의 접근성을 좋게 만들 수 있다.

페이지의 접근성이 좋으면 뭐가 좋을까?

당연히 장애를 가진 사용자들이 웹 사이트/어플을 사용하는데 도움이 된다.

둘째로는 SEO에 도움이 된다.

접근성과 SEO가 무슨 상관이 있을까?

이렇게 생각해 보자,

인터넷을 사용할 때 없으면 제일 불편한 것은 무엇일까?

시력이다.

시력이 없으면 웹 페이지에 있는 정보를 습득하고 이해하는데 많은 노력과 시간이 필요하다.

검색엔진을 다르게 보면 앞을 못 보는 정말 똑똑한 사용자다.

검색엔진이 페이지를 이해하지 못한다면 일반 사용자가 이해할 수 있는 확률은 얼마나 될까?

사용자를 위해서 시멘틱 요소를 사용해 접근성을 높이고, 그 결과로 SEO가 좋아져서 검색결과 상위 노출 확률이 올라가고; 좋은 점만 있는 데 사용 안 할 이유가 없다.

그럼 이젠 HTML의 몇 시멘틱 요소들을 어떻게 사용해야 하는지 살펴보자.

시멘틱 요소 중에도 중요한 요소들이 있다.

이 요소들이 중요한 이유는 페이지의 구조를 정하기 때문이다.

<header>

<header> 요소는 일반적으로 소개 또는 탐색 지원 콘텐츠를 나타낸다.

일부 표제 요소뿐만 아니라 로고, 검색 양식, 작성자 이름 및 기타 요소도 포함될 수 있다.

네이버의 상단 부분을 예로 들어보자.

네이버 웹 사이트의 상단 부분에 네이버 로고와 검색창, 그리고 메일, 카페, 블로그, 등 다른 곳으로 갈 수 있는 메뉴도 있다.

이 모든 콘텐츠가 <header> 요소 안에 들어있다.

(네이버는 <header> 대신 role=”banner”를 사용한다)

<nav>

<nav>는 현재 페이지 내에서 또는 다른 페이지로 이동할 수 있는 링크를 제공하는 섹션이다.

네이버의 상단에 ‘메일’, ‘카페’, ‘블로그’, 등 다른 곳으로 이동할 수 있는 링크들이 모여있는 걸 볼 수 있는데, 이 링크들을 모아둔 섹션이 <nav> 섹션이다.

<main>

<main>은 페이지의 메인 구간이다.

<main>에는 페이지의 메인 주제 또는 애플리케이션의 중심 기능과 직접 관련되거나 확장되는 콘텐츠로 구성된다.

<section>

<section>은 일반 독립형 섹션을 나타낸다.

사용법은 독립형 섹션을 보다 구체적으로 나타낼 수 있는 요소가 없을 때 사용한다.

<section>을 사용할 때는 거의 예외 없이 항상 제목이 있어야 한다.

<h1>뉴스</h1>
<section>
  <h2>콘텐츠</h2>
  <!-- 뉴스 콘텐크 -->
</section>
<section>
  <h2>구독</h2>
  <!-- 구독 채널 리스트 -->
</section>

<footer>

<footer>의 상위 요소가 <body>일 경우 <footer>는 페이지에 적용되고, 상위 요소가 <article>일 경우 <article>에 적용된다.

[HTML] 첫발 내딛기 <2. 요소와 속성>

HTML 요소와 속성의 관계 HTML의 요소는 요소만 사용할 수도 있지만 속성을 같이 사용하면 요소를 사용할 수 있는 범위가 확 넓어진다. 수많은 요소들 중 속성 없이 사용할 수 있는 요소들도 있지

learncoderepeat.tistory.com

[HTML] 첫발 내딛기 <4. input 유형의 모든것> (0)	2023.02.26
[HTML] 첫발 내딛기 <2. 요소와 속성> (0)	2023.01.29
[HTML] 첫발 내딛기 <1. 구조 와 요소> (0)	2023.01.27
[HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자! (0)	2022.12.21
HTML 쉽게 배우기 \| 디브 <div> 사용법 (0)	2020.12.28