📌 시맨틱 요소(Semantic Element)란?
Syntax는 문법, 구조 또는 문장 내에 있는 구성 요소의 순서를 의미하고,
Semantics는 구성요소 자체의 의미를 뜻한다.
브라우저에서 시맨틱 요소란, 그 태그 자체가 그 내용의 의미를 명확하게 설명하는 요소를 말한다. 이런 시맨틱 요소들을 잘 활용하면, 코드의 가독성을 높일 수 있고, 브라우저의 유지보수가 좀 더 용이하게 된다.
- Non Semantic 요소
<div>, <span> - 내용에 대한 정보 X - Semantic 요소
<form>, <article>, <table> - 어떤 내용을 포함할지에 대한 정보를 담고 있음
📌 시맨틱 요소의 종류
시맨틱 요소를 이용하면,
<div>header</div> 이런식으로 div를 이용하는 대신
<header>header</header>이렇게 표현을 할 수 있고, 이런 시맨틱 태그들을 잘 이용하면 훨씬 코드의 가독성이 높아진다. 자주 사용하는 시맨틱 태그들만 몇 가지 간략하게 소개해보려고 한다.
안녕하세요