-
[HTML] 시맨틱 마크업HTML 2022. 8. 19. 16:22
구조화
문서에는 구조가 있다.
웹페이지 역시 문서이다.
그러므로 웹페이지는 구조화가 잘 되어야 한다.
HTML5 이전까지 웹 페이지의 구조를 표현하는 태그가 없었기 때문에 <div> 태그를 남발하는 경향이 보였다.
그러한 코드 소스를 들여다 보면 문서의 구조 파악이 힘들어진다.
구조화를 해야 하는 이유
브라우저를 통해 보는 것 이상으로 웹 문서에 들어 있는 정보 탐색이 중요해지기 때문이다.
빅데이터와 함께 사물인터넷 시대에는 사물 속에 내장된 컴퓨터들이 스스로 찾든 검색 엔진을 이용하든 인터넷 상 웹 문서에서 의미 있는 정보를 찾는다.
그러므로 검색엔진이 좋아하는 웹사이트를 만들어야 웹 사이트의 가치가 올라간다. 검색엔진 최적화(SEO)
시맨틱 마크업 (Semantic Markup)
html5에서는 문서의 구조와 의미를 표현하는 여러 태그들을 추가하였다.
웹 문서를 구조화하여 의미 있는 내용 탐색이 용이한 웹을 시맨틱 웹이라 한다.
시맨틱 웹을 만들기 위해서는 시맨틱 태그들을 이용하여 시맨틱 마크업을 작성해야 한다.
시맨틱 태그
<header> : 페이지나 섹션의 머리말을 표현
<nav> : navigation의 줄임말로 하이퍼링크들을 모아 놓은 섹션
<section> : 문서의 장 혹은 절을 구성하는 역할
<article> : 본문과 연관되어 있지만 독립적인 콘텐츠를 담는 영역
<aside> : 웹 페이지 본문 흐름에서 약간 벗어난 컨텐츠들을 담는 영역
<footer> : 꼬리말 영역, 저자나 저작권 정보들을 주로 표시
시맨틱 블록 태그
<fiqure> : 그림을 블록화하는 태그
<details> : 상세 정보를 담는 태그
<summary> : <details>로 구성되는 블록의 제목을 표현
시맨틱 인라인 태그
<mark> : 중요한 텍스트임을 표시
<time> : 시간 정보임을 표시
<meter> : 주어진 범위나 %의 데이터 양 표시 (주어진 양)
<progress> : 작업의 진행 정도 표시 (점진적으로 변하는 양)
시맨틱 구조를 저해한다는 이유로 HMLT5에서 제거된 태그들
<big>, <center>, <dir>, <font>, <tt>, <u>, <xmp>, <acrinym>, <applet>, <basefont>, <frame>, <frameset>, <noframes>,<strike>
<명품 HTML5+CSS3+Javascript 웹 프로그래밍> 내용
반응형'HTML' 카테고리의 다른 글
캐노니컬 태그란? (0) 2023.08.07 [HTML] canvas 모바일에서 그리기 (0) 2023.04.11 [HTML] canvas 캔버스 도형 그리기 (사각형, 원) (0) 2023.03.25 [HTML] <dialog> 태그 (0) 2022.08.04 [HTML] form 태그와 웹접근성 (0) 2022.07.07