728x90
시맨틱(semantic) 이란 무엇일까?
▩ 시맨틱 HTML?
프로그래밍에서 시맨틱(semantic)이란, '코드조각'을 의미한다.
HTML5 이전에는 모든 구조를 <div>를 통해 잡다보니 한눈에 알아보기 어렵다는 지적이 있었고, 이를 개선하기 위해 HTML5 부터 시맨틱 태그(<header>,<nav>,<main>,<aside>,<article>,<footer>)를 사용하게 되었다.
| 태그종류 | 표시방법 | 내용 |
| header | <header></header> | 일반적으로 페이지나 해당 섹션의 가장 윗부분에 위치한다. 페이지 맨 위에 쓸 때는 사이트의 제목이 보통 들어가며, 선택적으로 상단바나 검색창 등이 안에 들어갈 수 있다. <head> 태그랑 헷갈리면 매우 곤란하다. section이나 article, aside 등으로 묶어놓은 섹션 안의 헤더 용도로 사용해도 된다. 이건 아래 footer 태그도 마찬가지다. |
| nav | <nav></nav> | 내비게이션(navigation)의 약자로, 일반적으로 상단바 등 사이트를 안내하는 요소에 사용된다. 보통은 안에 <ul>을 넣어 목록 형태로 사용한다. |
| main | <main></main> | 문서의 주요한 콘텐츠를 표시한다. 이 태그는 두 개 이상 보여져서는 안 된다. 두 개 이상의 main 요소를 쓸 경우 하나 이외의 전부를 hidden 속성을 써서 가려야 한다. 시맨틱 태그 중, Internet Explorer에서 유일하게 지원되지 않는 태그다. |
| article | <article></article> | 웹 페이지의 내용에 사용하는 태그이다. 문서나 페이지, 사이트에서 독립적으로 배포 혹은 재사용(예를 들어 투고 같은)할 수 있는 섹션에 사용한다. |
| section | <section></section> | 웹 페이지의 섹션에 사용하는 태그이다. 웹 페이지를 의미적으로 각각의 파트로 구분하기 위해 쓰는 태그이다. 이 태그를 사용하면 검색엔진이 긁어가지 않는다는 이야기가 있는데 루머다. HTML5 표준 문서에 보면 "요소의 내용을 배포(syndicate)해도 이치에 맞다면 section 요소 대신 article 요소를 사용하기를 권합니다."라는 부분이 있는데, 이 부분의 해석이 잘못 퍼진 것으로 추정된다. |
| aside | <aside></aside> | 본문의 주요 부분을 표시하고 남은 부분을 설명하는 태그이다. 특별한 일이 아니면 사이드바나 광고창 등 중요하지 않은 부분에 사용된다. |
| footer | <footer></footer> | 일반적으로 페이지나 해당 파트의 가장 아랫부분에 위치한다. 페이지 맨 아래에 쓸 때는 사이트의 라이선스(COPYRIGHT), 주소, 연락처 등을 넣는다. |
| hgroup | <hgroup></hgroup> | 제목과 관련된 부제목을 묶는 태그 |
| figure | <figure></figure> | 이미지, 다이어그램, 사진 등 독립적인 컨텐츠 정의시 사용하는 태그 |
| figcaption | <figcaption></figcaption> | <figure> 태그의 설명 태그 |
▩ 시맨틱 태그를 사용하면 좋은점
- SEO(Serch Engine Optimization) 최적화에 유리
태그마다 목적을 가지고 있기 때문에 검색엔진에 최적화 되어 있어 더욱 빨리 효율적인 정보 파악이 가능합니다.
- 웹 접근성에 효율적
시각장애인들을 위한 웹서핑 프로그램과 같은 환경에서 일반적인 브라우저보다 웹 접근성과 사용성에 향상
- 유지보수 용이
많은 div태그를 사용하는 것 보다 한눈에 들어오는 시맨틱태그를 이용함으로써 태그 이름만 보고도 어떤 영역인지 쉽게 파악하고 유지보수 할 수 있음.
728x90
'기술 > IT' 카테고리의 다른 글
| [CSS] overflow 사용법 (0) | 2022.09.12 |
|---|---|
| [CSS] width와 max-width 차이 (0) | 2022.09.12 |
| 웹서비스 만들기 "좋은이웃들 방문 기록 웹" 기획안 (0) | 2022.02.27 |
| [Html] div, p, span 태그 차이 (0) | 2022.02.02 |
| 업무 컴퓨터 잘 사용하기 꿀팁 (0) | 2021.11.18 |