header

홈페이지의 머리글을 담는 영역이다. 웹사이트에 접속하면 제일먼저 볼 수 있는 영역이다. 주요 하위요소로는 네이게이션 nav태그가 있다.

<header>
	<nav>
		<a href="link1">웹사이트1</a> |
		<a href="link2">웹사이트2</a> |
		<a href="link3">웹사이트3</a>
	</nav>
</header>

hgroup

문서 구획을 다단계로 제목을 나타낸다. 여러개의 h1~h6 제목태그를 묶을 때 사용한다. 주요 하위요소는 문자열의 크기를 조정하는 h1~h6제목태그가 있다.

<hgroup>
	<h1>main title</h1>
	<h2>sub title</h2>
</hgroup>

nav

다른 페이지나 현재 페이지를 연결하는 네비게이션 링크들을 표현할 때 사용한다. 주요 하위 요소는 다른 사이트로 연결하는 a태그가 있다.

<nav>
	<a href="link1">웹사이트1</a> |
	<a href="link2">웹사이트2</a> |
	<a href="link3">웹사이트3</a>
</nav>

section

html에 포함된 독립적인 영역을 표현 할 때 사용한다. 주요 하위 요소는 문자열의 크기를 조정하는 h1~h6제목태그가 있다.

<section>
    <h1>영역태그</h1>
    <p>html에 포함된 독립적인 영역을 표현 할 때 사용한다.</p>
</section>

article

이 요소가 사용되는 문서나 페이지에 독립적인 영역을 구성할 때 사용한다. section태그는 단순히 영역을 나누는데 사용하지만 article태그로 나눈 역영은 다른 페이지나 영역에 가져와 쓸 수 있다. 주요 하위 요소는 문자열의 크기를 조정하는 h1~h6제목태그가 있다.

<article>
	<h3>구글 날씨</h3>
	<ul>
	   <li>오늘 날씨정보</li>
	   <li>내일 날씨정보</li>
	   <li>모래 날씨정보</li>
	</ul>
 </article>

aside

현재 내용과 관련된 추가적인 내용을 정의 할 때 사용하는 태그. 주로 article태그안에서 사용한다.

<article>
	<h3>구글 날씨</h3>
	<ul>
	   <li>오늘 날씨정보</li>
	   <li>내일 날씨정보</li>
	   <li>모래 날씨정보</li>
	</ul>
	<aside>
	   <p>오늘의 미세먼지 정보.</p>
	</aside>
 </article>

footer

웹페이지의 하단 또는 각 영역의 꼬리말을 정의 할 때 사용하는 태그이다.

<footer>
    <p>Copyright © 2022 .co.,Ltd. All rights reserved.</p>
</footer>

mark

지정한 문자열구간을 하이라이트 텍스트처리 할 때 사용하는 태그이다.

<p>피라미드의 경사각은 모래 한 줌을
땅위에 살살 놓았을 때 쌓이는 모래의 경사각 
<mark>51도</mark>이다.</p>

time

웹페이지에 특별한 표현이 생기지는 않지만 기계가 읽을 수 있도록 시간을 정의하여 검색이나 일정관련 기능을 구현 할 수 있게하는 태그이다.주요속성은 시간을 정의하는 datetime속성이 있다.

<p>625전쟁은 <time datetime="1950-06-25T04:20:00">
6월 25일 새벽 4시 20분경</time> 일어난 남침이다.</p>

meter

게이지bar로 수치를 표현 할 때 사용하는 태그이다. 주요 속성은 최솟값을 나타내는 min, 최대값을 나타내는 max, 현재 측정된 수치를 나타내는 value이다.

<p>도서관 잔여석 : 
<meter min="0" max="500" value="200">200석</meter></p>

progress

진행률을 시각적으로 표현 할 때 사용하는 태그이다. meter는 범위를 수치화 할 때 사용하지만 이 태그는 진행도를 표현 할 때 사용한다. 주요 속성은 총량을 나타내는 max, 현재 진행된 값 value이다.

<p>프로젝트 진행률 : 
<progress max=100 value="90">90%</progress></p>

ruby

일본어 한자의 발음표시나 한국한자의 음등 특정 문자열의 상단에 작은 텍스트로 표기 할 수 있게해주는 태그이다. 주요 요소는 상단에 작은 글자를 표기하는 rt태그이다.

<p>post와 get의 차이는 
<ruby>冪等性<rt>멱등성</rt></ruby>의 유무입니다.</p>

wbr

사용중인 브라우저의 개행 규칙을 무시하고 사용자가 텍스트의 개행위치를 임의로 지정 할 수 있게하는 태그이다.

<p>abcdefghijklmnop1<wbr>abcdefghijklmnop2<wbr>
abcdefghijklmnop3<wbr>abcdefghijklmnop4<wbr>
abcdefghijklmnop5<wbr>abcdefghijklmnop6<wbr>
abcdefghijklmnop7</p>

details

브라우저에서 세부사항을 마우스 클릭으로 열고 닫기를 할 수 있는 태그이다. 주요 속성은 세부사항을 보여주기 상태로 나타내는 open이다. 주요 요소는 마우스 클릭하는 삼각형 마크옆에 요약된 텍스트로 표기 할 수 있는 summary태그이다.

<details>
    <summary>세부사항 보기 클릭</summary>
    <ul>
        <li>세부사항 1</li>
        <li>세부사항 2</li>
    </ul>
</details>

datalist

input태그의 데이터입력란 오른쪽에 입력을 추천해주는 리스트를 정의 할 수 있다. 예를 들어서 이메일 ‘@’마크 뒤의 도메인을 추천 할 때 사용하는 태그이다. 주요 속성은 id이며, input태그의 list속성에 이 태그의 id를 대입하면 연결된다. 주요 요소로는 리스트의 데이터를 정의하는 option태그가 있다.

<form action="email.jsp" method="get">
    email : <input type="text" name="email_pre"> @ 
    <input type="text" name="email_domain" list="email_list">
    <datalist id="email_list">
        <option value="naver.com"></option>
        <option value="daum.net"></option>
        <option value="168.com"></option>
        <option value="gmail.com"></option>
    </datalist>
    <button type="submit">전송</button>
</form>

output

form태그 안에서 다른 태그의 value에 대입된 값을 form태그의 oninput속성에 정의된 산술 방식에 따라서 추출된 값을 표기하는 태그이다. 주요 속성으로 for속성이 있으며, 출력물과 연관된 value를 가지는 태그의 id를 공백을 기준으로 대입하여 연결한다.

<form action="cal.jsp" oninput="result.value=(parseInt(n1.value)+parseInt(n2.value))/2">
num1 : <input type="number" id="n1" name="n1" value="0"><br>
num2 : <input type="number" id="n2" name="n2" value="83"><br>
avg : <output name="result" for="n1 n2"></output><br>
<input type="submit">
</form>