텍스트로 이루어진 정보는 수정이 편리한 장점이 있지만 텍스트의 양이 많을 수록 정보를 찾기 힘들다는 단점이 있다. 따라서, 크기나 색상, 스타일, 목록 등을 바꾸어 표시한다.
덩어리로 표시
* 제목 표시하기
<hn> 텍스트 </hn>
(h1이 가장 큰 제목이고 h6이 가장 작은 제목이다.)
* 단락 만들기
<p> 텍스트 </p>
* 줄 바꾸기
<br>
* 수평 줄 넣기
<hr>
* 인용문 넣기
<blockquote> 텍스트 </blockquote>
* 입력하는 그대로 화면에 표시
<pre> 텍스트 <pre>
한 줄로 표시
* 굵게 표시하기
<strong> 텍스트 </strong>
<b> 텍스트 </b>
(육안으로는 차이가 느껴지지 않으나 <strong>을 사용한 부분을 강조되었다고 화면 낭독기가 알려준다.)
* 이탤릭체로 표시하기
<i> 텍스트 </i>
<em> 텍스트 </em>
(강조하고 싶을 때는 <em>을 사용하고, 관용구는 <i>를 사용한다.
* 인용 내용 표시하기
<q> 텍스트 </q>
(<blockquote>와 차이점은 줄바꿈 없이 다른 내용과 함께 한줄로 표시되고, 인용 내용에 따옴표를 붙여 표시한다.)
* 형광펜 효과
<mark> 텍스트 </mark>
* 줄바꿈 없이 영역 묶기
<span> 내용 </span>
* 동아시아 글자 표시
<ruby> 내용 <rt> 주석 </rt> </ruby>
목록으로 표시
* 순서 없는 목록 만들기
<ul>
<li> 내용 </li>
<li> 내용 </li>
...
</ul>
*순서 있는 목록 만들기
<ol>
<li> 내용 </li>
<li> 내용 </li>
....
</ol>
* 설명 목록 만들기
<dl>
<dt> 제목 </dt>
<dd> 설명 </dd>
....
</dl>
표 만들기
* 기본적인 표 만들기
<table>
<tr>
<td> 내용 </td>
<td> 내용 </td>
....
</tr>
....
</table>
* 행 또는 열 합치기
<td colspan="합칠 셀의 개수"> 내용 </td>
<th colspan="합칠 셀의 개수"> 내용 </th>
<td rowspan="합칠 셀의 개수"> 내용 </td>
<th rowspan="합칠 셀의 개수"> 내용 </th>
* 표에 제목 붙이기
<caption> 표 제목 </caption>
<flgcaption> 표 제목 </flgcaption>
(<caption>은 중앙에 위치, <Flgcaption> 왼쪽에 위치)
* 표 구조 정의하기
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
</tbody>
<tfoot>
<tr> ... </tr>
</tfoot>
growing developer 🌱