✅ 지난 TIL-009 글을 통해 학습한 Semantic Tag의 내용에 조금 더 보충하고자 한다.
1. Semantic web
- Semantic web은 의미론적인 웹을 뜻하며, 인터넷의 리소스와 자원간의 관계 및 의미를 컴퓨터가 인간을 대신하여 해석할 수 있도록 하게 하는 기술이다. 이는 여러 정보에 메타데이터를 부여하여 데이터베이스 구축을 용이하게 한다.
2. Semantic Tag 란?
- Semantic의 사전적 의미는 "의미의", "의미론적인" 이다. 즉 Semantic Tag는 의미가 있는 태그라는 뜻이다.
3. Semantic Tag를 쓰는 이유?
1) 개발자가 의도한 태그의 의미가 명확하게 드러나게 하기 위함이다.
2) 코드의 가독성을 높여 유지/보수의 효율을 높인다
3) 검색엔진에 좀 더 의미론적인 정보를 전달하고 이를 통해 효과적인 크롤링과 인덱싱을 가능하게 한다. 즉 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 함으로써 컴퓨터가 HTML 태그의 의미를 명확하게 해석하여 데이터를 활용하게 된다.
👉 검색 엔진은 의미론적 마크업을 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주하기에 서비스를 제공하는 개발자의 입장에서는 매우 중요하게 고려해야할 사항이다. (SEO(Search Engine Optimization) 기본 가이드 참고!)
4. HTML 의 Tag
-
HTML의 태그에는 non-sematic Tag와 semantic Tag 가 있다.
✅ non-Semantic Tag
div, span 등이 있음. content에 대하여 어떤 설명도 하지 않음.
✅ Semantic Tag
form, table, img 등이 있음.content의 의미를 명확히 설명함 -
그 밖에 HTML5에서 새로 추가된 태그로는 아래와 같이 있다.
header: 헤더를 의미함.
nav: 내비게이션을 의미함.
aside: 사이드에 위치하는 공간을 의미함.
section: 본문의 여러 내용(article)을 포함하는 공간을 의미함.
article: 분문의 주내용이 들어가는 공간을 의미함.
footer: 푸터를 의미함
5. HTML img 태그 vs CSS background-image 속성
-
사이트에 이미지를 추가하는 방법으로는 html img 태그를 사용하는 방법과 CSS background-image를 사용하는 방법이 있다.
-
두 방법의 차이점은 이미지 로딩에 실패했을 경우의 표시 방법이다.
img 태그의 경우 이미지 로딩에 실패했을 경우 broken image와 내가 지정한 alt text 가 뜨게 된다. 반면에 background-image의 경우 아무 것도 뜨지 않는다. -
이러한 차이점을 고려하여 개발 목적 및 컨텐츠에 따라 두 방법중 하나를 택하여 사용하게 된다. 이미지의 업로드 실패로 인해 개발자가 표현하고자 한 의도가 잘 전달되지 않을 것 같은 경우에는 img 태그를 사용하여 alt text를 사용하는 것이 효과적일 것이다. 반면 이미지 업로드 실패가 컨텐츠에 별 영향이 없을 것으로 판단되는 경우에는 background-image 를 사용하게 된다.
📝 Reference
https://poiemaweb.com/html5-semantic-web
