TIL - 06 - HTML - Semantic Elements

park_kyo_su·2021년 6월 8일
0

HTML

목록 보기
2/3
post-thumbnail

Semantic Elements

Semantic이 무엇인지 명확하게 이해하기 위해 사전적인 의미를 검색했다.

semantic = "의미의, 의미론적인"

경계를 나눈다 구분한다는 의미인데, 그렇다면 프로그래밍에서는 어떤 의미로 적용될까?

프로그래밍에서의 시멘틱 요소의 의미를 정리하자면 다음과 같다.

Semantic = 의미와 유사성을 기준으로 브라우저 개발자 모두에게 컨텐츠의 의미를 직관적으로 설명하는 역할

즉, 시멘틱 요소를 통해 코드는 작성한 의도를 직관적으로 보여준다. 이를 통해 코드의 가독성을 높이며 유지보수를 쉽게할 수 있게 해준다.

시멘틱 요소를 활용한 웹페이지는 보다 의미와 유사성 측면에서 직관적으로 검색엔진에 전달하며, 검색엔진 또한 시멘틱 요소들을 활용하여 효과적인 크롤링과 인덱싱을 수행한다.

Semantics in HTML


HTML요소는 아래와 같이 구분할 수 있다.

non-semantic elements
<div>, <span> - content에 관한 어떠한 정보도 나타내지 않는다.

semantic elements
<form>, <tabel>, <article> - content의 의미를 명확하게 나타낸다.

오늘의 한줄

앞으로 작업 초반에 마크업을 작성할때 "내가 적고자 하는 데이터를 가장 잘 나타내는 요소는 무엇일까?" 라는 생각을 가지고 작성해야겠다.

참고 문헌
https://www.w3schools.com/html/html5_semantic_elements.asp
https://developer.mozilla.org/ko/docs/Glossary/Semantics
https://poiemaweb.com/html5-semantic-web

profile
이사중 ! https://dpark-log.tistory.com/14

0개의 댓글