시맨틱 마크업 우선:
<div> 대신 <section>, <article> 사용
시맨틱 마크업은 HTML5의 핵심 기능 중 하나로, 페이지의 구조를 명확히 하고 콘텐츠의 의미를 더 잘 전달합니다.
과거에는 <div>태그를 남발해 구조를 만들었지만, 이는 코드의 가독성과 검색 엔진의 이해를 어렵게 했습니다.
2025년에는 시맨틱 태그를 사용해 페이지의 각 섹션이 어떤 역할을 하는지 명확히 하는 것이 필수입니다.
왜 중요한가?
SEO 향상: 검색 엔진(구글, 빙 등)은 <header>, <nav>, <article> 같은 태그를 통해 페이지 구조를 더 잘 이해하고, 관련성 높은 콘텐츠를 상위에 노출시킵니다.
접근성: 스크린 리더가 이나 같은 태그를 통해 콘텐츠를 더 쉽게 탐색할 수 있습니다.
유지보수 용이성: 팀원이나 미래의 당신이 코드를 읽을 때 구조가 명확해 협업이 쉬워집니다.
어떻게 적용할까?
<div>를 최소화하고, 적절한 시맨틱 태그를 사용하세요. 예를 들어,
<!-- 비추천: 비시맨틱 -->
<div class="header">
<div class="title">내 블로그</div>
</div>
<!-- 추천: 시맨틱 -->
<header>
<h1>내 블로그</h1>
</header>주요 시맨틱 태그
<header> : 페이지 또는 섹션의 상단 (로고, 제목 등).
<nav> : 네비게이션 메뉴.
<main> : 주요 콘텐츠 영역.
<article> : 독립적인 콘텐츠 (블로그 포스트, 뉴스 기사 등).
<section> : 주제별 콘텐츠 그룹.
<footer> : 페이지 하단 (저작권, 연락처 등)
2025년 팁
<search> 요소가 새로 추가되었습니다. 검색 기능을 명확히 정의하려면 <input type=”search”>와 함께 사용하세요.
예:
<search>
<input type="search" placeholder="검색어를 입력하세요">
</search>