제목(Heading) 태그
h(heading)태그는 제목을 나타낼 때 사용하면 h1부터 h6까지있다.
h1이 가장 중요한 제목을 의미하며 크기도 가장 크다.
검색엔진이 제목 태그를 중요한 의미로 받아들이기 때문에 제목 이외에는 사용하지 않는 것이 좋다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
글자 형태 태그
1. b 태그
bold 체를 지정한다. 의미론적(Semantic)중요성은 없다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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.strong 태그
b 태그와 동일하게 bold체를 지정한다.
의미론적 중요성의 의미를 갖는다. 웹표준을 준수하고자 한다면 strong 사용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This text is normal.</p>
<strong>This text is strong.</strong>
</body>
</html>
3. i 태그
Italic체를 지정한다. 의미론적 중요성은 없다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
4. em 태그
강조할 텍스트를 지정한다. i태그와 같이 Italic체로 표현되고 의미론적 중요성을 갖는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This text is normal.</p>
<em>This text is emphasized.</em>
</body>
</html>
5. small 태그
작은 텍스트를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>HTML <small>Small</small> Formatting</h2>
</body>
</html>
6. mark 태그
하이라이트 텍스트를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body>
</html>
7. del 태그
삭제된 텍스트를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
8. ins 태그
추가된 텍스트를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body>
</html>
9. sub / sup 태그
sub태그는 subscripted(아래쓰인)텍스트를, sup태그는 superscripted(위에쓰인)텍스트를 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is <sub>subscripted</sub> text.</p>
<p>This is <sup>superscripted</sup> text.</p>
</body>
</html>
본문 태그
1. p
단락(Paragraphs)을 지정한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>This is a heading.</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Ut enim ad minim veniam,</p>
<p> quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat</p>
</body>
</html>
2. br
br 태그는 개행을 지정한다. 빈요소로써 종료태그가 없다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is<br>a para<br>graph with line breaks</p></body>
</html>
3. pre
형식화된 텍스트를 지정한다. 태그 내부에 작성된 그대로 브라우저에 표시된다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<pre>
let hello = "Hello world!!";
console.log(hello);
</pre>
</html>
4. hr
수평줄을 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>HTML</h1>
<hr>
<h1>CSS</h1>
</html>
5. q
짧은 인용문을 지정한다. 큰따옴표로 q요소의 컨텐츠를 감싼다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>HTML is <q>Hyper Text Markup Language</q></p>
</html>
6. blockquote
긴 인용문을 지정한다. 브라우저는 blockquote 요소를 들여쓰기한다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Lorem ipsum dolor sit amet
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</blockquote>
</html>
