글자 콘텐츠를 구조에 맞게 나눈다고 할 때, 가장 먼저 생각나는 게 바로 제목과 본문의 구분이죠? 여기서부터 시작해봅시다~

제목

<h1>부터 <h6>까지 제목을 분류할 수 있습니다.

단락

<p>태그로 단락을 나눕니다.

목록

순서가 있는 목록 <ol>
순서가 없는 목록 <ul>
<li>태그를 통해 항목을 나열합니다.

서술목록

아이템과 설명이나, 질문과 답변 등 짝을 이루는 목록에 사용합니다.

<dl>
  <dt>contents</dt>
  <dd>contents</dd>
</dl>

그냥 강조와 중요함을 강조

그냥 강조 <em> - 이탤릭 스타일링
중요함을 강조 <strong> - 굵은 글씨 스타일링
의미없는 스타일 태그. 비권장. <i>, <b>, <u>

인용

블록레벨 인용 <blockquote>
인라인레벨 인용 <q>
cite 속성으로 출처를 밝혀야 합니다.
<cite> 태그는 좀 쓸모가 없습니다. 출처를 연결할 속성도 없고.. 어떤 표시도 없습니다.

축약어

<abbr> title 속성으로 풀어쓴 용어를 써주면 그 축약어에 마우스를 호버할 때 title 내용이 보입니다.

연락처 정보

<address> 연락 가능한 정보들을 담고 있습니다.

윗첨자, 아래첨자

윗첨자 <sup>
아랫첨자 <sub>

컴퓨터 용어

<code>: 컴퓨터 코드 조각을 의미합니다.
<pre>: 공백을 인정하는 영역임을 의미합니다.
<var>: 변수 이름임을 나타냅니다.
<kbd>: 컴퓨터 키보드 키임을 나타냅니다.
<samp>: 프로그래밍에 의한 결과값임을 의미합니다.

시간과 날짜

기계가 시간을 의미함을 알아챕니다.

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset-->
<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time>
<!-- Calling out a specific week number-->
<time datetime="2016-W04">The fourth week of 2016</time>

하이라이트

<mark> 관련 참조 목적의 하이라이트된 글자 요소

취소

<s> 더 이상 관련이 없거나 더 이상 정확하지 않은 요소

작은 글씨

<small> 저작권, 법적 텍스트, 주석 및 작은 글씨 요소

잘리는 분기점

<wbr> 부모 엘리먼트의 공간이 부족해 자동 줄바꿈이 될 때, 이 단어를 기준으로 줄바꿈이 되도록 할 수 있습니다.

테스트 예제는 아래 버튼을 누르면 확인 가능합니다.