글자 크기 태그 : <h1>~<h6>
<!DOCTYPE html>
<html>
<head>
<title>글자 크기</title>
</head>
<body>
<h1>태그</h1>
<h2>태그</h2>
<h3>태그</h3>
<h4>태그</h4>
<h5>태그</h5>
<h6>태그</h6>
</body>
</html>
글자 크기 태그는 <h1>부터 <h6>까지 있으며, <h1>이 가장 큰 글자이고 <h6>이 가장 작은 글자이다.
만약 <h7>을 사용하면 <h7>은 존재하지 않는 태그이므로 기본 글자 크기로 출력이 된다.
구분선 태그 : <hr>
<!DOCTYPE html>
<html>
<head>
<title>구분선</title>
</head>
<body>
<h2>구분선</h2>
<hr>
<h4>위는 구분선</h4>
</body>
</html>
<hr>로 구분선을 만들 수 있다. <hr><hr>로 작성하면 구분선이 두 줄 생긴다.
문단 나누는 태그 <p>, <pre>
<!DOCTYPE html>
<html>
<head>
<title>문단 나누기</title>
</head>
<body>
<p>
이것은 문단 영역을 나누는 p 태그이다.<br>
줄바꿈을 할 땐 줄바꿈 태그를 사용해야 한다.<br>
하나의 공백만 표시할 수 있어서 별도의 기호 문구를 작성해야 한다.
</p>
<pre>
이것은 문단 영역을 나누는 pre 태그이다.
줄바꿈 태그를 사용하지 않아도 줄바꿈이 된다.
여러 개의 공백을 표시할 수 있다.
</pre>
</body>
</html>
<p>와 <pre>는 문단을 나누는 태그이다. 이때 각각 특징이 다르다.
<p>는 줄바꿈을 할 때 <br>이라는 줄바꿈 태그를 사용해야 한다. 그리고 공백은 하나만 표시할 수 있어서 여러 개의 공백을 사용하려면 별도의 기호 문구를 작성해야 한다.
<pre>는 <br>을 사용하지 않아도 알아서 줄바꿈 처리가 되고, 공백도 공백을 입력한 수만큼 그대로 출력이 된다.
이외의 글자 관련 태그
① 글자를 굵게 표시하는 태그 <b>, <strong>
ⓐ <b>: 굵은 글자로 표시한다.
ⓑ <strong>: <b>와 같이 굵은 글자로 표시를 한다. 이때 <strong>은 스크린 리더에서 좀더 강조하여
말하고자할 때 사용한다.
② 글자를 기울여 표시하는 태그 <i>, <em>
ⓐ <i>: 글자를 기울여서 표시한다.
ⓑ <em>: <i>와 같이 글자를 기울여 표시한다. 이때 <em>은 스크린 리더에서 강조하여 말하고자할 때
사용한다.
③ 형광펜 표시하는 태그 <mark>
④ 밑줄 표시하는 태그 <u>
⑤ 취소선을 표시하는 태그 <s>, <del>
- <strike>도 취소선을 표시하는 태그이긴 하지만, html5에서 더이상 지원하지 않으므로 권장하지 않는다.
⑥ 글자를 작게/크게 표시하는 태그 <small>, <big>
- <small>: 글자를 작게 표시한다.
- <big>: 글자를 크게 표시한다. <big>은 html5에서 더이상 지원하지 않으므로 CSS로 변경하는 것을 권장한다.
⑦ 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 쓰는 태그 <addr>
- 단어에 커서를 갖다대면 속성값이 보인다.
⑧ 기본 글자에 아래첨자/윗첨자를 표시하는 태그 <sub>, <sup>
ⓐ <sub>: 기본 글자에 아래첨자를 표시한다.
ⓑ <sup>: 기본 글자에 윗첨자를 표시한다.