1. 제목 (Headings) 태그
- 제목을 나타낼 때 사용
- h1에서 h6까지의 태그가 존재
<!DOCTYPE html>
<html>
<body>
<h1>heading 1</h1>
<h2>heading 1</h2>
<h3>heading 1</h3>
<h4>heading 1</h4>
<h5>heading 1</h5>
<h6>heading 1</h6>
</body>
</html>2. 글자 형태 (Text Formatting) 태그
2.1 b
- bold체를 지정함
- 의미론적 (semantic) 중요성의 의미 없음
<!DOCTYPE html>
<html>
<body>
<p>This text is normal</p>
<b>This text is bold</b>
<p style="font-weight: bold;">This text is bold</p>
</body>
</html>2.2 strong
- b tag와 동일하게 bold체를 지정함
- 의미론적 (semantic) 중요성의 의미를 가짐
<!DOCTYPE html>
<html>
<body>
<p>This text is normal</p>
<strong>This text is bold</strong>
</body>
</html>2.3 i
- Italic체를 지정함
- 의미론적 (semantic) 중요성의 의미 없음
<!DOCTYPE html>
<html>
<body>
<p>This text is normal</p>
<i>This text is italic</i>
<p style="font-weight: italic;">This text is italic</p>
</body>
</html>2.4 em
- emphasized (강조, 중요한) text를 지정함
- i tag와 동일하게 Italic체로 표현됨
- 의미론적 (semantic) 중요성의 의미를 가짐
<!DOCTYPE html>
<html>
<body>
<p>This text is normal</p>
<em>This text is emphasized</em>
</body>
</html> 2.5 small
- small text를 지정함
<!DOCTYPE html>
<html>
<body>
<h2>HTML<small>Small</small>Formatting</h2>
</body>
</html> 2.6 mark
- highlighted text를 지정함
<!DOCTYPE html>
<html>
<body>
<h2>HTML<mark>Marked</mark>Formatting</h2>
</body>
</html>2.7 del
- deleted (removed) text를 지정함
<!DOCTYPE html>
<html>
<body>
<p>The del represents deleted text</p>
<p>My favorite color is <del>blue</del> red</p>
</body>
</html> 2.8 ins
- inserted (added) text를 지정함
<!DOCTYPE html>
<html>
<body>
<p>The ins represents inserted text</p>
<p>My favorite color is <ins>blue and</ins> red</p>
</body>
</html>2.9 sub/sup
- sub tag : subscripted (아래에 쓰인) text를 지정함
- sup tag : superscripted (위에 쓰인) text를 지정함
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text</p>
<p>This is <sup>superscripted</sup> text</p>
</body>
</html>3. 본문 태그
3.1 p
- 단락 (paragraphs)을 지정함
<!DOCTYPE html>
<html>
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
</body>
</html>3.2 br
- (강제) 줄바꿈 (line break)을 지정함
- 빈 요소 (empty element)로 종료태그가 없음
<!DOCTYPE html>
<html>
<body>
<p>This is <br> the first <br> paragraph</p>
</body>
</html>-
HTML에서는 1개 이상의 연속된 공백 (space) 과 1개 이상의 연속된 줄바꿈 (enter) 을 1개의 공백으로 표시함
-
연속된 공백을 삽입하는 방법
<!DOCTYPE html>
<html>
<body>
<p>This is   the first     paragraph</p>
</body>
</html>3.3 pre
- 형식화된 (preformatted) text를 지정함
- pre 태그 내의 content는 작성한 그대로 브라우저에 표시됨
3.4 hr
- 수평줄을 삽입함
<!DOCTYPE html>
<html>
<body>
<h1>HTML</h1>
<p>HTML is a language for describing web pages</p>
<hr>
<h1>CSS</h1>
<p>CSS defines how to display HTML elements</p>
</body>
</html>3.5 q
- 짧은 인용문 (quotation)을 지정함
- 브라우저에서 큰 따옴표로 q 요소를 감쌈
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element</p>
<p>English proverb :<q>No pains, no gains</q></p>
</body>
</html>3.6 blockquote
- 긴 인용문 블록을 지정함
- 브라우저는 blockquote 요소를 들여쓰기함
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element</p>
<blockquote>
<p>English proverb :No pains, no gains</p>
</blockquote>
</body>
</html>