[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그)

Client/HTML

[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그)

meeeeejin 2021. 4. 27. 11:32

제목 태그

<h1>제목</h1>
제목을 나타내는 태그
중요도에 따라 h1~h6으로 나눠서 사용
h1이 제일 중요한 제목, h6가 제일 덜 중요한 제목

본문 태그

<p>본문 내용</p>
본문과 관련된 태그

<p>	단락(paragraph)를 나누기 위한 태그
<br>	break, 줄바꿈을 할 때 사용하는 태그 컨텐츠가 없기 때문에 종료 태그가 없음
<pre>	preformatted(형식화된), 태그 내에 작성한 내용을 그대로 브라우저가 인식하도록 하는 태그

<p>의 경우 내용에 줄 바꿈을 여러 번해도 브라우저는 공백 한 칸으로 인식하지만 <pre>는 내용에 작성한 것을 그대로 인식함(글 아래에 예시에서 확인)

글자와 관련된 태그

<strong>	중요한 텍스트에 사용 기본 모양은 볼드체(굵은 글씨)
<em>	emphasized(강조된), 강조하는 텍스트에 사용 기본 모양은 이탤릭체(기울임꼴)
<b>	<strong>과 비슷하게 텍스트를 굵은 글씨로 바꾸지만 중요하다는 의미를 부여하진 않음
<sub>	subscripted(아래에 기입한), 텍스트를 다른 텍스트들 보다 아래로 내림
<sup>	superscripted(위에 기입한), 텍스트를 다른 텍스트들 보다 위로 내림
<ins>	inserted(끼워 넣은), 텍스트에 아래쪽에 라인을 추가하여 추가된 텍스트 표현
<del>	deleted(삭제된), 텍스트 한가운데 라인을 추가하여 삭제된 텍스트 표현

태그 사용 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>텍스트와 관련된 태그</title>
</head>
<body>
    <!--Heading-->
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
    <h4>heading 4</h4>
    <h5>heading 5</h5>
    <h6>heading 6</h6>

    <!--Contents-->
    <p>Lorem ipsum dolor sit amet,
        sed do eiusmod tempor dolore magna aliqua.</p>
    <p>Lorem ipsum dolor sit amet, <br>
        sed do eiusmod tempor dolore magna aliqua.</p>
    <pre>Lorem ipsum dolor sit amet,
        sed do eiusmod tempor dolore magna aliqua.</pre>

    <p><strong>strong</strong> <b>bold</b> <em>emphasized</em></p>
    <p>N<sup>2</sup></p>
    <p>log<sub>2</sub>N</p>
    <p><ins>inserted</ins> <del>deleted</del></p>
</body>
</html>

참고자료: tcpschool.com/html-tags/intro

728x90

저작자표시 비영리 동일조건

'Client > HTML' 카테고리의 다른 글

[HTML] HTML 이미지, 동영상(유튜브), 음악 넣는 법 (1)	2021.04.28
[HTML] 링크 태그 <a> 사용법, href, target 속성 (0)	2021.04.28
[HTML] 시맨틱 태그(Semantic Tag), HTML 레이아웃 (0)	2021.04.27
[HTML] HTML이란? HTML 개념 및 요소와 구조 (0)	2021.04.27
[HTML] Form(폼) 태그와 Input 태그 사용법 (0)	2020.06.08

현재글[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그)

250x250

개발자의 글쓰기, 백준, c++, spring, 모두 0으로 만들기, 오늘 또 일을 미루고 말았다, CSS, html, AWS, display flex, Java, 2018 카카오 코딩테스트, BOJ, Python, 파이썬, EC2, docker, 책 리뷰, css flexbox, 프로그래머스,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

👾

[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그)

목차

제목 태그

본문 태그

글자와 관련된 태그

태그 사용 예시

'Client > HTML' 카테고리의 다른 글

'Client/HTML'의 다른글

티스토리툴바

[HTML] 제목, 본문, 글자 태그(h, p, br, pre, strong, em, b, sub, sup, ins, del 태그)

목차

제목 태그

본문 태그

글자와 관련된 태그

태그 사용 예시

'Client > HTML' 카테고리의 다른 글

'Client/HTML'의 다른글

관련글

티스토리툴바