Semantic HTML의 필요성을 예시를 들어 설명해주세요.
Semantic이라는 뜻은 relating to meaning
즉, 의미있는 HTML이나 또는 HTML요소의 내용에 어떤 의미가 있는지에 관련되어 있다는 뜻이다
시맨틱 HTML을 사용하면 크롤러가 코드를 더 쉽게 알아볼 수 있다
그리고 시각장애인 등을 위한 스크린 리더를 쓰는 사람들이 좀 더 쉽게 접근할 수 있다
또한 문서의 구조와 의미를 명확하게 표현할 수 있기 때문에 코드를 이해하기 쉽고 유지보수하기 쉽다
Semantic HTML에는 다음과 같은 요소들이 있다
<article> : 내용이 각자 독립적으로 구분됨. 콘텐츠 자체를 독립적으로 배포하거나 재사용할 수 있음
ex)게시판, 뉴스 기사, 블로그 글, 포럼
//<article> 예시
<article>
<h1>강아지 인기 간식 순위</h1>
<p>여행 피서지로 좋은 곳</p>
</article><section> : 서로 관계 있는 문서를 분리하는 역할을 함.
ex: 책의 목차나 강의의 단원
<section>
<h1>타입스크립트</h1>
<p>타입스크립트로 리팩토링 하기</p>
</section>내용과 서로 관계가 있다면 section을 사용하고 각 내용이 독립적이라면 article을 사용
<aside> : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄. 주로 사이드바나 콜아웃 박스로 표현
<details> : <summary>태그와 같이 쓰이며 열림 상태일 때만 내용을 보여주는 위젯을 생성함
<summary>을 <details>의 자식요소로 설정하면 <summary>가 <details>의 내용을 요약하는 레이블이 되고, <summary>을 누르면 <details>의 내용이 보임
<figcaption> : <figure>가 포함하는 다른 요소에 대한 설명을 적을 수 있는 태그
<figure> : 독립적인 콘텐츠를 표현. <figcaption>를 통해 설명을 붙일 수 있음
<footer> : 말 그대로 footer를 나타내는 태그
<header> : 말 그대로 header를 나타내는 태그
<main> : body의 주요 콘텐츠를 나타냄. 여기서 말하는 주요 콘텐츠란 문서의 핵심주제나 앱의 핵심 기능에 직접적으로 관련있는 콘텐츠를 말함
<mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냄. 형광펜 같은 역할이라고 생각하면 쉬움
<nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄
주로 메뉴나 목차에 많이 사용됨
