텍스트 관련 태그

 

 

 

---

 

텍스트 관련 태그는 무엇이 있을까?

 

 

---

 

 

 

 

hn 태그

 

--

hn 태그는

제목이나 주제를 나타내는 텍스트를 표현할 때 사용된다.

n은 숫자를 의미하고 1 ~ 6까지 존재한다. (h1 ~ h6)

 

기본 형식

<hn> 제목 </hn>

 

예시 코드

<h1> 해당 내용은 제목1 입니다. </h1>
<h2> 해당 내용은 제목2 입니다. </h2>
<h3> 해당 내용은 제목3 입니다. </h3>
<h4> 해당 내용은 제목4 입니다. </h4>
<h5> 해당 내용은 제목5 입니다. </h5>
<h6> 해당 내용은 제목6 입니다. </h6>

 

"hn태그"로 작성된 텍스트는 "검색 엔진"에서 키워드로 인식하므로

검색 엔진 최적화를 위해 본문에서 핵심이 되는 내용으로 제목이나 주제를 잘 선택해서 작성해야 한다.

 

검색 엔진은

hn태그를 검색할 때 h1태그부터 단계적으로 검색한다.

만약 h4태그를 사용하지 않고 h1, h2, h3, h5, h6 태그를 사용하고 있다고 가정하면

h1태그부터 단계적으로 검색하다가 h4 태그가 존재하지 않는다면 그 뒤인 h5, h6은 검색하지 않고 넘어간다.

 

검색 엔진 최적화(SEO)는
구글이나 네이버와 같은 검색 엔진에서 상위에 랭크될 수 있도록 검색 엔진에 친화적으로
마크업을 작성하는 것을 의미한다.

--

 

 

 

 

p 태그

 

--

p태그는

본문의 문단(내용)을 작성할 때 사용된다.

 

기본 형식

<p>내용</p>

 

예시 코드

<h1> 해당 내용은 제목1 입니다. </h1>
<p> 이것은 내용으로 안녕하십니까?</p>

--

 

 

 

 

br 태그

 

--

br 태그는

문단에서 줄 바꿈 할 때 사용된다.

 

기본 형식

<br>

 

예시 코드

<p>
  안녕하세요.
  지금은 눈이 많이 오네요.
</p>
  
<p>
  안녕하세요.<br>
  지금은 눈이 많이 오네요.
</p>

--

 

 

 

 

blockquote 태그

 

--

blockquote 태그는

출처에서 인용한 문단 단위의 텍스트를 작성할 때 사용된다.

(출처가 확실한 인용문은 "cite 속성"을 통해 출처 경로를 명시해야 한다.)

해당 인용문의 출처가 존재한다면 "cite 속성"을 통해 출처 경로를 명시해야 한다.

cite 속성은
브라우저에서 직접적으로 보이지 않지만, 개발자 도구에서 확인이 가능하다.
(검색 엔진 최적화 및 웹 접근성에 도움을 준다.)

"blockquote태그"에서는 한 개 이상의 "p태그"를 포함해야 하는 것을 권장한다.
"blockquote태그" 자체가 "블록 레벨 요소"이기 때문에,
보통 문장을 감싸는 "p태그(단락 요소)"를 사용하는 것이 적절하다.
그리고 인용문이 여러 문장으로 구성될 경우에도 "p 태그"를 사용해야 한다.

p태그를 사용하면 HTML 구조가 더 명확해지고, 접근성과 검색 엔진 최적화 측면에서도 유리하다.

( "p태그" 내용에 "blockquote태그"는 포함될 수 없다. )

 

기본 형식

<blockquote>문단 단위 인용문</blockquote>

<blockquote>
  <p>
    문단 단위 인용문
  </p>
</blockquote>

<blockquote cite="출처 URL">문단 단위 인용문</blockquote>

 

예시 코드

