텍스트 요소

제목 요소

HTML은 여섯 단계의 ‘레벨’ 제목heading이 있다.

<h1>은 메인 제목에 사용된다.
<h2>는 부 제목에 사용된다.
부 제목 아래에 또 다른 섹션이 있으면 <h3>요소를 사용한다.
<h1>요소의 콘텐츠가 가장 크고 <h6>요소의 콘텐츠가 가장 작다.

단락

<p>
단락paragraph을 만들려면 <p> 태그와 </p>태그로 단락을 구성하는 단어를 앞뒤로 감싸야 한다.
기본적으로 브라우저는 각 단락 사이에 한 줄의 행간을 삽입한다.

굵기&기울임

<b>

<b>와</b> 태그로 감싼 단어는 굵게 bold표시된다.
<b> 요소는 특별한 의미를 암시하지는 않지만 단락에서의 핵심 단어같이 시각적으로 다른 방식으로 표현하려는 텍스트를 강조해 나타낸다.

 

<i>
<i>와</i> 태그로 감싼 단어는 기울임italic꼴로 표시된다.
<i> 요소는 기술적인 용어, 선박의 이름, 외국어, 생각 또는 일반적으로 기울임꼴로 사용하는 용어 등 주변 콘텐츠와 다른 방식으로 표시하는 텍스트를 강조해 나타낸다.

위 첨자&아래 첨자

<sup>
문자를 위첨자superscript로 표시하는 데 사용한다.
<sub>
문자를 아래첨자subscript로 표시하는 데 사용한다.

줄바꿈 & 가로줄

<br />
새로운 단락이나 제목을 새로운 줄에 표시한다. 하지만 줄바꿈line break태그인 <br />을 사용하면 단락 중간에서도 줄바꿈이 가능하다.
<hr />
책에서 화제의 변경이나 연극에서 새로운 장면처럼 주제들을 구분하려면 섹션 사이에 <hr />태그를 사용해 가로줄horizontal rule을 추가 할 수 있다.
 
요소 중에는 열고 닫는 태그 사이에 단어가 들어가지 않는 요소가 있는 요소를 빈 요소empty element라고 하며 다르게 작성한다.

시맨틱 마크업

강한 강조&강조

<strong>

<strong>요소는 콘텐츠가 매우 중요한 경우에 사용한다. 예컨대 이 요소에 포함된 단어를 강하게 강조하고 싶다는 의미다.
브라우저는 기본적으로 <strong>요소의 콘텐츠를 굵게 표시한다.

<em>

<em> 요소는 강조를 나타내며 문장의 의미를 미세하게 변경한다.
브라우저는 기본적으로 <em> 요소의 콘텐츠를 기울임꼴로 표현한다.

인용

<blockquote>

<blockquote> 요소는 전체 단락을 차지하는 긴 인용에 사용한다.
※ <blockquote>요소 안에 <p>요소를 사용 할 수 있다.
 
브라우저는 대개 <blockquote>요소의 콘텐츠를 들여 쓰지만 이 요소를 텍스트의 들여쓰기 용도로 사용해서는 안 된다.
들여쓰기 효과는 CSS를 사용하자.

<q>

<q> 요소는 단락 내에서 짧은 인용에 사용한다.
대부분 브라우저는 <q> 요소 주위에 따옴표를 삽입하지만 인터넷 익스플로러는 <q>요소 주위에 따옴표를 삽입하지 않는다.
따라서 많은 사람들은 <q> 요소의 사용을 피한다.
 
두 요소는 인용의 출처를 밝히기 위해 cite 속성을 사용하기도 한다.
예컨대 cite 속성 값으로 URL을 설정하여 인용의 출처에 대한 상세한 정보를 제공한다.

HTML 요소는 제목, 부 제목, 단락 같은 페이지의 구조를 나타내는 데 사용한다.

HTML 요소는 강조, 약어의 정의, 인용 같은 시맨틱 정보도 제공한다.