📢 Semantic Web란?
: 사람 끼리의 소통을 위한 Web이 아닌 컴퓨터 끼리의 소통을 위해 ‘팀버너스리’에 의해 고안된 Web
📢 Simantic Tag란?
: 의미를 갖는 태그
먼저 단어의 의미를 찾아보니 사전적 의미로 ‘의미의’라는 뜻을 가지고 있었다.
‘의미를 갖게 해주는 태그겠구나’를 예상하고 학습해보니 확 와닿을 수 있었다.
앞으로 FE개발을 하며 우리가 그려나가야 할 밑바탕인 HTML에 기본적으로 갖추고 있는
, , 또한 의미를 가지고 있으며 그 안에 앞으로 우리가 표현해야할 거의 모든 코드의 줄들이 의미를 갖고 있게 된다. (📙 다음은 태그의 형식이다.
: 작성할 내용
몇몇의 태그를 제외하고 태그는 항상 끝맺음 태그가 필요하다.
(슬래쉬를 이용하여 끝맺음을 표현)
🎨 예시
<h1>안녕</h1>
: h1의 크기로 안녕이 표시된다.
<a href="https://naver.com">네이버로 이동</a>
: a태그는 링크를 anchor의 앞글자로 ‘닻’ 즉, 클릭 시 해당 링크로 닻을 내린다는 의미로 만들어진 것이다.
<img src="./me.png" alt="내사진">
: 이미지 파일을 의미하는 태그, 특징적으로 끝맺음 태그가 필요없는 것중 하나.
위에서 a태그와 img태그는 안쪽으로 부연 설명같은 것이 있다.
href와 src같은 것을 속성이라 한다.
예시 중 하나로 img를 표시하는 법으로 들 수 있는데,
img를 브라우저에 띄우는 방법은 2가지가 있다.
- img태그를 이용하여 띄우는 방법
- 이경우
<img>라는 태그와 class, id에 의미를 넣어줄수 있고
alt(이미지가 뜨지 않았을 때 설명란)을 이용해 개발자간 소통을 원활하게 해주는 장치들이 있다.
- CSS를 이용하여 불러오는 방법
- 이렇게 불러온다면 단점:
background-image 속성으로 넣게 되면, html 코드 상으로는 해당 이미지가 어떤 맥락인지, 어떤 의미의 이미지인지 알 수 없게 된다.
Semantic Tag 사용 이유!
검색 엔진 최적화
검색 엔진 최적화(SEO: Search Engine Optimization)는 검색엔진이 웹페이지의 자료를 수집하거나 순위를 방식에 맞게 웹페이지를 구성하여, 검색 결과의 상위에 나올 수 있게하는 행위를 말합니다.
SEO를 위해서는 검색어를 페이지에 적절하게 배치해야 합니다. 검색엔진은 결과를 보여줄 때, HTML의 태그들을 분석합니다. 이 때, Semantic한 문서는 검색엔진이 유의미한 결과를 낳을 수 있도록 합니다.유지 보수 용이
div와 span으로 도배를 하게 되면 어떤걸 말하고자하는 한눈에 파악이 되지 않는다.
반면, 의미를 갖고 있는 semantic tag를 사용한다면 어떤 의미를 갖고 있는지 한 눈에 파악이 되어 유지보수가 편해짐(개발자간의 원활한 소통으로 웃으며(?) 대화할 수 있다.
