제목 (Headings) 태그
Heading 태그는 제목을 나타낼 때 사용하며 h1에서 h6까지의 태그가 있음
h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 큼
시맨틱 웹의 의미를 살려서 제목 이외에는 사용하지 않는 것이 좋음
검색엔진은 제목 태그를 중요한 의미로 받아들일 가능성이 큼
<!DOCTYPE html>
<html>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
글자 형태 (Text Formatting) 태그
bold
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>
strong
b tag와 동일하게 bold체를 지정
하지만 의미론적(Semantic) 중요성의 의미를 갖음
표현되는 외양은 b tag와 동일
웹표준을 준수하고자 한다면 strong를 사용하는 것이 바람직
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<strong>This text is strong.</strong>
</body>
</html>
Italic
Italic체를 지정
의미론적(Semantic) 중요성의 의미는 없음
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<i>This text is italic.</i>
<p style="font-style: italic;">This text is italic.</i>
</body>
</html>
emphasized
emphasized(강조, 중요한) text를 지정
Italic체로 표현
의미론적(Semantic) 중요성의 의미를 갖음
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<em>This text is emphasized.</em>
</body>
</html>
small
small text를 지정
<!DOCTYPE html>
<html>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
mark
highlighted text를 지정
<!DOCTYPE html>
<html>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
del
deleted (removed) text를 지정
<!DOCTYPE html>
<html>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
ins
inserted (added) text를 지정
<!DOCTYPE html>
<html>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
sub / sup
sub 태그는 subscripted(아래에 쓰인) text를 sup 태그는 superscripted(위에 쓰인) text를 지정
<!DOCTYPE html>
<html>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
본문 태그
p
단락 (Paragraphs)을 지정
<!DOCTYPE html>
<html>
<body>
<h1>This is a heading.</h1>
<p>Paragraphs 1</p>
<p>Paragraphs 2</p>
</body>
</html>
br
br tag는 (강제)개행 (line break)을 지정
br tag는 빈 요소(empty element)로 종료태그가 없음
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
HTML에서는 1개 이상의 연속된 공백(space)을 삽입하여도 1개의 공백으로 표시
1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시
 
연속적 공백을 삽입하는 방법
<!DOCTYPE html>
<html>
<body>
<p>This is a para graph</p>
</body>
</html>
pre
형식화된(preformatted) text를 지정
pre 태그 내의 content는 작성된 그대로 브라우저에 표시
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<pre>
var myArray = [];
console.log(myArray.length); // 0
myArray[1000] = true; // [ , , ... , , true ]
console.log(myArray.length); // 1001
console.log(myArray[0]); // undefined
</pre>
</body>
</html>
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>
q ( " " )
짧은 인용문(quotation)을 지정
브라우저는 인용부호(큰따옴표/quotation marks)로 q 요소를 감쌈
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
blockquote
긴 인용문 블록을 지정
브라우저는 blockquote 요소를 들여쓰기
css를 이용하여 다양한 style을 적용할 수 있음
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
</body>
</html>
'HTML' 카테고리의 다른 글
목록(List)와 표(Table) 형식 표현을 위한 태그 (0) | 2023.01.27 |
---|---|
Hyperlink (0) | 2023.01.27 |
웹페이지의 구성하는 기본 태그 (1) | 2023.01.26 |
HTML5 기본 문법 (0) | 2023.01.25 |
HTML5 시맨틱 태그 (0) | 2023.01.19 |