이다닷

[Frontend study] Day 7 - 시멘틱 마크업 본문

Frontend Study

[Frontend study] Day 7 - 시멘틱 마크업

이다닷 2024. 3. 27. 00:02

 '의미론적인 HTML 태그 문서 작성'이라는 뜻을 가진 시멘틱 마크업은 

=> 의미를 잘 전달할 수 있도록 HTML 태그 문서를 작성하는 일을 한다.

 

시멘틱 마크업이란?

 

시멘틱 마크업을 사용하는 이유

  • 웹 접근성에 효율적
  • 코드 가독성에 따른 유지 보수 용이
  • 검색엔진 최적화에 유리

 

시멘틱 마크업의 종류

  • header : 소개 및 탐색에 도움을 주는 콘텐츠, 제목, 로고, 검색 폼 등의 요소가 포함된다.
  • nav : 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 내비게이션이다. 메뉴, 목차, 색인 등에 사용된다.
  • main : 문서 <body>의 주요 콘텐츠를 나타낸다. 
  • article : 문서, 페이지, 애플리케이션 또는 사이트 안에서 독립적으로 구분되는 요소에 해당된다.
  • section : 문서나 애플리케이션 영역을 표시한다.
  • footer : 바닥글, 문서 하단에 들어가는 정보로, 사이트의 제작자나 저작권 정보 등을 주로 표시한다.
  • aside : 좌측과 우측 사이드 위치의 공간을 의미하며, 주요 콘텐츠 이외의 참고가 될 수 있는 컨텐츠를 표시한다.

 

 

저작자표시

'Frontend Study' 카테고리의 다른 글

[Frontend Study] Day 9 - javascript: this 개념  (0) 2024.04.08
[Frontend Study] Day 8 - JavaScript Event loop  (2) 2024.04.01
[Frontend Study] Day 6 - Display 속성  (0) 2024.03.19
[Frontend Study] Day 5 - position 속성  (0) 2024.03.17
[Frontend study] Day 4 - margin과 padding  (0) 2024.03.13
'Frontend Study' Related Articles more