HTML 태그들, 헷갈리는거 정리해 보았다 🥳 (시맨틱 태그, 중요한 태그들 모음)
헷갈렸던 내용을 깔끔하게 정리해보자!!
- 시맨틱(semantic) 태그들
- section, article 차이점
- 똑같은 이탤릭체인 i, em의 치명적인 차이점
- 볼드를 나타낼때 쓰는 b, strong 차이점
- img 태그와 css background-image이 둘중에 언제 어떤걸 써야하는지
- 언제 a태그와 button을 써야하는지
- 목록 태그의 차이점 ol, ul, dl
- 스타일링을 위해서 테이블을 쓰면 안되는 이유!
시맨틱(semantic) 태그, 시맨틱 마크업
-
semantic: 의미의, 의미가 있는
-
html 태그도 저마다의 의미가 있다
-
예) 중요한 제목 => 글자만 키운다고 해서 의미를 가지진 않음! => h1 태그를 사용
-
모든 태그를 div 태그를 이용해서 만들수 도 있음
-
하지만 semantic tag를 적절히 사용하면 좋다!
-
장점
- SEO(Search Engine Optimization)
- Accessibility (Screen Reader, 키보드만을 사용해 웹 사이트를 사용)
- For us, Maintainability
-
header: 브랜드 로고, 사용자 메뉴등
-
nav: 메뉴가 모여있다면 사용
-
footer: 부가적인 정보 : 링크
-
main: 웹 사이트에서 중요한 컨텐츠
-
aside: 메인에서 직접적이진 않은 컨텐츠, 연관된 링크
-
section: !
-
article: !
article vs section
- article: 블로그에서 하나의 글, 신문에서 하나의 기사, 자체만으로 독립적으로 다른 페이지에 보여줬을 때 문제가 없다
- main과 상관없이 고유한 정보를 나타냄
- section: main, article등에서 연관있는 내용을 묶었을 때 section을 사용
- 카테고리 분류해서 포스트 나타내기
i vs em
- screen reader에서 읽었을 때 강조하려면 em태그를 사용해야 함
- i는 별다른 의미가 없음 (책의 제목,인용구 등)
- em 강조하는 이탤릭체 (정말 강조하고 싶은 이탤릭체)
b vs strong
- 위와 비슷함
- screen reader에서 읽었을 때 strong이 강조됨
ul vs ol vs dl
- ul : unordered list, 순서가 없는 리스트
- ol : ordered list, 순서가 있는 리스트, 순서가 중요할 때 사용
- dl : description list, 어떠한 단어에 대한 설명이 묶여있을 때 사용
img vs css background-image
- 웹 페이지에서 중요한 이미지일 때 => img 태그
- 문서의 일부분이 아닌경우 => css background-image
- 이 이미지가 없어도 문서를 읽었을 때 관계가 없음
button vs a
- button => 사용자의 특정한 액션을 위해
- a => 사용자가 어디론가 이동할 때
table vs css
- table 태그를 이용해서 스타일링을 하기보다는
- css flex, grid를 사용해서 스타일링을 하자!