- 블록 태그(block tag)와 인라인 태그(inline tag)

블록 태그는 태그가 선택한 글자에만 적용되는 것이 아니라 텍스트가 포함된 블록 전체에 적용된다.

<hn> 태그는 제목 텍스트로, 일반 텍스트보다 굵고 진하게 표시된다.
→ 제목을 뜻하는 heading의 줄임말이며, 1부터 6까지 있다.

안녕하세요!

<h1>안녕하세요!</h1>
<h2>안녕하세요!</h2>
<h3>안녕하세요!</h3>
<h4>안녕하세요!</h4>
<h5>안녕하세요!</h5>
<h6>안녕하세요!</h6>

 태그는 텍스트를 표시할 때 가장 많이 사용하는 태그이다.
→ paragraph의 줄임말. 태그는 줄바꿈 없이 텍스트를 한 줄로 표시한다.

단락입니다

만나서 반갑습니다

<!-- <p> 태그는 한 줄로만 표시한다. 브라우저 창의 너비보다 길어질 때 자동으로 개행 -->
<p>단락입니다</p>
<p>
    만나서
    반갑습니다
</p>

 태그는 줄 바꿈, <hr> 태그는 줄 긋기. 두 태그 모두 닫는 태그가 필요 없다.
→ 은 break, <hr>은 horizontal의 줄임말

첫 번째 줄입니다.

두 번째 줄입니다.

세 번째 줄입니다.

<p>첫 번째 줄입니다.</p>
<br>
<p>두 번째 줄입니다.</p>
<hr>
<p>세 번째 줄입니다.</p>

preformat의 줄임말로, <pre> 태그는 입력하는 그대로 화면에 표시한다.

이것은 p 태그입니다. 개행과 띄어쓰기가 안 먹습니다.

    이것은
    pre 태그입니다.
    개행과 띄어쓰기가
    아주  잘  먹습니다.

<p>
    이것은
    p 태그입니다.
    개행과 띄어쓰기가
    안 먹습니다.
</p>

<pre>
    이것은
    pre 태그입니다.
    개행과 띄어쓰기가
    아주  잘  먹습니다.
</pre>

인라인 태그는 텍스트에 효과를 주며, 닫는 태그를 생략할 수 없다.

두 태그 모두 텍스트를 굵게 표시할 때 사용하며, 두 태그의 차이점은 화면낭독기에서의 기능 때문이다.
 태그를 사용하면 화면낭독기에서 강조된 부분이라고 화면 낭독기가 알려준다.

굵게 강조할 텍스트
굵게 표시할 텍스트

<strong>굵게 강조할 텍스트</strong>
<b>굵게 표시할 텍스트</b>

텍스트를 비스듬히 표시하는 이탤릭체를 사용할 때 쓰는 태그.
→ 은 emphasis, 는 italic의 줄임말.  태그 또한 처럼 화면낭독기에서 강조된다.

이탤릭체로 강조할 텍스트
이탤릭체로 표시할 텍스트

<em>이탤릭체로 강조할 텍스트</em>
<i>이탤릭체로 표시할 텍스트</i>

 태그는 텍스트 단락 안에서 일부 텍스트만 묶어준다.
→ 일부 텍스트만 스타일 적용할 때 주로 사용

햇살보다 밝게 빛나는

<p>햇살보다 <span style="color:orange;">밝게</span> 빛나는</p>

참고문헌 : 고경희(2019), HTML5+CSS3 웹 표준의 정석, 이지스 퍼블리싱