1. semantic이란?
참고할 글: 2021.04.11 - [코딩/HTML] - 시맨틱 태그(semantic tag) 사용 방법
웹 페이지를 하나의 도시라고 비유한다면, 그 도시를 여행함에 있어 버스정류장이 어디인지, 도로가 어디인지, 기차역, 혹은 대합실, 특실, 일반실이 각각 어디인지를 알려주는 태그가 시맨틱 태그다.
즉, semantic은 그 도시의 설계도를 보여준다.
semantic의 뜻: 의미의, 의미론의
시맨틱 태그들은 검색엔진에게 의미론적 구조를 알려준다.(←의미론적 구조=그 영역이 문서 구조에서 어떤 의미인지)
이름만 듣고도 그 영역이 어떤 역할을 하는 곳인지 알 수 있게 한다.
또한, 여행객 또는 웹페이지를 개발 또는 수정코자 하는 사람에게 의미론적 구조를 알려준다.
사람들은 html 소스만 보고도 어디가 제목이고 어디가 메뉴인지 쉽게 알 수 있다.
2. 시맨틱 태그 이미지
다음 그림처럼(혹은 다르게, 혹은 더 개성적으로) 표현될 수 있다.
(각 영역의 배치는 자유)
3. 어느 구역에 쓰이는가?
html은 크게 head와 body로 나뉘는데, head 부분은 화면에 안 나온다.
화면에 나오는 부분은 전부 body 부분이므로
이 body부분을 header, section, footer, 등으로 구역을 분할하는 것이다.
그러므로 위 그림의 <header>도 <body>의 일부 영역이다.
4. 꼭 써야만 하는가?
1) 이 태그들을 쓰지 않으면 검색엔진이 많이 헤맨다.
2) 그리고 개발이나 수정을 하는 사람들이 수정할 곳을 하나 찾는데도 엄청 시간이 걸릴 것이다.
3) 시맨틱 태그를 쓰면 문서 구조가 명확하게 나누어져 모바일 등 여러 기계(디바이스)에서 최적 화면을 구현하기가 쉽다.
참고로, 아래 두 요소(태그)는 결과 값이 똑같다.
<div class = "header"> 시맨틱에 대하여 </div>
<header> 시맨틱에 대하여 </header>
그러나, 앞의 것은 단순이 <div>를 사용하여 이름을 붙여 주었을 뿐,
뒤의 것은 <header>라는 태그를 사용하여 자신의 영역을 분명히 정의했다.
자신의 콘텐츠에 대해 그 의미론적(simantic) 구조를 명확히 설명하고 정의하는 것, 이것이 시맨틱 태그다.
5. 있어도 그만, 없어도 그만이라는 그 말은 무엇인가?
그 말은 일반 태그처럼 <p> 단락이 시작된다 </p> 단락이 끝났다- 등의 구체적인 기능을 하지 않는다-라는 말이다.
그러나, 단락이 시작되고 끝나고 하는 것도, 기차역, 버스정류장, 도로, 일반실 등 그 구역에 들어가서 하는 일이다.
과거에 html을 배우고 웹페이지를 만들던 사람들 중에는 오래된 습관을 못 바꿔서 이 태그를 써도 그만 안 써도 그만이라고 말하는 사람이 있을지 모르지만,
<div id="nav"> <div class="header"> <div id="footer"> 라고, 옛날에는 썼는데
<nav>, <header>, <footer>라고 쓰게 된 것은 분명 효율적이고 편리하다.
새로 배우는 분들은 반드시 쓰는 게 좋다.
검색엔진 최적화에 매우 유리하다.
6. 시맨틱 태그 종류와 태그별 정리.
1) 많이 쓰는 코드 : 다음 글에 정리
2) 좀 덜 쓰이는 코드 : 다음 글에 정리
3) 예제 : 다음 글에 정리.
'코딩 > HTML' 카테고리의 다른 글
| 메타 태그- 눈에 안 보이는 세계 (0) | 2021.04.11 |
|---|---|
| 시맨틱 태그(semantic tag) 사용 방법 (2) | 2021.04.11 |
| head, heading, header 구별 방법 (0) | 2021.04.08 |
| 잊어야 할 태그(tag)들 (0) | 2021.04.08 |
| 속성(attributes)과 요소 (0) | 2021.04.07 |