[HTML] Semantic Tags

Front-End/HTML & CSS

[HTML] Semantic Tags

Voyage_dev 2022. 2. 21. 23:34

Semantic Tag
HTML5부터 등장하는 태그들이다

div에 class 값을 붙이면 모든 스타일링 작업이 가능하지만 어느 부분이 제목이고 바디인지 알 수가 없다

div에 class 붙여서 만드는 모든 구조와 파일은 현 상황에서는 하면 안 되는 일이다...

정의

semantic : 의미의, 의미가 있는
- HTML 태그들 중에서도 나름의 의미가 있는 태그 들을 말한다

특징

SEO (Search Engine Optimization)
- 검색 엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하면 브러우저의 검색 엔진이 내가 만든 웹 사이트를 어떤 검색 결과에 띄워줘야 될지를 알려줄 수 있다
웹 접근성 (Accessibility)
- 보통 사람들과 달리 웹 이용에 불편함을 겪는 사람들 (장애인, 노약자)을 위해 모든 사람들에게 평등한 웹 이용을 위해 만들어졌다
- 적절한 시멘틱 태그로 만들어진 사이트라면 스크린리더이든, 키보드만을 사용해서 문제없이 동작할 수 있다
유지보수
- div 태그로만 이루어져 있으면 class명으로 찾아야 된다. div가 많아지면 많아질수록 복잡해지므로 한 눈에 알아보기가 쉽지 않다
- 모든 구조를 div로 만드는 것보다 시멘틱이 한 눈에 즉, 가독성이 좋고 다른 개발자들도 유지보수하기가 용이해진다

여기서 다시 한 번 복습!

header : 머리말 영역으로 문서 또는 섹션의 헤더를 나타낸다 제목, 로고, 이름등의 요소도 포함할 수 있다

nav : 길을 안내하는 나침반이며 다른 영역, 아시트, 문서 사이를 탐색할 수 있는 링크의 집합.

header안에 여러가지 메뉴들이 모여있다면, div로 나누지 말고 nav태그를 사용

footer : 꼬리말 혹 바닥글, 화면 제일 아래 위치하며 주로 부가적인 정보나 링크가 들어가있다

main : 문서의 주요 콘텐츠를 작성, 한 페이지에 한 번만 가능

aside : 사이드 바, 사이드에 배치된다. 광고 혹은 연관된 다른 링크들, 사용하지 않아도 무방

article,section : section은 여러 콘텐츠의 묶음 article은 그 자체로 독립적 콘텐츠라고 보면 된다.

용도에 따라서 쓰면된다

Article vs Section

article은 독립적으로 문제가 없을 때 사용 ex) 개별 뉴스 기사 , 게시물

section은 article 안이나 main 안에서 연관되어 있는 내용을 묶을 때, 제목을 갖고 있으면서 문서 전체와 관련이 있는 콘텐츠의 집합이다

웹페이지에 이미지를 넣는 방식은 크게 두 가지

- HTML에서 <img /> 태그를 활용해 넣는 방법.

<img src="이미지 링크"/>

- CSS 에서 background-image 속성을 활용해 넣는 방법.

{ background-image: url("이미지 링크"); }

둘의 차이점은 무엇?

태그를 활용해 넣는 방법은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 속성에서 넣는 방법에서는 그렇지 못하다.
태그를 활용해 넣는 방법은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 좋다
태그를 활용해 넣는 방법은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 속성에서는 자동으로 색인화하지 않기 때문에 검색시 노출되지 않는다.

그럼 이 둘을 어떨 때 사용하면 좋을까?

HTML <img /> 태그 활용

검색 시 노출이 되도록 만들고 싶을 때
콘텐츠에 관련이 있는 이미지일 때
웹페이지 성능을 높이고 싶을 때

CSS background-image 속성 활용

디자인적인 요소로만 이미지를 활용하고 싶을 때
콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때

결론

검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직

추가 설명

근데 Img 태그는 왜 검색 시에 노출이 되고 background-image는 왜 검색 시에 노출이 되지 않을까?

img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시키지만 background-image 는 태그가 아닌 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하고 검색엔진이 인식하지 못하는 것이다
img 태그처럼 태그 자체만으로도 의미를 알 수 있는 태그들을 시맨틱 태그라고 부르는데, 시맨틱 태그를 쉽게 표현하자면 "내용이 뭔지 태그명만으로 알 수 있도록 만든 것"이라고 할 수 있다

TMI

이렇듯 시멘틱 태그는 컴퓨터와 사람 모두에게 그 의미를 명확하게 설명해주는 역할을 한다. 이는 시멘틱 웹을 기반으로 두고 있는데, 사람만이 웹에 수많은 정보의 의미를 파악하는 것이 아닌 컴퓨터가 그 일을 할 수 있도록 만든 것이 시맨틱 웹이다

출처 :