🤔 시멘틱 태그

시맨틱 태그란 브라우저, 검색엔진, 개발자에게 컨텐츠의 의미를 명확하게 설명해줄 수 있는 태그

• 시맨틱 태그를 사용하지 않는다고 코드에 문제가 있는것은 아니지만 암묵적으로 지켜야 할 규칙이기 때문에 의미에 맞게 사용하는 것이 좋다.

🧐 예시

<font size="6"><b>Hello</b></font>
<h1>Hello</h1>

위 결과적으로는 같은 결과를 보여주는 태그임
첫 줄은 아무런 의미가 내포되어 있지 않음
두 번째 줄은 제목 중 가장 중요한 것이라는 의미를 가짐

태그	의미
<header>	페이지 소개나 제목같은 정보를 의미
<footer>	저작권 정보나 사이트 제공자 정보를 의미
<nav>	네비게이션바를 의미
<main>	주요 컨텐츠가 들어가는 공간 ( 페이지당 하나만 사용 )
<article>	본문의 주내용을 의미 ( 독립적으로 존재가 가능해야함 )
<section>	본문의 여러 내용중 하나를 의미
<aside>	본문과 간접적으로 관련있는 부분을 넣는 공간
<figure>	사진, 다이어그램 같은 독립적인 콘텐츠를 넣는 공간
<figcaption>	<figure>의 자식으로 부모의 설명을 넣는 공간
<mark>	강조를 의미
<details>	사용자가 열고 닫을 수 있는 정보를 의미
<summary>	<details>의 제목 역할을 하는 태그
<time>	날짜와 시간을 의미

참고한 사이트

• 시멘틱태그
• 제로초