Semantic Tag
semantic: 의미있는, 유의미한
중요성
- SEO(Search Engine Optimization)
- Accesibility
- For us, Maintainability
1) article VS section
-
article
하나를 단독적으로 보일 때, 그 자체만으로 다른 page 에 보일 때 문제 없이 사용할 수 있는 Tag
-
section
anywhere, 연관있는 내용들을 묶을 때 사용
2) i VS em / b VS strong
- i: 시각적으로 Italic
- b: 시각적으로 Bold
- em: 강조하는 Italic
- strong: 정말로 중요한 bold
3) ol VS ul VS dl
- ol: 순서가 있는 list -> 순서가 중요할 때 사용
- ul: 순서 없는 list
- dl: 정의, 설명 목록
{ dt: WORD, dd: Description}
4) img VS background-img(CSS)
- img: 문서의 일부분에 포함될 경우
- background-img: 이미지가 없어도 문서를 읽고 이해하는데 상관없는 경우. 즉, Styling
5) button VS a
- button: 특정 action을 하기 위함
- a: 링크, 화면 내 어딘가로 이동할 때
6) table VS CSS
- table: (행+열) data
- CSS: Flex, grid
전에는 css가 발달되지 않아서 table을 이용해 styling을 했지만, 이제는 CSS로 styling 하자.
위 포스트는 Youtube 드림코딩 엘리님의 영상을 참고하여 작성했습니다.
제가 공부하려고 작성한 POST라 가독성이 떨어지기때문에
더 자세히 공부하시고 싶으시면 하단의 링크를 참조해주세요.
