Semantic web/tag란?
사전상 Semantic은 의미론적인/의미있는 이라는 뜻이다. 그럼 쉽게 생각하여 의미있는 Web/Tag란 말인데 무슨 말인지 자세히 알아보자.
윗 구절의 첫인상이 어떠한가?
1. 한눈에 들어오지도 않고(가독성)
2. 시력이 좋지않은 어르신들에게는 눈이 아플만한 구절이다(접근성).
그리하여 띄어쓰기, 문단나누기, 들여쓰기 등을 통해 한글이 업그레이드 되면서 하기 구절과 같이 더욱 가독성/접근성이 좋아지게 되었다.
그리움의 파도를 헤엄치다 보면 한번도 와보지 않은 곳에 다다르고 붉어진 얼굴로 숨을 참아 겨우 닿은 그 끝에는 당신이 있을까 웃고 있을까 울고 있을까 손을 잡을 수 있을까 온기를 느낄 수 있을까.
Web 또한 그런 변화를 거쳐 Samentic 하게 되었다.
Semantic HTML 예시
1번 HTML
<body>
<div>
<div>농산물</div>
<div>과일</div>
</div>
<div>
<div>배</div>
<div>
<div>배는 맛있다.</div>
<div>내 배는 볼록해.</div>
<div>
</div>
<div>
<div>배 협회</div>
</div>
</body>
2번 HTML(Semantic)
<body>
<header>
<h1>농산물</h1>
<h2>과일</h2>
</header>
<main>
<ul>
<li>배</li>
</ul>
<article>
<p>과즙이 많은 배가 좋아.</p>
<p>배는 동그랗다.</p>
<article>
</main>
<footer>
<small>배 협회</small>
</footer>
</body>1번 HTML은 div 태그만 사용해 깔끔해 보일수도 있지만 개발적 측면에서 3가지 사항에 대해 효율성이 매우 떨어진다.
효율성이 떨어지는 3가지 이유
1. 가독성
HTML을 떠올렸을때 기본적으로 생각나는 구조가 있다. (Body/Header/Footer..etc)
기본 구조를 구축한 가장 큰 의미는 가독성이라 생각하는데, 그말은 타인이 그 구조를 보았을때 한눈에 상상이 되며 이해 될 수있다는 것이다.
그 부분에 있어 1번 HTML은 탈락이다.
2. 유지보수 용이성
2번 HTML은 상황별로 적절한 태그를 사용하였다. 이후 css를 입히거나 유지보수를 해야할 경우 적절한 태그별/혹은 id/class 별로 나눠두었을시 유지보수에 상당이 용이하다.
또한 다른 개발자가 보았을때도 한눈에 의미를 알아보기 쉽다.
3. 접근성
3-1) 접근성은 가능한 다양한 환경의 사람들이 접근하기 좋게 하는 것을 얘기한다. 맥북을 쓰는사람, 그램 쓰는사람, 아이폰/갤럭시 휴대폰, 장애인, 인터넷이 느린 제 3국등에서도 접근성을 높여야한다.
사실 현재의 지식으로는 Semantic HTML이 어떻게 이부분에 있어 기여하는지 모르겠다. 얕은 추측으로는 좀더 효율적이거나 보기좋은 코드여서? 아니면 추가기능을 통해 시각장애인이나 청각장애인에 도움을 줘서일까? 앞으로 배워나가면서 알게 되면 여기에 추가하겠다.
3-2) 접근성이 좋은 HTML은 노출성이 뛰어나다.(SEO)
아무리 좋은 사이트를 만든다 한들 노출이 안되면 무슨 소용인가? 서강준이 시골에서 농사지으면 연예인이 될 기회를 잡을수 없듯이 Semantic HTML의 높은 접근성은 SEO에 최적화 되어 더욱 많은 노출 기회를 가지고 시장성 또한 그에따라 확보하게 된다.
이는 우리나라/세계의 접근성 지침/가이드를 따르며 접근성 지침/가이드를 숙지후 코드를 작성한다면 보다 접근성이 좋은 사이트를 구축할 수 있지 않을까 생각한다.
참고<http://www.websoul.co.kr/accessibility/WA_guide21.asp >
Img vs Backgorund-img
차이점 (Semantic 관점, 사용 용도)
IMG 태그
- IMG 는 말그대로 태그이며 HTML을 타개발자도 봤을때 즉시 의미를 알 수있다. 그에따라 Semantic하며 SEO에 유리하다.
- 꾸미기용이 아닌 이미지가 컨텐츠일 경우 사용한다.
- 참고로 접근성을 높이기위해 밑과 같이 alt를 src앞에 사용하는 것을 추천한다.
<img alt="곰돌이사진" src="www.naver.com/cutebear" />
Background-img 속성
- 말그대로 속성이다. Semantic 하지 않으며 SEO에 불리함.
- 이미지가 주 컨텐츠가 아닐 경우 사용(백그라운드 용일 경우)
민성님의 첫 개발 블로그 오픈을 축하드립니다 !!! 공부하신 내용에서 그치지 않고 민성님의 생각도 같이 반영되어서 더 좋아요! 🤩 같이 화이팅 해봐요!