<p>
  하이퍼 텍스트 마크업 언어(Hyper Text Markeup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
</p>

<blockquote>
  하이퍼 텍스트 마크업 언어(Hyper Text Markeup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
</blockquote>

<blockquote>
  <p>
    하이퍼 텍스트 마크업 언어(Hyper Text Markeup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
  </p>
</blockquote>

<blockquote cite="https://ko.wigipedia.org/wiki/HTML">
  <p>
    하이퍼 텍스트 마크업 언어(Hyper Text Markeup Language, HTML, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)는 웹 페이지를 위한 지배적인 마크업 언어다. 또한, HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다.
  </p>
</blockquote>

--

 

 

 

 

q 태그

 

--

문단 안에 텍스트 단위의 짧은 인용문을 작성할 때 사용된다.

"q 태그"를 사용한 인용문(콘텐츠)는 큰 따옴표("")로 묶인다.

 

• q 태그  :  짧은 인용문
• blockquote 태그  :  긴 인용문

 

기본 형식

<q> 짧은 인용문 </q>

<q cite="출처 URL"> 짧은 인용문 </q>

 

예시 코드

<p>
  어떠한 데이터에 따르면
  <q cite="https://test-home-not-i-don't-no.com"> 오랜만에 눈이 많이 내렸답니다.</q>
</p>

--

 

 

 

 

ins 태그 & del 태그

 

--

ins 태그는

새로 추가된 텍스트임을 나타낼 때 (콘텐츠에 밑줄 표시)

del 태그는

기존에 있던 텍스트가 삭제된 텍스트임을 나타낼 때 사용된다. (콘텐츠에 취소선 표시)

 

기본 형식

<ins> 추가 텍스트 </ins>
<del> 삭제 텍스트 </del>

 

예시 코드

<p>
  HTML 강의 책을 정가 <del>20,000원</del>에서 할인된 금액 <ins>16,000원</ins>으로 판매합니다.
</p>

--

 

 

 

 

sub 태그 & sup 태그

 

--

sub 태그는 아래 첨자, sup 태그는 위 첨자를 표시하는 텍스트를 작성할 때 사용된다.

 

기본 형식

<sub>아래 첨자</sub>
<sup>위 첨자</sup>

 

예시 코드

<p>
  H<sub>2</sub>O = 공기 원소
</p>

<p>
  4<sup>3</sup> = 4 * 4 * 4 = 64
</p>

--

 

 

strong 태그

 

--

strong 태그는

스타일에서 차이를 두기 위해 시각적으로 텍스트를 굵게 표시하면서

웹 브라우저에 중요한 부분임을 알려주는 역할이다.

이전에는 b태그를 사용했지만 HTML이 발전하면서 strong 태그를 사용하는 것이 좋다.

strong 태그는 중첩해서도 사용할 수 있으며
1번 중첩된 콘텐츠와 n번 중첩된 콘텐츠는 결과를 보면 동일하게 모두 굵은 텍스트로 보이지만
내부적으로는 n번 중첩된 콘텐츠를 더 중요한 부분으로 인식하게 된다.

 

기본 형식

<strong>중요한 의미가 있는 텍스트</strong>

 

예시 코드

<strong>취급 주의</strong>

<p>
  해당 물건은 <strong>취급 주의</strong> 입니다.
</p>

<p>
  <strong>해당 물건은 <strong>취급 주의</strong> 입니다.</strong>
</p>

--

 

 

em 태그

 

--

em 태그는

텍스트를 기울어져 보이면서 강조하는 효과를 나타낸다.

이전에는 i태그를 사용했지만 HTML이 발전하면서 em 태그를 사용하는 것이 좋다.

em 태그 또한 strong 태그처럼 중첩이 가능하다.

 

기본 형식

<em>강조하고 싶은 텍스트</em>

 

예시 코드

<em>취급 주의</em>

<p>해당 물건은 <em>취급 주의</em> 입니다.</p>

<p>
  <em>해당 물건은 <em>취급 주의</em> 입니다.</em>
</p>

--