HTML 블록 태그 vs 인라인 태그 차이 및 예제


HTML 블록 태그

HTML 블록 태그는 태그를 삽입할 경우 항상 새로운 줄에서 시작합니다. 태그 영역의 길이가 아무리 짧아도 새로운 블록 태그는 다음 줄에서 시작됩니다.

<p> 태그는 블록 태그입니다. <p> 태그 네 묶음을 한 줄에 배치해서 코드를 작성하면 코드 상에서는 한 줄로 표기됩니다.

<p>개구리</p> <p>두 마리를</p> <p>두개골이라</p> <p>부릅니다.</p>

하지만 웹브라우저에서 <p> 태그는 각각 새로운 줄에서 시작됩니다.

블록 태그의 대표적인 예로는 <h1> ~ <h6>, <p>, <li>, <ul>, <ol>, <table>, <pre>, <div> 등이 있습니다.

HTML 인라인 태그

HTML 인라인 태그는 태그로 지정한 범위만큼만 브라우저에 출력됩니다.

<strong> 태그는 해당 영역만 두꺼운 글씨로 변하는 인라인 태그입니다. <strong> 태그 네 묶음으로 위와 똑같은 예제를 작성해봅니다. 코드상에서 한 줄로 표기됩니다.

<strong>개구리</strong> <strong>두 마리를</strong> <strong>두개골이라</strong> <strong>부릅니다.</strong>

웹브라우저상에서도 한 줄로 표기됩니다.


인라인 태그의 대표적인 예로는 <a>, <em>, <strong>, <b>, <span>, <u>, <img> 등이 있습니다.

블록 태그 블록 태그

블록 태그는 서로 포함하거나 포함될 수 있습니다.

<div><p>미국 갱스터를 양갱이라 부릅니다.</p></div>

블록 태그 인라인 태그

블록 태그는 인라인 태그를 포함할 수 있습니다.

<p>야한 잡지의 반대말은 <em>건전지</em>입니다.</p>

인라인 태그 블록 태그

인라인 태그는 블록 태그를 포함할 수 없습니다. 강제로 구현은 되지만 사용하지 않는 것이 좋습니다.

<u><p>종교와 입시의 공통점은 내 신이 중요하다는 점입니다.</p></u>