[CSS] 적절한 HTML Tags

최근에 HTML, CSS에 대한 강의를 각 잡고 본 것도 아니고 중요한 내용들만 살짝 보는데도, 보면서 내가 진짜 겉핥기 식으로 HTML과 CSS를 사용했는지 깨닫는 중..

HTML을 사용할 때, 매번 div태그로 떡칠을 했던 과거의 나.... 무릎꿇고 반성해!

---

✨ Semantic Tags : 시맨틱(Semantic)은 "의미의, 의미론적인"이라는 뜻으로, 문서의 구조와 의미를 브라우저와 개발자 모두에게 명확하게 설명할 수 있도록 도와준다.

🧐 시맨틱하지 않은(non-semantic) elements의 예시 :

<div>와 <span> : element는 내용물에 대한 어떠한 것도 알려주지 못한다. 물론 <div>와 <span>으로만 이루어진 코드들이 실제로 돌아가긴 하겠지만, 나중에 내용물에 대한 어떤 정보도 알 수 없게 됨.

🧐 시맨틱한(semantic) elements의 예시 :

<form>, <table>, <article>등 : 이런 elements들은 그들의 내용물에 대해 확실한 정보를 제공한다.

🧐 Semantic Tag가 중요한 이유 3가지

• 검색을 최적화하기 위해!
• 용이한 웹 접근성!
• 다른 개발자들이 한눈에 알아볼 수 있도록! (유지보수성을 높일 수 있음)

---

🤔 Article VS Section

Article :  

• Main 안에서 사용.
• 블로그 포스트에서 그 포스트 하나, 신문기사에서의 신문 하나를 묶어줄 때 사용.
• 그 하나의 포스트, 신문 자체만으로 독립적으로 다른 페이지에 보여줬을 때, 전혀 문제가 없을 경우에 사용.
• 즉, 독립적으로 고유한 정보를 나타낼 때.

Section :

• Main, Article 안에서 사용.
• Main 또는 Article의 내용들 중, 서로 연관 있는 내용들을 하나로 묶어줄 때 사용

🤔 i VS em

i : 시각적으로만 이탤릭체

em : 강조하는 이탤릭체

🤔 b VS strong

b : 시각적으로만 볼드체

strong : 정말 중요한 볼드체

🤔 ol VS ul VS dl

ol : 순서가 중요

ul : 순서 없음

dl : 정의, 설명 목록

🤔 button VS a

button : 사용자의 특정한 액션을 위해

a : 어디론가 이동할 때 (링크)

🤔 table VS CSS

table : (행+열) 데이터를 위해

CSS : 스타일링을 위해서라면 Flex, Grid 사용

---

※ 참고 : 프론트엔드 강의 - 프론트엔드 개발자 되기 입문 편 / 드림코딩 by 엘리

※ Semantic Tags 참고 문서 : https://developer.mozilla.org/ko/docs/Web/HTML/Element

※ Semantic elements 예시 출처: https://geonlee.tistory.com/96