🚀 시맨틱 마크업(Semantic Markup)

Semantic(의미론적)인 태그로 html 문서 작성하는 것을 의미한다.

📌 작성하는 이유

- SEO(검색엔진최적화)

검색 엔진은 웹사이트를 크롤링할 때 시맨틱 태그를 중요한 키워드로 보기에 시맨틱 태그로 마크업이 되어 있지 않으면 웹페이지를 분석하기 어렵다. 검색엔진에 노출이 되려면 시맨틱 마크업이 필요하다.

- 웹접근성(Accessibility)

스크린 리더의 경우에 음성으로 문서를 읽어야 하는데, 시맨틱 마크업을 사용하지 않을 경우 내용을 파악하기 어렵다.

- 유지보수, 가독성

📌 HTML5에 추가된 시맨틱 태그

• header, nav, footer, main, aside, article, section

📌 헷갈리는 태그들

i와 em태그의 차이점

• i : 시각적으로만 이탤릭체
• em : 강조하는 이탤릭체

b와 strong

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

ol vs ul vs dl

• ol : 순서가 있는 목록
• ul : 순서가 없는 목록
• dl : 정의, 설명 목록

image vs background-image(css)

• image : 이미지가 웹페이지 안에서 중요한 요소로 자리잡고 있을 때 image 태그 사용
• background-image(css) : 문서의 내용과는 별개로 스타일링 목적이고 문서의 일부분이 아닌 경우에 사용

button vs a

• button : 사용자의 특정한 액션을 위해서는 button
• a : 다른 페이지로 이동할 때(링크)는 a

출처
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://www.w3schools.com/html/html5_semantic_elements.asp
https://developer.mozilla.org/ko/docs/Web/HTML/Element
https://www.youtube.com/watch?v=T7h8O7dpJIg