[2] 시맨틱 요소(Semantic Elements)에 대해서

시맨틱 요소란?

1. semantic 뜻
: 의미론의, 어의의, 의미의
: 의미가 있는 요소를 말하며 브라우저와 개발자 모두에게 의미를 명확하게 설명한다.

Non-Sementic 요소의 예
- <div> 및 <span>은 내용에 대해 아무 것도 알려주지 않음
- 이 태그들의 이름만 보고는 어떤 내용인지 유추할 수 없다.

Semanitc 요소의 예
- <form>, <articile> 및 <table>은 내용을 명확하게 정의한다.

 

 

<header>

<header>요소는 주로 제목과 소개 내용을 포함한다.

요소에는 일반적으로 다음이 포함된다.

• 하나 이상의 제목 요소 (h1 ~ h6)
• 로고 또는 아이콘
• 저작권 정보
• 작성자 이름

 

<section>

<section> 요소는 문서의 섹션을 정의한다.

W3C의 HTML 문서에 따르면
"섹션은 일반적으로 제목이 있는 주제별 콘텐츠 그룹이다"

<section>요소를 사용할 수 있는 위치의 예:

• 장
• 소개
• 뉴스 항목
• 연락처 정보

 

<nav>

- 주로 목차, 메뉴 등에 사용이 된다.

 

<footer>

<footer>요소는 문서 또는 섹션의 바닥글을 정의한다.

<footer>요소에는 일반적으로 다음이 포함된다.

• 저작권 정보
• 연락처 정보
• 사이트맵

 

 

---

정리