Semantic은 무엇인가?
사전적 의미로는 '의미의', '의미론적인' 이라고 할 수 있다.
그래서 Semantic HTML/Semantic Web이라고 하면 의미론적 HTML/의미론적 웹 라는 말과 똑같다.
여기서 의미론 이라는 단어가 생소하거나 처음 듣는 사람이 있을 수 있는데, 그냥 말 그대로 단어나 문장의 의미를 연구하는 언어학의 한 분야라고 보면 된다.
왜 Semantic하게 작성하는 것이 중요한가?
- 용이한 접근성
- 검색엔진 (SEO) 최적화
- 가독성 향상
간단한 문장으로 표현하면 개발자 뿐 아니라 브라우저, 검색엔진 등이 화면 웹 페이지를 더 잘 해석할 수 있게 해준다.
non-semantic vs semantic
그림을 보면 어떤 것이 semantic 한 것인지 semantic 하지 않은지 쉽게 알 수 있다.
non-semantic 으로 표현한 HTML은 영혼과 감정이 들어가 있지 않은 노래라고 볼 수 있다. 혹은 감동없고 비유와 재미가 없는 시 또는 다른영화를 그대로 보고 베낀 양산형 2류영화 같은 것이다.
Semantic 하게 작성하는 법
<div id="header">Main Title</div>
<dl>
<dt>커뮤니케이션</dt>
<dd>메일</dd>
<dd>블로그</dd>
<dd>카페</dd>
<dd>티스토리</dd>
<dd>카카오스토리</dd>
<dd>브런치</dd>
</dl>이런 코드들이 대표적인 non-semantic 코드라고 할 수 있다.
- div라는 구조화하는데에 만 필요한 의미없는 태그를 제목설정에 써버렸고
- dl(description list)라는 1대1매칭으로 어떤 무언가를 설명해야 될 때 써야되는 태그를 단순 구조화하기 위해 엉뚱한 곳에 써버렸다.
이런 코드들은 단언컨데 좋은 코드라고 할 수 없다.
<header>
<h1>Main Title</h1>
<p>posted by Justin</p>
</header><dl>
<dt>Geeks Class</dt>
<dd>It is an extensive classroom programme for enhancing DS and Algo concepts.</dd>
<dt>Fork python</dt>
<dd>It is a course designed for beginners in python.</dd>
<dt>Interview Preparation</dt>
<dd>It is a course designed for preparation of interviews in top product based companies.</dd>
</dl>차라리 이 코드가 더 가독성이 좋아보이고 semantic한 코드라고 할 수 있겠다.
결론
HTML5에는 header, footer, nav, aside, section, main, figure, dt,dl,dd 등의 semantic 태그를 사용 할 수 있으니 각 문맥과 의미에 맞게 개발자들은 사용해야한다.
semantic하게, 의미있게 웹 레이아웃 구조를 만들어가는 것은 단순 건축물을 설계하는 것 뿐 아니라 그 건축물에 설계자의 영혼을 불어넣는 것이다. 영혼이 없는 건축물, 예술품, 음식, 노래 등은 의미가 없다. 영혼이 없는 것을 만드는 것은 AI 로봇에 맡기면 된다.
인간은 영혼이 있기에 인간이라고 생각한다. 나도 아직 공부하는 입장이지만 영혼 없는 코드를 작성하는 것은 피하고 싶다.
