<div> 때문에 SEO 점수 깎이고 있었다니..
시맨틱 태그 A to Z
웹 개발에 처음 입문하면 레이아웃을 짤 때 모든 것을 <div> 태그로 감싸는 습관이 생기기 쉽습니다. 헤더도 <div>, 본문도 <div>, 푸터도 <div>... 분명 화면은 그럴듯하게 나오는데, 과연 이게 최선의 방법일까요?
정답부터 말하자면, 아닙니다. 만약 여러분이 여전히 <div>만으로 웹 페이지를 만들고 있다면, 자신도 모르게 코드의 가독성을 해치고 검색 엔진 최적화(SEO) 점수까지 깎아 먹고 있을지 모릅니다.
오늘은 '그림으로 쉽게 배우는 HTML+CSS+자바스크립트' 도서 4장의 내용을 바탕으로, 왜 <div>만으로는 부족한지, 그리고 더 똑똑한 웹 페이지를 만드는 시맨틱 태그(Semantic Tag)란 무엇인지 A부터 Z까지 알아보겠습니다.
왜 <div>만으로는 부족할까요?
HTML5 이전에는 대부분의 개발자가 레이아웃을 구성할 때 <div> 태그를 무분별하게 사용했습니다. 이로 인해 코드가 <div>로 가득 차는, 이른바 'div 수프(div soup)' 현상이 발생했죠. 이런 코드는 당장 화면을 만드는 데는 문제가 없지만, 두 가지 큰 단점이 있습니다.
개발자가 파악하기 어렵다: <div id="header">, <div class="main-content"> 처럼 클래스나 ID를 보지 않고서는 각 <div>가 어떤 역할을 하는지 한눈에 파악하기 어렵습니다.
기계(검색 엔진)가 이해하기 어렵다: 검색 엔진 로봇이 웹 페이지를 분석할 때, 모든 것이 <div>로만 되어 있으면 어디가 제목이고, 본문이고, 추가 정보인지 그 의미와 구조를 이해하기 힘듭니다.
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트'에서는 이 문제를 아주 명확한 그림으로 보여줍니다.
왼쪽의 <div> 범벅 레이아웃보다 오른쪽의 시맨틱 태그 레이아웃이 훨씬 더 구조적으로 명확해 보이지 않나요? 바로 이 차이가 코드의 품질과 SEO의 시작입니다.
시맨틱 태그란? 이름만으로 의미를 말하다
시맨틱(Semantic)이란 '의미의', '의미론적인'이라는 뜻입니다. 즉, 시맨틱 태그는 이름 자체만으로도 태그의 역할과 의미를 명확하게 설명해주는 HTML 태그를 말합니다.
<header>: "아, 이건 페이지나 특정 섹션의 머리글이구나."
<nav>: "여기는 내비게이션 메뉴가 들어가는 곳이군."
<footer>: "페이지 하단의 저작권 정보나 연락처를 담겠네."
이처럼 개발자는 태그 이름만 보고도 구조를 빠르게 파악할 수 있고, 검색 엔진은 콘텐츠의 중요도를 더 정확하게 분석할 수 있게 됩니다.
꼭 알아야 할 필수 시맨틱 태그 A to Z
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트'에서는 일반적인 웹 페이지 레이아웃에 맞춰 필수 시맨틱 태그들을 소개합니다.
<header> & <footer>: 각각 페이지의 머리말과 꼬리말을 나타냅니다. 로고, 제목, 사이트 소개 등은
<header>에, 저작권, 연락처, 관련 링크 등은 <footer>에 배치합니다.
<nav>: 내비게이션(Navigation)의 약자로, 메뉴, 목차 등 다른 페이지로 이동하는 링크들의 모음을 감쌀 때 사용합니다.
<main>: 페이지의 핵심적인 주요 콘텐츠를 담는 영역입니다.
<body> 태그의 핵심 내용이라 할 수 있으며, 페이지에서 단 한 번만 사용해야 합니다.
<aside>: 본문 내용과 직접적인 관련이 적은 부가적인 콘텐츠(광고, 사이드바, 관련 글 목록 등)를 넣을 때 사용합니다.
실전 사례로 이해하는 <section> vs <article>
초보자들이 가장 헷갈리는 태그가 바로 <section>과 <article>입니다. 책에서는 '뉴스 페이지'라는 아주 좋은 예시로 둘의 차이를 설명합니다.
<section>: 관련 있는 내용들을 하나의 그룹으로 묶을 때 사용합니다. 예를 들어 뉴스 페이지에서 '오늘의 주요 뉴스', '랭킹 뉴스'처럼 주제별로 영역을 나눌 때 적합합니다.
<article>: 그 자체로 독립적인 하나의 완전한 콘텐츠를 의미합니다. 블로그 게시물, 뉴스 기사 하나하나가 바로 <article>에 해당합니다. 이 내용은 다른 곳에 가져다 놓아도 그 자체로 의미가 통합니다.
위 그림처럼 '오늘의 주요 뉴스'라는 <section> 안에 여러 개의 <article> 기사가 들어가는 구조로 이해하면 쉽습니다.
그래서 SEO에 왜 좋은 건가요?
이제 핵심입니다. 검색 엔진(구글, 네이버 등)은 시맨틱 태그를 통해 여러분의 웹 페이지를 훨씬 더 잘 '이해'합니다.
검색 엔진은 <main> 태그 안의 콘텐츠가 <aside> 태그 안의 광고보다 훨씬 더 중요하다고 판단합니다.
<nav> 태그 안의 링크들을 웹사이트의 핵심적인 길잡이로 인식합니다.
<h1>은 페이지의 주제, <article>은 독립된 콘텐츠 단위로 파악하여 검색 결과에 더 정확하게 노출시켜 줍니다.
의미에 맞는 시맨틱 태그를 사용하는 것은 검색 엔진에게 "이 페이지는 이런 구조로 되어 있고, 이 부분이 가장 중요해!"라고 친절하게 알려주는 것과 같습니다. 그 결과, 검색 엔진이 내 페이지를 더 정확하게 분석하고 색인하여 검색 순위 상승에 긍정적인 영향을 미칠 수 있습니다.
마치며
이제 <div> 태그를 남용하는 습관을 버리고, 콘텐츠의 의미와 구조에 맞는 시맨틱 태그를 사용해야 하는 이유가 명확해졌을 겁니다. 시맨틱 태그를 사용하는 것은 단순히 코드를 '예쁘게' 만드는 것이 아니라, 동료 개발자와 미래의 나를 위한 '읽기 좋은 코드'를 작성하고, 검색 엔진에게 내 콘텐츠를 더 잘 어필하는 '똑똑한 전략'입니다.
'그림으로 쉽게 배우는 HTML+CSS+자바스크립트'는 바로 이런 현대 웹 개발의 표준을 초보자의 눈높이에서 직관적인 그림과 함께 설명해 줍니다. 오늘 배운 내용으로 여러분의 웹 페이지를 한 단계 업그레이드해 보세요!
웹 개발을 처음 배우려고 할 때 가장 먼저 드는 생각은 “대체 어디서부터 시작해야 하지?”입니다. 낯선 용어, 익숙하지 않은 코드, 구조를 이해하기 어려운 화면 구성 등 초보자 입장에서 웹 개발을 배우는 일은 쉽지 않습니다.
『그림으로 쉽게 배우는 HTML+CSS+자바스크립트』는 이러한 고민을 가진 분들을 위해 만들어진 책입니다. 웹 페이지의 뼈대를 구성하는 HTML, 스타일을 담당하는 CSS, 동적인 기능을 구현하는 자바스크립트까지, 웹 개발의 핵심 기술을 그림과 실생활 비유를 활용해 누구나 이해하기 쉽게 풀어냈습니다.
