[HTML] 시맨틱 마크업

HTML

hid1 2022. 8. 19. 16:22

구조화

문서에는 구조가 있다.

웹페이지 역시 문서이다.

그러므로 웹페이지는 구조화가 잘 되어야 한다.

HTML5 이전까지 웹 페이지의 구조를 표현하는 태그가 없었기 때문에 <div> 태그를 남발하는 경향이 보였다.

그러한 코드 소스를 들여다 보면 문서의 구조 파악이 힘들어진다.

브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요해지기 때문이다.

빅데이터와 함께 사물인터넷 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색 엔진을 이용하든 인터넷 상 웹 문서에서 의미 있는 정보를 찾는다.

그러므로 검색엔진이 좋아하는 웹사이트를 만들어야 웹 사이트의 가치가 올라간다. 검색엔진 최적화(SEO)

html5에서는 문서의 구조와 의미를 표현하는 여러 태그들을 추가하였다.

웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹을 시맨틱 웹이라 한다.

시맨틱 웹을 만들기 위해서는 시맨틱 태그들을 이용하여 시맨틱 마크업을 작성해야 한다.

<header> : 페이지나 섹션의 머리말을 표현

<nav> : navigation의 줄임말로 하이퍼링크들을 모아 놓은 섹션

<section> : 문서의 장 혹은 절을 구성하는 역할

<article> : 본문과 연관되어 있지만 독립적인 콘텐츠를 담는 영역

<aside> : 웹 페이지 본문 흐름에서 약간 벗어난 컨텐츠들을 담는 영역

<footer> : 꼬리말 영역, 저자나 저작권 정보들을 주로 표시

시맨틱 블록 태그

<fiqure> : 그림을 블록화하는 태그

<details> : 상세 정보를 담는 태그

<summary> : <details>로 구성되는 블록의 제목을 표현

시맨틱 인라인 태그

<mark> : 중요한 텍스트임을 표시

<time> : 시간 정보임을 표시

<meter> : 주어진 범위나 %의 데이터 양 표시 (주어진 양)

<progress> : 작업의 진행 정도 표시 (점진적으로 변하는 양)

<명품 HTML5+CSS3+Javascript 웹 프로그래밍> 내용