텍스트 관련 태그

맹뿌·2021년 5월 26일

HTML5

목록 보기

4/9

① 제목 태그 (Heading Tag)

Heading 태그는 제목을 나타낼 때 사용하며, h1에서 h6까지의 태그가 있다.
h1이 가장 중요한 제목을 의미하며 글자의 크기도 가장 크다.
문서의 구조와도 밀접한 관련이 있으므로 가능하면 순서에 맞게 사용하는 것이 좋다.

h1 ~ h6 태그는 자동으로 줄바꿈이 되므로 따로   태그를 넣지 않아도 된다.

② 글자 형태 태그 (Text Formatting Tag)

<body>
  <p style="font-weight:bold">This is bold.</p>
  <b>This is bold.</b>
  <strong>This text is strong.</strong>
  <i>This text is italic.</i>
  
</body>

1. b 태그

볼드체(bold)를 지정한다. 제목 태그처럼 의미적으로 중요성을 갖지는 않는다.

b 태그는 style 태그를 통해 bold로 지정해주는 것과 같은 결과를 갖는다.

2. strong 태그

strong 태그 역시 b 태그와 마찬가지로 기존 텍스트가 진하게 보일 수 있도록 bold 처리를 한다.
그렇다면 이 두 가지 태그에는 어떤 차이점이 있을까?

앞서 말한 것처럼 b 태그는 텍스트를 강조하는 역할을 하나, 의미론적으로 중요성을 갖지는 않는다.

그러나 strong 태그의 경우 텍스트를 강조할 뿐만 아니라, 실제로 페이지 내의 중요한 부분으로 강조를 할 때 사용된다. 즉, 브라우저가 strong 태그를 해석할 때, 페이지 내에서 중요한 부분으로 이해를 한다는 뜻이고, 이는 브라우저에서 지원되는 웹 접근성에 큰 기여를 한다.

3. i 태그

i 태그는 글자를 기울여서 표시하는 태그로, italic의 약자이다.
의미적으로 중요성을 강조하지는 않는다.

4. em 태그

emphasized(강조, 중요한) text를 지정한다.
시각적으로는 i 태그와 동일하게 Italic체로 표현되지만 em 태그의 경우, 의미론적으로 중요성을 갖는다.

은 콘텐츠를 강조한다.

과 으로 표시된 경우, 이를 음성으로 읽어주는 경우에는 볼륨이나 톤 등을 변경해서 읽어줄 수 있다고 되어 있다. 전체적으로 종합해본다면 과 은 웹브라우저 뿐만 아니라 음성 읽기 도구에서도 강조하여 읽어준다는 것이다.

5. small 태그

<body>
  <h1>HTML <small>Small</small> Formatting</h1> // small 글자만 작게 표시된다.
</body>

6. mark 태그

<body>
  <h2>I <mark>Love♡</mark> You</h2> // Love♡ 부분이 highlighted text로 표현된다.
</body>

7. del 태그

<body>
  <p>My favorite color is <del>red</del> green.</p> // red 부분만 취소선이 있게 표현된다.
</body>

텍스트를 삭제했음을 의미.

8. ins 태그

<body>
  <p>My favorite color is <ins>green</ins>.</p> // green 부분만 밑줄이 있게 표현된다.
</body>

텍스트를 추가했음을 의미.

9. sub/sup 태그

<body>
  <p>This is <sup>superscripted</sup> text.</p> // 위 첨자
  <p>This is <sub>subscripted</sub> text.</p> // 아래 첨자
</body>

③ 본문 태그

1. p 태그

는 paragraph의 약자로 문단을 구분할 때 사용한다.
p 태그 앞 뒤로 여백이 추가되는데  이 두 번 들어간 것과 같은 결과가 나온다.

2. br 태그

 은 line break의 약자로, 줄바꿈 할 때 사용된다.
 은 종료 태그가 없는 빈 요소이다.

HTML에서는 1개 이상의 연속된 공백(space)를 삽입하여도 1개의 공백으로 표시된다.
1개 이상의 연속된 줄바꿈(enter)도 1개의 공백으로 표시된다.

연속적으로 공백을 출력하고 싶다면,
출력하고자 하는 공백 위치에 원하는 수만큼  를 추가하면 된다.

<body>
  <p>00대학교&nbsp; &nbsp; 컴퓨터공학과 &nbsp;&nbsp;16학번</p> // 공백이 4개, 3개
</body>

3. pre 태그

<pre>안에서 작성된 Enter나 Tab, Space는 작성된 그대로 브라우저에 표시된다.
따라서 긴 문장 등을 표현할 때 효율적으로 사용할 수 있다.

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

4. hr 태그

수평줄을 삽입하는 태그이다.
문단을 의미적으로 분리하거나, 주제를 분리하기 위한 용도로 사용된다.
종료 태그는 없다.

5. q 태그

짧은 인용문(quotation)을 지정한다.
브라우저는 인용부호(큰따옴표/quotation marks/")로 q 요소를 감싼다.

6. blockquote 태그

긴 인용문 블록을 지정한다. 브라우저는 blockquote 요소를 들여쓰기 한다.
css를 이용하여 다양한 style을 적용할 수 있다.

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