HTML - Semantic Tags

Semantic Tags

• semantic : 의미의, 의미가 있는

---

Semactic Tag를 사용하면 좋은 이유

1. SEO(검색 최적화)
2. 웹 접근성
3. 개발자가 쉽게 내용을 파악할 수 있고, 유지보수성이 높아짐

---

헷갈리는 tag 들...

<article>  <section> 차이

• <article> : 블로그에서 포스트 하나, 신문으로 기사 하나를 보여줄 때 사용한다. 이 자체만으로 보여졌을 때 독립적으로 보여졌을 때 전혀 문제가 없을 때 사용한다. 이 말은 즉, 메인 안에 다른 내용들과 관련 없이 독립 적일 때 사용 된다.
• <section> : <main> 또는 <article> 안에서 연관되어 있는 내용을 묶어주고 싶을 때, <section>를 사용한다.
  
  

<i> 과 <em> 차이

• <i> : 시각적으로만 이탤리체 ex) 책제목, 인용구
• <em> : 강조하는 이탤릭체
  
  

<b> vs <strong> 차이

• <b> : 시각적으로만 볼드체
• <strong> : 정말 중요한 볼드체!
  
  

<ol> vs <ul> vs <dl> 차이

• <ul> : 순서가 없는 리스트
• <ol> : 순서가 중요한 리스트
• <dl> : 정의, 설명 리스트
  
  

<img> vs background-image(css)  차이

• <img> : 웹페이지 안에서 하나의 중요한 요소로 자리 잡고 있을때
• background-image : 문서의 내용과 별개로 스타일 용도로 사용하는 경우는 백그라운드 이미지로 사용
  
  

<button> vs <a>  차이✨

• <button> : 특정한 액션을 위해
• <a> : 어디론가 이동할 때 (이동)