HTML 시멘틱 태그 등
Semantic tags = semantic markup
- 검색을 최적화 하기 위해서
- 웹 접근성때문에(시각적 뿐만 아닐때 동작이 문제없음)
- 개발자들을 위해서
중요한 메뉴: header
그안에 중요한게 모여있다면 nav
부가적인 정보 footer
현재 중요한 컨텐츠 main
페이지 컨텐츠와 상관없는 부가적:aside(광고, 연관된 다른 링크 정보 담아놓기)
div그룹 보다는 필요에따라 article(안에 section, section))
article vs section
블로그 포스트에서 가사, 기사 하나를 하나 그 자체를 묶어줄때 article
→ 자체만으로 독립적으로 보여질때 문제없을때 사용가능
→ 메인 안에있는 다른내용과 상관없이 고유한 정보를 나타낼때
그안에
section이, 서로 연관있는걸 묶어줄때 section으로 묶어주기
한페이지 안에 여러가지 내용보여준다면, 섹션별로 나누고 하나의 섹션안에서 또다른 블로그 포스트 쓴다면 아티클 사용
i vs em
<em></em>i태그는 시각적으로 꺾여 변환되고 별다른 의미없음,인용구, em태그는 강조하는 이탤릭체
b vs strong
정말 중요할때 strong
ol vs ul vs dl
순서없는 단순히 목록: ul
그래서 이렇게 묶어서 쓸수도있다.리스트 아이템 안에 또다른 ul이용가능하고 중첩이 가능하다.
목록중 순서가 중요하다면
ol을 이용해라.
dl → 어떤 단어에 대해 설명이 묶여있을때
~와 ~에 대한설명 묶여있는 목록 이용
img vs background
html문서안에 자체적으로 포함되게 img
하지만 문서의 내용과는 별개로 배경이미지로 사용되는경우 background-image
button vs a
리뷰, 추천 ,가입 퀴즈 풀기 사용자 특정 액션을 위해서 button
어디론가 이동할때, 페이지 내에서도 a
table vs css
(행+열)데이터!
자체적으로 문서안에서 의미있게 필요한지, 스타일링인지 생각해야한다.
