태그를 배우기 전에 알아두어야 할 내용이 요소의 유형과 성질이다. 요소의 유형은 '블록 레벨 요소'와
'인라인 요소'로 나누어지며, 이 중 '블록 레벨 요소'에 대한 것을 먼저 알아보겠다.


블록 레벨 요소(Block-level Elements)

블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있는데, 다음 예제를 보면서 설명


<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charest="UFT-8">
   <title>블록 레벨 요소</title>
</head>
<body>
   <h1>블록 레벨 요소</h1>
   <h2>블록 레벨 요소 성질</h2>
   <p>줄 바꿈이 생깁니다.</p>
</body>
</html>

결과 ▽

블록 레벨 요소

블록 레벨 요소 성질

줄 바꿈이 생깁니다.


(예제 ex1-1)에서 마크업 했던 <h1>, <h2>, <p> 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈
현상이 일어나는 것을 볼 수 있습니다.




인라인 요소(Inline Element)

인라인 요소는 블록 레벨 요소와 달리 줄 바꿈 특성이 없습니다. 즉, 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력


<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charest="UFT-8">
   <title>인라인 요소</title>
</head>
<body>
   <strong>인라인 요소</strong>
   <span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>

결과 ▽

인라인 요소 인라인 요소는 한 줄로 출력됩니다.

(예제 ex1-2)에서 마크업 했던 <strong>, <span> 요소들은 인라인 성질을 가지고 있어 행이 바뀌지 않고 한 줄로 출력 된 것을 확인 가능

블록 레벨 요소와 인라인 요소의 특성

마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지 훌 수 있습니다.


예를 들어 인라인 요소에는 일반적으로 블록 레벨 요소가 자식으로 올 수 없다


예저를 통해 확인

<!DOCTYPE html>
<html lang="ko">
<head>
   <meta charest="UFT-8">
   <title>블록 레벨 요소와 인라인 요소</title>
</head>
<body>
   <span><h1>블록 레벨 요소</h1></span>
   <span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>


<span>은 인라인 요소, <h1>은 블록 레벨 요소이다, 즉. 인라인 요소의 자식 요소 블록 레벨 요소를 마크업 했기에 문법 에러 발생

요소 유형 특징
블록 레벨 요소 1. 블록 레벨 요소는 줄 바꿈이 일어납니다.
2. 블록 레벨 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함
3. 블록 레벨 요소중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함 할 수
없는 요소가 있다
인라인 요소 1. 인라인 요소는 줄 바꿈이 일어나지 않는다.
2. 인라인 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함 할 수 없다.
3. 인라인 요소는 블로 레벨 요소를 자식 요소로 포함 할 수 없다.

HTML5로 넘어오면서 블록 레벨 요소와 인라인 요소는 좀 더 복잡한 콘텐츠 카테고리 (콘텐츠 모델)
로 대체 되었습니다. 콘텐츠의 종류와 태그들은 다음과 같습니다.


콘텐츠 종류 내용 해당 요소
메타데이터 콘텐츠
Metadata Content
  • <head> 태그 안에 포함되는 요소들로
    콘텐츠의 표현, 동작 설정, 문서간
    관계를 설정, 정보 전달을 포함하는
    요소를 의미합니다.
    		•  <base>, <link>, <meta>, <noscript>,
    <script>, <style>, <title>, ...
    플로우 콘텐츠
    Flow Content
  • <body> 태그 안에 포함되는 대부분의
    요소들로 내용 흐름에 관한 요소를
    의미합니다.
    		•  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>,
    <address> <p>, <a>, <img> <ul>, <ol>,
    <dl> <table>, <form>, ...
    섹션 콘첸츠
    Sectioning Cotent
  • heading과 footer의 범위를 정의하는
    요소를 의미합니다.
    		•  <article>, <aside>, <anv>, <section>
    헤딩 콘텐츠
    Heading Content
  • 섹션의 헤더를 정의하는 요소를
    의미합니다.
    		•  <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
    프레이징 콘텐츠
    Prashing Content
  • 텍스트를 마크업하는 요소를
    의미합니다.
    		•  <a>, <em>, <strong>, <sub>, <sup>, <label>, ...
    임베디드 콘텐츠
    Embedded Content
  • HTML 문서에 다른 리소스를 삽입
    하는 요소를 의미합니다.
    		•  <img>, <audio>, <video>, <iframe>, ...
    인터랙티브 콘텐츠
    Interactive Content
  • 사용자의 상호작용 위한 요소를
    의미합니다.
    		•  <a>, <button>, <audio>, <video>, <select>, ...

    콘텐츠 모델에 관련된 내용들은 https://www.w.3.org.TR/html52/dom.html#content-models에서 더 많은
    정보를 볼 수 있습니다.