인라인 요소 (Inline Element)
특징
1. 인라인 요소는 마크업을 할 때 줄 바꿈이 일어나지 않아 가로로 정렬이 된다.
2. 인라인 요소는 텍스트(문자)와 인리인 요소를 자식 요소로 포함 할수 있다.
3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없다.
4. 인라인 요소는 너비나 높이 값을 줄 수 없다.(width,height)
인라인 요소의 태그
<a>: 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소 등을 URL로 연결할 수 있는 하이퍼 링크를 만들때
사용되는 태그
<audio> : 소리 콘텐츠를 포함할 때 사용하는 태그
<span>: 인라인 요소들을 그룹으로 정의하는 태그
<input>: 사용자로 부터 데이터 값을 입력 받기 위한 태그
<img> : 이미지를 넣는 태그
<button> : 클릭 가능한 버튼이 나타나는 태그
<sub> : 아래첨자 텍스트를 정의하기 위한 태그
<sup> : 위첨자 택스트를 정의하기 위한 태그
<mark> : 주의 깊게 볼 텍스트 부분을 강조 하기 위한 태그(노란색으로 표시)
등등...
블록 레벨 요소 (Block-level Elements)
특징
1. 블록 레벨 요소는 마크업을 할때 줄바꿈이 일어나 세로로 정렬이 된다.
2. 블록 레벨 요소는 텍스트(문자) 와 인라인 요소를 자식 요소로 포함할 수 있다.
3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있다.
4. 블록 요소는 너비나 높이 값을 줄 수 있다.(width,height)
블록 레벨 요소의 태그
<h1>~<h6> : HTML 문서에서 제목 (HEADING) 을 정의 할 때 사용하는 태그
<p> : HTML 문서에서 단락(paragraph)을 정의할 때 사용하는 태그
<div> : 요소들을 그룹으로 정의하는 태그
<address> : HTML 문서의 소유자나 조직에 대한 연락처 정보를 정의할 때 사용하는 태그
<ol> : Order List의 약자로 순서 목록을 정의할 때 사용하는 태그
<ul> : Unorder List의 약자로 비순서 목록을 정의할 때 사용하는태그
<li> : 항목을 정의할 때 사용하는 태그
등등...
차이점
1. 인라인 요소는 자신이 필요한 부분만 차지하여 가로 정렬 되는 반면, 블록 레벨 요소는 사용가능한 가로너비를 최대로 사용하기 때문에 세로 정렬이 된다.
2. 인라인 요소는 너비나 높이를 가질 수 없지만, 블록 레벨 요소는 너비나 높이 값을 지정할 수 있다.
3. 인라인 요소는 블록 레벨 요소를 자식을 포함할 수 없지만, 블록 레벨 요소는 인라인 요소를 자식으로 포함할 수 있다.
차이점을 보고 다음과 같이 HTML을 만들면
 |
 |
블록 레벨 태그 안에 인라인 태그는 가로 정렬 되고, 블록태그 들은 세로로 정렬 되어 있다.