HTML5 자습서 블럭 요소와 인라인 요소

HTML 요소는 크게 블럭 요소(block element 또는 block-level element)인라인 요소(inline element)로 나눌 수 있습니다.

블럭 요소

CSS를 통해 스타일을 변경하지 않았다면 블럭 요소(block element)는 화면의 가로폭 전체를 차지하는 직사각형 모양을 가집니다. 모든 인라인 요소는 블럭 요소 안에 속해 있어야하며, body 요소에 바로 담길 수 있습니다.

대표적인 블록 요소는 아래와 같습니다:

이 중 blockquote 요소와 같은 일부 블럭 요소는 인라인 요소 뿐 아니라 다른 블럭 요소를 포함할 수 있습니다. 반면 p 요소와 같은 블럭 요소는 다른 블럭 요소를 포함할 수 없습니다.

따라서 다음은 올바른 HTML 이지만…

<blockquote>
   <p>...인용문 1...</p>
   <p>...인용문 2...</p>
</blockquote>

다음 HTML은 올바르지 않습니다:

<p><h1>제목</h1></p>

인라인 요소

인라인 요소(inline element)는 블럭 요소 혹은 다른 인라인 요소 안에만 쓰일 수 있으며 CSS를 통해 스타일을 변경하지 않았다면 기본적으로 문장이 흐르듯 흐르는 모양을 가집니다.

대표적인 인라인 요소는 아래와 같습니다:

인라인 요소는 아래와 같이 블럭 요소(p 등) 안에 담겨야 하며, 여러 인라인 요소가 서로 중첩될 수 있습니다:

<p>
    이제 <a href="http://www.google.com">이 링크를 클릭하여 <strong>구글</strong>로 이동</a> 합시다.
</p>

위 예시에서 p는 블럭 요소이고, a, strong은 인라인 요소입니다. 특히 strong 요소는 a 요소 안에 중첩되어 쓰이고 있습니다. 위 문서는 아래와 같이 표현됩니다:

@pp run

블럭 요소 및 인라인 요소 목록

다음은 HTML5의 블럭 요소 목록입니다:

다음은 HTML5의 인라인 요소 목록입니다:

가이드

HTML

CSS

자바스크립트