[HTML] 시멘틱 HTML (Semantic HTML)

DevGreeny 2023. 2. 15. 22:07

Semantic HTML

시맨틱 HTML(Semantic HTML)

- Semantic HTML은 웹 페이지의 콘텐츠를 의미론적으로 정의하는 HTML 마크업 방식이야.
- 웹 페이지의 구조를 이해하기 쉽고 검색 엔진 최적화(SEO)에도 도움이 되는 장점이 있어.

- 예를 들어,
- 웹 페이지에서 특정 부분이 제목인지, 메인 콘텐츠인지, 사이드바인지 등을
명시적으로 정의하지 않고 div 태그만을 사용하는 경우, 이걸 이해하려는 사람이나
검색 엔진은 페이지의 내용을 이해하는 데 불편함을 겪을 수 있어.

시멘틱 HTML의 사용시 장점

Semantic HTML을 사용하여 적절한 태그를 사용하면,
- 페이지 내용의 구조를 명확히 할 수 있어.
- 이해하기 쉽고 검색 엔진이 페이지를 쉽게 인덱싱할 수 있어.
예를 들어, <header> 태그를 사용해서 페이지 상단의 제목 부분을 정의하고,
<article> 태그를 사용해서 주요 콘텐츠를 정의하면, 페이지 내용의 구조를 명확히 할 수 있어.

- 웹 페이지의 사용자 경험과 검색 엔진 최적화가 개선되서, 웹 페이지의 가치와 유용성을 높일 수 있어.

시맨틱 태그(Semantic Tag)

- 시맨틱 태그(Semantic Tag)는 웹 페이지의 콘텐츠를 의미론적으로 정의하는 HTML 태그야.
- 웹 페이지의 구조와 의미를 명확하게 표현하여 검색 엔진 최적화(SEO) 및 웹 접근성에 도움돼.

몇 가지 대표적인 시맨틱 태그가 있어.

< 대표적인 시맨틱 태그 >

- header: 웹 페이지 상단에 위치하는 제목이나 로고, 검색창, 메뉴 등을 담는 영역을 정의해.

- nav: 웹 페이지의 네비게이션 메뉴를 정의해.

- main: 주요 콘텐츠를 담는 영역을 정의해. 웹 페이지에서는 하나의 main태그만 사용해.

- article: 독립적으로 구성 가능한 콘텐츠 블록을 정의해.
ex) 블로그, 뉴스 기사, 포럼 게시물 등의 글 본문을 article 태그로 묶어서 표현할 수 있어.

- section: 웹 페이지에서 영역을 나누는 태그야. 관련 있는 콘텐츠를 그룹화해서 의미를 부여해.

- aside: 주 콘텐츠와는 관련성이 적은 사이드바 영역이야.
ex) 광고, 최근 게시물 목록 등을 담을 수 있어.

이 외에도, time, figure, figcaption 등의 다양한 시맨틱 태그가 있어.
이런 시맨틱 태그를 적절히 사용해서 웹 페이지의 구조와 의미를 명확하게 표현하면,
검색 엔진이 페이지를 더 잘 인식하고, 웹 접근성이 개선되어 더 나은 사용자 경험을 제공할 수 있어.

저작자표시 (새창열림)