HTML

HTML - 텍스트 관련 태그

데이터_박과장 2023. 10. 18. 21:39

제목 (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) 태그

 

b

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>

 

HTML에서 <b> 태그와 <strong> 태그는 텍스트의 강조 표시를 나타내는 데 사용되는 요소입니다. 그러나 이 두 태그는 의미적으로 다르며, 브라우저와 검색 엔진에게 강조의 정도를 전달하는 데 차이가 있습니다.

<b> 태그:
<b> 태그는 텍스트를 굵게 표시하도록 사용됩니다. 그러나 이 태그는 단순히 굵게 만드는 시각적 스타일을 나타내며, 텍스트에 어떤 의미적인 강조를 부여하지 않습니다.
브라우저와 검색 엔진은 <b> 태그를 시각적 스타일 지정용으로 인식하며, 텍스트의 중요성이나 의미적 강조를 부여하지 않습니다.

 

<strong> 태그:
<strong> 태그는 텍스트를 굵게 표시하는 것뿐만 아니라, 텍스트에 의미적으로 중요하거나 강조할 내용이 있다는 것을 나타냅니다. 즉, 이 태그는 강조된 텍스트에 의미를 부여합니다.
브라우저와 검색 엔진은 <strong> 태그를 시각적 스타일뿐만 아니라 의미적 강조로 처리하며, 이를 통해 중요한 내용을 사용자에게 알리고 검색 결과에서 강조될 수 있습니다.

 

STRONG 태그는 텍스트를 강조하고, 이 텍스트에 SEMANTIC(의미론적) 중요성을 나타내는 HTML 요소입니다. 이것은 주로 웹 페이지에서 중요한 텍스트를 강조하고, 검색 엔진 및 스크린 리더(시각 장애인을 위한 웹 접근성 도구)와 같은 웹 기술을 사용하는 시스템에 중요한 정보를 전달하는 데 사용됩니다.

STRONG 태그의 중요한 특징은 다음과 같습니다:

시각적 강조: STRONG 태그는 기본적으로 텍스트를 굵게 표시합니다. 이것은 웹 페이지의 디자인에서 중요한 부분을 시각적으로 강조하기 위한 방법 중 하나입니다.

의미적 중요성: STRONG 태그는 강조된 텍스트가 문서의 의미나 주요 내용을 나타내는 것으로 간주됩니다. 이것은 검색 엔진에게 해당 텍스트가 중요하며 검색 결과에서 강조되어야 한다고 알려줍니다.

웹 접근성: STRONG 태그는 시각적으로 중요한 내용을 강조하면서, 스크린 리더와 같은 보조 기술을 사용하는 사용자들에게 중요한 정보를 전달하는 데 도움을 줍니다.

 

i


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>

 

em


emphasized(강조, 중요한) text를 지정한다. i tag와 동일하게 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>

 

본문 태그

p


단락 (Paragraphs)을 지정한다.

 

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

 

br


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

 

<!DOCTYPE html>
<html>
  <body>
    <p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
    <p>
      var myArray = [];
      console.log(myArray.length); // 0

      myArray[1000] = true;  // [ , , ... , , true ]

      console.log(myArray.length); // 1001
      console.log(myArray[0]);     // undefined
    </p>
  </body>
</html>

위 자바스크립트 코드가 동작할 수 있도록 아래는 코드를 수정한 수정본입니다. (스크립트 태그 안에 있으면 되지요)

 

<!DOCTYPE html>
<html>
  <body>
    <p>HTML은 1개 이상의 연속된 공백(space)과 1개 이상의 연속된 줄바꿈(enter)을 1개의 공백으로 표시한다.</p>
    <p>
      <script>
        var myArray = [];
        console.log(myArray.length); // 0

        myArray[1000] = true;  // [ , , ... , , true ]

        console.log(myArray.length); // 1001
        console.log(myArray[0]);     // undefined
      </script>
    </p>
  </body>
</html>

 

pre


형식화된(preformatted) text를 지정한다. pre 태그 내의 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


짧은 인용문(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>

 

<h1>, <h2>, <h3>, ... <h6>: 제목 요소로, 콘텐츠의 중요도에 따라 사용됩니다. 

<p>: 일반 텍스트를 나타냅니다. 

<img>: 이미지를 삽입하는 요소입니다. 

<button>: 클릭 가능한 버튼을 만들 때 사용됩니다. 

<a>: 하이퍼링크를 생성할 때 사용하며, 다른 웹페이지로 연결합니다. 

<input>: 사용자로부터 데이터를 입력받을 때 사용하는 폼 요소입니다. 

<table>, <tr>, <th>, <td>: 표를 만들 때 사용되며, 데이터를 표 형식으로 나타냅니다. 

<div>: 구획을 나눌 때 사용하며, CSS 스타일링을 적용하기 위한 블록 요소입니다. 

<span>: 인라인 요소로, 텍스트 일부분을 스타일링하기 위해 사용됩니다. 

<ul>, <ol>, <li>: 목록을 생성하고 나열할 때 사용합니다. 

<form>, <input>, <textarea>, <button>: 웹 양식을 만들 때 사용되며, 사용자 입력을 받는 데 유용합니다. 

<video>, <audio>: 비디오 및 오디오 미디어를 삽입할 때 사용됩니다. 

<iframe>: 다른 웹페이지를 현재 페이지에 삽입할 때 사용됩니다. 

<section>, <article>, <header>, <footer>: 웹페이지의 구조를 나타내기 위한 의미적 요소로, SEO와 스크린 리더 사용자를 위한 정보를 제공합니다. 

<nav>, <aside>: 추가 정보를 포함한 네비게이션 및 부가 내용을 표시합니다. 

<time>, <address>: 날짜 및 시간, 주소 정보를 의미적으로 표현합니다. 

<abbr>, <cite>, <em>, <strong>, <mark>: 텍스트의 의미와 스타일링을 조절하기 위한 인라인 요소입니다. 

 

 

'HTML' 카테고리의 다른 글

HTML - 이미지 등 멀티미디어 지원 태그  (0) 2023.10.19
HTML - 목록과 표  (0) 2023.10.18
HTML - 하이퍼링크  (0) 2023.10.18
HTML - 시맨틱 요소  (0) 2023.10.18
HTML의 소개  (0) 2023.10.18

'HTML'의 다른글

  • 현재글HTML - 텍스트 관련 태그

관련글

티스토리툴바