홈페이지 노출 확률 높이기(Semantic element와 div 차이점)

HTML 시멘틱 요소 div 차이점

시멘틱 요소(Semantic Elements) 사용할 경우 가독성 높임. SEO에 유리함.

제목을 작성할 경우 <header>를 사용하지만, div를 사용할 경우 <div id="header">와 같이 추가 id 혹은 속성을 만들어야 하는 불편함이 있음.

비교

항목	시멘틱	div
의미 전달	역할과 목적을 태그 이름만으로 전달	별도의 의미 없음
SEO	검색 엔진 최적화에 긍정적 영향	영향을 미치지 않음
접근성	스크린 리더가 더 잘 이해	추가 속성 없이는 이해 어려움
사용 목적	구조적 의미와 역할 강조	단순한 그룹화나 레이아웃

시멘틱 요소?

시멘틱은 div와 같은 기능을 하지만, 각각에 역할에 맞는 목적으로 여러가지 방식으로 표현이 가능

주요 시멘틱 요소

태그	사용 방법
<header>	머리글. 제목, 로고, 사이트 상단 등
<nav>	메뉴바, 페이지 링크 등
<main>	본문 내용
<section>	블로그 글의 섹션 혹은 챕터 구분
<article>	블로그 글 처럼 독립적으로 배포 가능한 컨텐츠.
<aside>	사이드바, 광고 등 지정
<footer>	하단 메뉴 정보, 저작권 정보 개시
<figure>	그림 혹은 차트를 입력할 경우
<figcaption>	<figure> 제목이나 설명.
<details>	추가 정보를 숨기거나 표시 기능(정보 접기/펼치기)
<time>	날짜, 시간 표시

결론

• 시멘틱 요소를 사용할 경우 가독성, 접근성, SEO 등 모든 점에서 유리함.