[배운내용]
- Semantic Tags
- SEO & 웹 접근성
Semantic Tags
우리는 왜 Semantic을 필요로 할까?
: 약속된 형식으로 보다 빠른 인지를 도와줌
semantic tag가 있고 의미 없는 tag가 있다. → 글자 일부분을 꾸미기 위해 span으로 감싸서 css로 변화를 줄 때 span은 의미있게 쓰인게 아니다.
특징
- 검색엔진 최적화(SEO)에 유리하다.
<b>, <i>, <u>: css가 형편없이 지원되거나 완전히 지원되지 않는 경우에 표현할 수 있도록 고안되었으나, 의미론적이 아닌 표현에만 영향을 주는 이와 같은 요소들은 현재적 요소로 알려져 있으며 더이상 사용되어서는 안된다. 의미론은 접근성, SEO등에 매우 중요하기 때문.
- 웹 접근성 측면에서, 시각장애가 있는 사용자로 하여금 그 의미를 훨씬 잘 파악할 수 있다. 중요와 강조
<em>: 브라우저에는 이탤릭체로 스타일을 지정하지만 이탤릭 스타일링만을 위해 사용하는 것은 지양 / 화면판독기에 인식되면 다른 톤의 목소리로 표현된다.[<strong>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/strong): 브라우저에는 볼드체로 스타일을 지정하지만 이탤릭 스타일링만을 위해 사용하는 것은 지양 / 화면판독기에 인식되면 다른 톤의 목소리로 표현된다.
- 코드를 볼 때 가독성이 좋다.
SEO
:검색 엔진 최적화
검색 엔진은 웹을 크롤링하면서 페이지에서 페이지로 링크를 따라가고, 찾은 콘텐츠의 색인을 생성한다. 크롤러는 일정 규칙을 따르므로, SEO를 진행하며 해당 규칙을 밀접하게 따라가면 웹사이트가 검색 결과의 보다 높은 곳에 노출될 수 있다.
SEO는 3가지 큰 방향으로 나눌 수 있다.
1. 기술적
: 콘텐츠 마크업을 작성할 때 시맨틱 태그를 사용. 색인하길 원했던 콘텐츠만 크롤러가 긁어갈 것이다.
2. 콘텐츠 작성
: 방문자층에 맞는 언어로 콘텐츠를 작성. 이미지와 더불어 텍스트를 사요해, 크롤러가 주제를 이해할 수 있도록 도와라
3. 인기도
: 다른 유명한 사이트에서 여러분의 사이트로 링크를 했다면 더 많은 트래픽을 받는다.
검색 엔진 최적화의 분류
1. 온 페이지 SEO
: 웹사이트 내에서 검색 엔진 최적화를 위해 하는 일련의 작업을 말한다. H태그, 메타태그, 이미지 최적화, 콘텐츠 최적화, 글자의 수, 내부링크 요소들이 포함된다.
2. 오프 페이지 SEO
: 관련성, 신뢰성 및 권한, 사이트로 향하는 백링크
- 링크 확인 :
<a>태그를 사용 - 페이지에서 텍스트로 표현하기
-
시각적 콘텐츠가 텍스트 형식으로 표현되어야한다.(이미지에 관한 텍스트 정보 없이 이미지 목록만 포함된 제품 카테고리 페이지는 적합하지 않다.)
-
모든 페이지에는 구체적인 제목과 메타 설명이 있어야 한다.
-
의미론적 HTML을 사용한다.(플러그인을 사용하는 대신 콘텐츠에 의미론적 HTML 마크업을 사용할 것
웹 접근성
: 정보통신접근성 (Web 접근성)은 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 입니다.(한국 웹 접근성 인증 평가원에서 발췌)
참고
HTML 요소 참고서 - HTML: Hypertext Markup Language | MDN
