HTML5 시맨틱 웹을 위한 요소

div 요소

영역을 지정할 때 사용하는 요소이며, <Body> 태그 안에 기술하여 사용합니다.

형식

<div> ... </div>

예제

ul요소와 li요소

ul 요소는 목록 전체를 나타내고, li 요소는 목록에 대한 각 항목을 나타냅니다.

형식

<ul>
     <li  속성=값> 항목 1
     <li  속성=값> 항목 2
     <li  속성=값> 항목 3
</ul>

예제

h 요소

제목 등의 글자 속성을 지정할 때 사용하는 요소로 1~6까지 지정할 수 있으며, 숫자가 클수록 크기는 작아집니다.

형식

<h크기> ... </h크기>

section 요소

문서의 내용 부분을 나타내는 요소를 의미합니다.

하나의 section은 하나의 주제를 가지고 있으며 h1~ h6 과 같이 제목을 표현하는 요소들과 함께 사용합니다.

하나의 section 요소에는 하나의 h1~h6 요소만을 사용해야 합니다.

section 요소 중첩 사용

만약 하나의 주제 안에 또 다른 세부 주제가 있다면 section 요소를 중첩하여 사용합니다.

hgroup 요소

제목과 부제목을 묶어 줍니다.

article 요소

개별 콘텐츠를 담는 요소를 의미합니다.

article 요소 안의 내용은 포함되어 있는 문서와 분리하여 개별적으로 사용이 가능하다는 것을 의미합니다.

header 요소

사이트의 로고나 메뉴 등을 담기 위한 머리말 부분을 의미합니다.

footer 요소

제작자의 정보나 저작권 정보를 담기 위한 꼬리말 부분을 의미합니다.

nav 요소

주로 전체 웹 페이지에 적용되는 상단의 메뉴를 나타냅니다.

aside 요소

주요 콘텐츠 이외에 남아있는 콘텐츠 등을 나타냅니다.

표현을 위한 요소

mark 요소

특정 텍스트를 강조하고자 할 때 사용하는 요소입니다. 시각적, 의미적으로 강조하고자 할 때 사용합니다.

형식

<mark> 텍스트 </mark>

예제

HTML5 의 특징 가운데 하나는 <mark> 시맨틱 웹 </mark> 입니다.

time 요소

시간 표현에 의미를 부여하고자 할 때 사용하는 요소입니다.

형식

예제

우리 회사의 퇴근 시간은 <time>18:00</time>시 입니다.
우리 회사의 창립기념일은 <time datetime="2022-05-08">다음주 일요일</time>입니다.

meter 요소

일정 범위 안의 값이나 분포 비율 등을 나타낼 때 사용하는 요소입니다.

속성	설명
value	실제로 측정한 데이터를 지정합니다.
min	meter 요소가 인식하는 최소값을 지정합니다.
max	meter 요소가 인식하는 최대값을 지정합니다.
low	허용되는 범위의 최소값을 지정합니다.
high	허용되는 범위의 최대값을 지정합니다.
optimum	기대치 값을 지정합니다.
title	툴팁을 입력합니다.

형식

<meter 속성="값"...> 텍스트 </meter>

예제

progress 요소

어떠한 작업에 대하여 현재 진행 중인 상태를 나타낼 때 사용하는 요소입니다.

형식

<progress min="최소값" max="최대값" value="현재 상태 값"> 텍스트 </progress>
<progress value="현재 상태 값" max="최대값" > 텍스트 </progress>

예제

저작자표시 비영리 변경금지

'HTML5_CSS_JAVASCRIPT' 카테고리의 다른 글

CSS3 배경 스타일 (0)	2022.05.12
CSS 글꼴과 문자 스타일 지정 (0)	2022.05.09
CSS 선택자 지정 방법 (0)	2022.05.08
CSS 기본 구조와 CSS 문서 적용 방법 (0)	2022.05.07
웹페이지 구성 (0)	2022.05.05

두리몽실 컴실 복실

HTML5 시맨틱 웹을 위한 요소