텍스트 관련 태그

2023. 1. 26. 16:43

제목 (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>

본문 태그

단락 (Paragraphs)을 지정

<!DOCTYPE html>
<html>
  <body>
    <h1>This is a heading.</h1>
    <p>Paragraphs 1</p>
    <p>Paragraphs 2</p>
  </body>
</html>

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개의 공백으로 표시

&nbsp

연속적 공백을 삽입하는 방법

<!DOCTYPE html>
<html>
  <body>
    <p>This is&nbsp; a para&nbsp; &nbsp; 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>

수평줄 삽입

<!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

CO_JUN 개발일지