시멘틱 태그 (& 스파케티 코드)

Semantic Tags의 Semantic은 '의미의, 의미론적의'라는 뜻을 가지고 있다.

만약 문서의 제목을 나타낼때 <h1> 태그를 사용하지 않고,

Stlye로 폰트의 크기를 주어서 제목을 나타낼 경우.

시각적으로는 제목처럼 보일지라도

의미적인 가치가 없기 때문에 시멘틱 태그를 사용 해야한다.

검색 엔진은 시멘틱 태그를 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 인식한다.

이때 시멘틱 태그를 적절하게 사용한 웹사이트는 검색 엔진에 자주 노출되는 장점이 있다.

시각 장애인이 음성으로 사이트를 안내하는 화면 판독기를 사용할 경우,

또는 정보 취약계층이 웹 사이트를 방문할 때 사용자의 특성을 고려할 수 있다.

개발자들의 코드를 확인할 때 가독성이 좋고 무엇이 어디에 있는지 확인하기가 수월해진다.

구조 시멘틱 태그 정리
<header>	웹사이트 소개 및 탐색을 나타냄.	제목, 로고, 검색 폼 등
<nav>	문서의 현재 페이지 또는 다른 페이지 링크 이동을 나타냄.	메뉴, 목차, 색인
<main>	문서 <body>의 주요 컨텐츠를 나타냄.	header, footer, nav 제외. 문서에서 한번만 사용.
<section>	문서의 구역을 분리함. 문서의 흐름과 논리의 관련이 있음.	.
<acticle>	문서의 구역을 분리함. 문서의 흐름과 상관없이 독립적으로 사용 가능.	게시판, 블로그, 기사 등
<aside>	문서의 주요 내용과 간접적으로 연관된 부분을 나타냄.	광고, 사이드 바 등
<footer>	사이트 가장 하단의 위치하여 관련 정보를 나타냄	작성자, 저작권 정보, 관련 문서링크

이와 반대되는 용어로 스파게티 코드가 있다.

소스 코드가 복잡하게 얽힌 모습을 스파게티의 면발에 비유한 표현이다.

특징적으로 정상 작동하지만, 사람이 코드를 읽으면서 그 코드의 작동을 파악하기는 어렵다.

Study With me