HTML5 시맨틱(Semantic) 요소

Semantic 

• 프로그래밍에서, 시멘틱(Semantic)은 코드 조각의 의미를 나타낸다.
• 이 HTML 엘리먼트가 가진 목적이나 역할은 무엇인가?
• 이 JS 라인을 실행하는 것은 어떤 효과가 있는가?

 

HTML Semantic 

• HTML에는 Semantic 요소와 Non-Semantic 요소로 구분된다.
• Semantic 요소는 목적이나 역할이 존재한다. ( 내용에 대해 알려준다 )
• Non-Semantic 요소는 특별한 목적이나 역할이 존재하지 않는다. ( 내용에 대해 아무것도 알려주지 않는다)
• Semantic 요소에는 100여개 종류가 있다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element

HTML elements reference - HTML: HyperText Markup Language | MDN

HTML Semantic vs Non Semantic

<h1>This is a top level heading</h1>

<h1>은 시맥틱 요소이다. `이 페이지에서 최상위 제목`이라는 역할, 의미를 가진다. 

 

<span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span>

반면 모든 요소를 `최상위 제목`처럼 보이게 할 수 있다,

이렇게 하면 동일하게 보지이만, 중요한 키워드로 간주하지 않게 된다. 

가능한 우리는 의미론적인 시멘틱한 요소를 사용하여 HTML을 구성하자

• 검색 엔진은 시멘틱요소를 참조하여 인덱싱을 하기에 중요한 키워드로 간주된다
• 개발자에게 어떤 의미인지 간접적으로 전달한다.

정리 및 느낀점

• HTML을 이용하여 웹사이트의 구조를 만들 때, 시멘틱 요소를 사용하여 구조를 만들자.
• 시멘틱 요소를 사용하면 개발자, 브라우저, 검색엔진이 각 요소에 대해 의미를 파악할 수 있다. 
• HTML 시멘틱 요소는 https://developer.mozilla.org/ko/docs/Glossary/Semantics 참고하자

Semantics - 용어 사전 | MDN

참고

https://developer.mozilla.org/ko/docs/Glossary/Semantics
http://jun.hansung.ac.kr/WP_2014/WP/lecture%20notes/HTML5%20Semantic%20Elements.html
https://poiemaweb.com/html5-semantic-web