K_blueprint
HTML5의 문서 구조화 본문
목 차
1. 시맨틱 웹
2. 시맨틱 태그의 종류(feat. 문서 구조화 예시)
3. 시맨틱 블록 태그
1. 시맨틱 웹
- 현대 사회는 정보 탐색이 중요하기 때문에 읽는 사람이 글을 읽기 용이해야 하고, 그만큼 구조화를 통해 각 구조들을 이용한 효율적인 정보 전달이 가능하도록 하는 것이 중요하다.
- 검색 엔진이 좋아하는 웹 사이트가 가치가 올라가기 마련인데, 구글 검색 엔진의 경우 웹 페이지에서 `'<header>', '<section>', '<article>'과 같은 문서의 구조와 의미를 표현하는 HTML태그를 탐색하고 이를 기반으로 다양한 주제에 따른 검색 결과를 제공하고 있다.
즉, 웹 문서를 구조화하여 효율적으로 나에게 가치 있는 내용을 탐색할 수 있도록 해주는 웹을
"시맨틱 웹(semantic web)"이라고 하며 header, section, article, main, summary, mark 등의 태그들을
"시맨틱 태그"라고 한다.
이제 각 태그에 대한 간략한 설명을 통해 구조마다 적합한 내용이 무엇이 있을지 알아보자
2. 시맨틱 태그의 종류
<header> : 페이지의 '머리말'을 표현하는 태그, 보통 '페이지의 제목' 혹은, '페이지 소개글'등이 들어가게 된다.
<nav> : '하이퍼링크'들을 모아놓은 특별한 구역을 만들기 위한 태그, 보통 '페이지 내의 목차'를 만들기 위해 사용된다.
<section> : '문서의 장'이라고도 할 수 있으며 페이지의 '전반적인 내용'이 들어가게 된다.
<article> : 본문과 연관은 되어있지만, 독립적인 내용을 담는 영역이며 '보조기사', '블로그 포스트'등이 들어간다.
<aside> : 해당 태그는 문서의 주요 부분에서 벗어난 내용을 짤막하게 담을 수 있는 영역이다.
<footer> : 꼬리말을 표시하는 태그이며, 저자 혹은 저작권 정보, 주소 등을 기입하게 된다.
이제 문서의 기본 구조에 대해서 살펴보았으니, '시맨틱 블록 태그'에 대해서 알아보자
3. 시맨틱 블록 태그
● <figure>
- 본문에 삽입된 그림을 블록화 하는 시맨틱 태그
- 해당 태그를 사용하면 이미지, 동영상, 소스 코드 등 콘텐츠를 블록화 할 수 있다.
● <details>
- 해당 태그는 '상세 정보'를 담는 시맨틱 블록 태그이다.
- 사용하게 되면 문장 앞에 핸들(문장 앞의 특수문자 등)이 나타나며 해당 태그가 사용된 문장(정보)을 클릭을 통해
감추거나 노출되도록 할 수 있다.
● <summary>
- 해당 태그는 바로 위의 '<details>'로 구성되는 블록의 제목을 표현한다.
이 외에도 텍스트의 일부를 마크업 할 수 있는 재밌는 시맨틱 태그가 4가지 정도 있다.
※ 시맨틱 인라인 태그
<mark> : 중요한 텍스트라는 것을 표현
<time> : 시간 정보라는 것을 표현
<meter> : 특정 범위 혹은, % 데이터의 양을 표현
<progress> : 작업의 진행도를 표현
시맨틱 인라인 태그를 활용해서 코드를 만들어 보고
실제로 웹 브라우저에서 어떻게 출력이 되는지 확인해 보자
(예시코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>시맨틱 인라인 태그 알아보기</title>
</head>
<body>
<h3>시맨틱 인라인 태그 알아보기</h3>
<hr>
<p>
이 문장에는 <mark>mark태그가</mark> 사용됩니다.<br>
지금 시각은 <time>10:15</time>입니다.<br>
현재의 진행도는 <meter value="0.2">20%</meter>입니다.<br>
포스팅 글을 올리는 중입니다...(30%) <progress value="3" max = "10"></progress>
<br>
</p>
</body>
</html>
(브라우저 화면)
※ 해당 게시글은 "HTML5+CSS3+Javascript 웹 프로그래밍"도서를 참고하여 작성되었습니다. ※
'HTML & CSS & Java script' 카테고리의 다른 글
| 버튼, 체크박스, 콤보박스 만들기 (3) | 2024.11.10 |
|---|---|
| HTML5로 웹 폼 만들기 (7) | 2024.11.09 |
| 미디어(오디오, 비디오) 삽입하기 (4) | 2024.11.07 |
| HTML5로 '파일 다운로드 링크', '인라인 프레임' 만들기 (0) | 2024.06.04 |
| HTML5로 고급 문서 만들기 (0) | 2024.02.27 |
