Semantic Html 이란?
먼저 Semantic이라는 단어의 뜻은 "의미의, 의미론적인" 이라는 뜻입니다.
따라서 Semantic html이라는 것은 각각의 태그들이 그 의미를 지니고 있는 것을 말합니다.
Semantic HTML은 웹 컨텐츠의 의미와 구조를 나타내는 HTML 마크업을 의미합니다. 이를 사용하면 웹 페이지를 보다 접근성이 높고 검색 엔진 최적화에 유리한 형태로 만들 수 있습니다.
Semantic Tag
Semantic HTML 태그 예시로는 header, nav, main, section, article, aside, footer, h1-h6(제목 태그), p(단락 태그), ul(순서 없는 목록), ol(순서 있는 목록), li(목록 항목), table(테이블), th(테이블 헤더), tr(테이블 행), td(테이블 데이터) 등이 있습니다.
non-semantic HTML 태그 예시로는 div, span, br(줄바꿈), hr(수평선), img(이미지), a(앵커 태그), form(폼), input(입력 필드), button(버튼), label(라벨), select(드롭다운/선택 목록), option(드롭다운/선택 목록 내 항목) 등이 있습니다.
example code
- Sematic code
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Article Title</h1>
<p>Article content goes here</p>
<p>Another paragraph of article content</p>
</article>
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
- Non semantic code
<div id="header">
<div id="logo">
<img src="logo.png" alt="My Logo">
</div>
<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<div id="content">
<div id="article">
<h1>Article Title</h1>
<p>Article content goes here</p>
<p>Another paragraph of article content</p>
</div>
<div id="related">
<h2>Related Articles</h2>
<ul>
<li><a href="#">Related Article 1</a></li>
<li><a href="#">Related Article 2</a></li>
<li><a href="#">Related Article 3</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>© 2023 My Website</p>
</div>왜? 써야하는가?
기능의 차이는 없습니다. semantic한 코드가 눈에 더 잘 보이 듯이, 유지보수하기가 더 수월하고,
Semantic HTML을 사용하면 검색 엔진이 웹 페이지의 구조와 내용을 더 잘 이해할 수 있으며, 이는 검색 결과에서의 순위 상승과 더 많은 노출 기회로 이어질 수 있습니다. 또한 Semantic HTML은 접근성을 향상시키는 데에도 도움이 되어, 장애인들에게도 웹 페이지의 이용이 더욱 쉬워집니다.
SEO
검색 엔진 최적화(Search Engine Optimization, 이하 SEO)란, 검색 엔진에서 자사 웹 사이트가 상위에 노출될 수 있도록 웹 사이트 내부 및 외부 요소들을 최적화하는 작업을 말합니다.
검색 엔진은 사용자가 검색어를 입력하면 웹 사이트를 크롤링하고, 해당 검색어와 관련된 정보를 가장 적합하다고 판단되는 웹 페이지를 검색 결과 상위에 노출시킵니다. 따라서 검색 엔진이 사용자의 요구에 맞는 적절한 결과를 제공하기 위해서는 웹 사이트의 콘텐츠와 구조를 잘 이해할 수 있어야 합니다.
여기서 Semantic HTML이 검색 엔진 최적화에 중요한 역할을 합니다. Semantic HTML을 사용하면 검색 엔진은 웹 페이지의 구조와 내용을 보다 정확하게 파악할 수 있어, 검색 결과 상위에 노출될 가능성이 높아집니다. 또한 Semantic HTML을 사용하면 검색 엔진이 웹 페이지의 구조를 더 쉽게 파악하면서, 검색 쿼리와 일치하는 적절한 콘텐츠를 찾아내는 데에도 더 유리합니다.
그 외에도, 검색 엔진 최적화를 위해서는 키워드 연구 및 분석, 메타 태그 설정, 내부 링크 구조 최적화, 외부 링크 확보 등 다양한 작업이 필요합니다. 또한 검색 엔진이 자사 웹 사이트를 인식하고 이해할 수 있도록, 검색 엔진의 가이드라인을 따라 웹 사이트를 만들고 운영하는 것이 중요합니다.
검색 엔진 최적화는 웹 사이트의 검색 결과 노출 및 트래픽 증대에 큰 영향을 미치는 만큼, 웹 사이트 운영자나 마케팅 담당자에게 중요한 작업입니다. 따라서 검색 엔진 최적화에 대한 이해와 지식은 현대적인 마케팅 전략에서 꼭 필요한 요소 중 하나입니다.
