Semantic HTML

dnjstd·2021년 9월 24일
1
post-thumbnail

Why use Semantic HTML?

SEO(검색엔진 최적화) 웹 접근성 가독성

웹페이지를 구성할때 적절한 위치에 적합한 요소를 활용하여 의미를 가진 하나의 구조로 만들어야 사용자에게 정확한 정보를 제공할 수 있다.

Non-semantic

<div>,<span> 로만 구성된 코드

Semantic Elements

header 도입부, 헤딩, 목차, 검색, 소개 및 탐색에 도움을 주는 콘텐츠
footer 저작권, 연락처 정보, 이용약관, 사이트 맵, 링크 참조

<section> <article>

section 주제별 컨텐츠 그룹, 섹션(구획)을 형성하는 요소
article 페이지 안에서 독립적으로 구분해도 의미가 통하는 구획

<main>

  • 문서 또는 애플리케이션 body 요소의 주요 콘텐츠
  • 섹션 요소가 아니며, 하나 이상 존재하지 않는다. (나머지 hidden 처리)
  • 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 링크를 포함하는 섹션 요소

<aside>

  • 웹 사이트의 사이드바에 해당되는 부수적 콘텐츠(메인 콘텐츠와 분리된) 섹션

+++

<details> "열림" 상태일 때만 내부 정보를 보여주는 정보 공개 위젯을 생성한다.
<figure> 독립적인 콘텐츠를 표현, figcaption 태그를 사용해 설명을 붙일 수 있다.
<figcaption> 부모 태그 figure가 포함하는 다른 콘텐츠에 대한 설명 혹은 범례를 나타낸다.
<mark> 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타낸다.
<details> 요소의 공개 상자에 대한 요약, 캡션 또는 범례 지정을 나타낸다.
<time> 시간의 특정 지점 또는 구간을 나타낸다.

profile
Frontend Engineer 🌱

0개의 댓글