텍스트와 관련된 Tag

divedeepp·2022년 2월 9일

html5

HTML5

목록 보기

4/9

제목이나 본문, 텍스트의 형태와 중요도 등을 나타내는 텍스트에 관련된 태그들을 알아보자.

제목 Tag

heading tag는 제목을 나타낼 때 사용한다. 중요도가 가장 높은 h1부터 시작해서 h6까지 글자 크기가 작아지며 표시된다.

semantic element이므로 제목이나 부제 이외에는 사용하지 않는 것이 의미론적으로 좋다. 검색엔진이 heading tag를 사용해 최적화를 할 수 있기 때문이다.

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

글자 포맷과 관련된 태그

bold체를 지정한다.

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

bold체를 지정한다. 하지만 b tag와는 다르게 의미론적으로 '중요함'의 의미를 갖는다.

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <strong>This text is strong.</strong>
  </body>
</html>

이탤릭체를 지정한다.

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

강조하거나 중요한 텍스트를 지정할 때 사용한다. 이탤릭체로 표현되며, i tag와 달리 의미론적인 의미를 갖는다.

<!DOCTYPE html>
<html>
  <body>
    <p>This text is normal.</p>
    <em>This text is emphasized.</em>
  </body>
</html>

작은 크기의 텍스트를 지정한다.

<!DOCTYPE html>
<html>
  <body>
    <p>HTML <small>Small</small> Formatting</p>
  </body>
</html>

하이라이트하고 싶은 텍스트를 지정한다.

<!DOCTYPE html>
<html>
  <body>
    <h2>HTML <mark>Marked</mark> Formatting</h2>
  </body>
</html>

<del>

취소선을 긋고 싶은 텍스트를 지정한다.

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

삽입하고 싶은 텍스트를 지정한다.

<!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 tag는 아래첨자, sup tag는 윗첨자를 지정하는데 사용한다.

<!DOCTYPE html>
<html>
  <body>
    <p>This is <sub>subscripted</sub> text.</p>
    <p>This is <sup>superscripted</sup> text.</p>
  </body>
</html>

본문과 관련된 태그

문단을 지정하는데 사용된다.

<!DOCTYPE html>
<html>
  <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, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </body>
</html>

개행(line break)을 하는데 사용된다. empty element로 end tag가 없다.

<!DOCTYPE html>
<html>
  <body>
    <p>This is<br>a para<br>graph with line breaks</p>
  </body>
</html>

HTML에서는 element로 따로 명시적으로 공백이나 줄바꿈을 지정하지 않으면, 공백이나 줄바꿈이 연속되어도 1개의 공백으로만 표시된다. 따라서 연속된 공백을 삽입하고 싶다면 entity 문자를 사용한다.

<!DOCTYPE html>
<html>
  <body>
    <p>This is&nbsp; a para&nbsp; &nbsp; graph</p>
  </body>
</html>

<pre>

미리 포맷된 텍스트를 지정한다. pre element 내의 content는 작성된 그대로 브라우저에 표시된다. 즉, 연속된 공백도 그대로 출력된다.

<!DOCTYPE html>
<html>
  <body>
    <p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
    <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>

짧은 인용문을 지정한다. 브라우저는 큰따옴표로 content를 표시한다.

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

긴 인용문 블록을 지정한다. 브라우저는 content를 들여쓰기한다.

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