λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
πŸ“‚ 기술 λ©΄μ ‘/Web

Semantic HTML의 ν•„μš”μ„±μ„ μ˜ˆμ‹œλ₯Ό λ“€μ–΄ μ„€λͺ…ν•΄ μ£Όμ„Έμš”.

by Dev. Ella 2023. 5. 9.

πŸ‘©πŸ»‍πŸ’» Semantic HTML의 ν•„μš”μ„±μ„ μ˜ˆμ‹œλ₯Ό λ“€μ–΄ μ„€λͺ…ν•΄ μ£Όμ„Έμš”.

@semrush

 

πŸ’πŸ»‍♀️ μš”μ•½ν•˜μžλ©΄ ,

Semantic HTML은 μ›Ή νŽ˜μ΄μ§€μ˜ κ° μš”μ†Œμ— μ˜λ―Έλ₯Ό λΆ€μ—¬ν•˜λŠ” HTML λ§ˆν¬μ—… λ°©λ²•μž…λ‹ˆλ‹€. μ΄λŠ” μ›Ή νŽ˜μ΄μ§€μ˜ κ΅¬μ‘°μ™€ μ˜λ―Έλ₯Ό λ” λͺ…ν™•ν•˜κ²Œ μ „λ‹¬ν•˜λ©°, κ²°κ΅­ 검색 엔진 μ΅œμ ν™”(SEO)와 μ›Ή 접근성을 ν–₯μƒμ‹œν‚€λŠ” 데 κΈ°μ—¬ν•©λ‹ˆλ‹€.

 

예λ₯Ό λ“€μ–΄,

HTML μ•ˆμ— 제λͺ©, λ‚΄μš©, ν‘Έν„°λ‘œ λ‚΄μš©μ΄ λ‚˜λˆ μ Έ μžˆμŒμ—λ„ λΆˆκ΅¬ν•˜κ³  λͺ¨λ“  μš”μ†Œλ₯Ό <div> νƒœκ·Έλ‘œ μ”Œμš΄λ‹€λ©΄ μ½”λ“œλ₯Ό λ³΄λŠ” 개발자 μž…μž₯μ—μ„œ μ›Ή νŽ˜μ΄μ§€ ꡬ쑰와 μ˜λ―Έκ°€ μ •ν™•ν•˜κ²Œ 보이지 μ•Šμ„ 뿐 μ•„λ‹ˆλΌ, μš°λ¦¬κ°€ 애써 λ§Œλ“  μ›Ή μ‚¬μ΄νŠΈκ°€ 검색 엔진에 μ΅œμ ν™”λ˜μ§€ μ•Šμ„ κ²ƒμž…λ‹ˆλ‹€.

<div class="Ella">
  <div class="header">
    <h2>제λͺ©</h2>
  </div>
  <div class="content">
    <p>λ‚΄μš©</p>
  </div>
</div>

λ”°λΌμ„œ, HTML의 각 μ˜μ—­μ€ 각 μ˜μ—­μ˜ μ˜λ―Έμ— 맞게 <header> μš”μ†ŒλŠ” μ›Ή νŽ˜μ΄μ§€μ˜ 제λͺ©, <section> μš”μ†Œλ‘œλŠ” μ„Ήμ…˜μ„ μ •μ˜, <article> μš”μ†Œλ‘œλŠ” λ¬Έμ„œμ˜ λ‚΄μš©, <footer> μš”μ†Œλ‘œλŠ” λ¬Έμ„œ ν•˜λ‹¨μ˜ 정보 전달을 μœ„ν•œ λͺ©μ μœΌλ‘œ μ‚¬μš©ν•˜λ©° νŽ˜μ΄μ§€μ˜ μ˜λ―Έμ™€ λͺ©μ μ„ λ”μš± λͺ…ν™•ν•˜κ²Œ 전달해야 ν•©λ‹ˆλ‹€.

<section class="Ella">
  <header>
    <h2>제λͺ©</h2>
  </header>
  <article>
    <p>λ‚΄μš©</p>
  </article>
</section>

 

λ”λΆˆμ–΄,

이처럼 Semantic HTML은 검색 엔진이 νŽ˜μ΄μ§€μ˜ μ½˜ν…μΈ λ₯Ό 더 잘 이해할 수 μžˆλ„λ‘ ν•˜λ©°, 슀크린 리더 같은 보쑰 κΈ°μˆ μ„ μ‚¬μš©ν•˜λŠ” μ‚¬μš©μžκ°€ νŽ˜μ΄μ§€ λ‚΄μš©μ„ 더 μ‰½κ²Œ νŒŒμ•…ν•  수 μžˆλ„λ‘ ν•˜κΈ°λ„ ν•©λ‹ˆλ‹€. λ˜ν•œ, κ°œλ°œμžκ°€ μ½”λ“œλ₯Ό μž‘μ„±ν•˜κ³  μœ μ§€λ³΄μˆ˜ν•˜λŠ” 데 도움을 μ€λ‹ˆλ‹€.

 

 

λŒ“κΈ€