프론트엔드 개발을 하면서 쉬우면서도 어려웠던 HTML!🤣🤣
HTML과 CSS로 레이아웃 작업을 할때 시맨틱 태그를 어떻게 쓰는것이 좋을지 고민을 많이했다.
그럴 때마다 HTML 헷갈린다.. 라는 생각을 자주하게 되었습니다.
시맨틱이 뭘까?
시맨틱(Semantic) HTML을 직역하면 의미론적 HTML이 된다.
예를 들어, div 태그는 의미가 없는 박스태그이므로 non-semantic 태그라고 할 수 있고 header article등의 태그는 Semantic 태그라고 볼 수 있다.
ex) :
header: 제목, 로고, 검색 폼
main: 문서body의 주요 콘텐츠를 나타냅니다.
시맨틱 태그가 중요한 이유
1. 접근성
2. 검색엔진 최적화(SEO : Search Engine Optimization)
검색엔진에 검색시 상위에 문서를 노출하려면 SEO 최적화는 필수다.
구글 같은 검색 사이트는 주기적으로 전 세계에 공개된 웹을 수집하고 분석합니다.
그 때 태그와 단어의 빈도 등 검색엔진 자체 알고리즘에 따라 주요 키워드를 추출
<div>, <span>을 사용하는 문서보다는 의미있는 시맨틱태그를 사용하는 것이 중요하다.article vs section
article = 블로그 포스팅에서 포스팅 하나, 신문기사에서 신문기사 하나! 를 묶어줄 때 사용.
독립적으로 사용할 때 문제가 없을 때 사용.
section = 내용들이 연관될 때 사용한다. <main>안이나 <article> 여러개를 묶을때 사용한다.i vs em
둘다 이탤릭 채로 표시하는 것이지만 이 것을 스크린리더로 읽을 때 <em>은 강조된다.b vs strong
둘다 볼드채로 표시되지만 스크린리더로 읽을 때 <strong`는 강조된다.img vs CSS background
이미지가 하나의 요소로 중요한 역할을 하고 있을때 <img>태그를 사용한다.
문서의 일부분이 아닌 배경요소로만 사용된다면 <backgrond-image>를 사용한다.button vs a
<button> - 사용자의 어떤 특정한 행동을 위한! 로그인, 가입, 추천, 포스팅
<a> - 어디론가 이동할때 사용.
