main-logo

html5의 요소와 콘텐츠 모델에 대하여 #1

HTML5에 추가된 콘텐츠 모델이 무엇인지 와 요소들에 대해 알아보자

profile
김준호
2021년 08월 23일 · 0 분 소요

들어가며

현재 나에게 있어 학습이 필요한 html과 css에 대해 알아보고자 한다
종속형 시트 또는 캐스케이딩 스타일 시트(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 언어이다
HTML은 Hypertext Markup Language의 약어로 웹페이지가 어떻게 구조화 되어 있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어 이다
이 두 가지 내용을 한번에 기술하기에는 양도 많고 정리를 하기 어렵다 판단하여 1차와 2차로 나누고 1차는 HTML 의 소개와 HTML5에 대해 알아보고자 한다
2차는 CSS와 예시를 중점적으로 다루어 학습과 기술을 할 예정이다

HTML의 시작과 역사

HTML은 1991년 버너스리 라는 영국 과학자가 처음 인터넷 문서를 HTML태그 라고 부르며 시작되었다고 한다
공식으로 규격제안을 한 것은 1993년 IEFT(국제 인터넷 표준화 기구)이라고 한다
1997년 HTML4.0이 출시되고, HTML5가 나오기 전 까지 사용했던 HTML4.01은 1999년 W3C의 권고안으로 출시되었다

HTML5란?

HTML5는 기존 HTML4.01과 동일한 마크업 이지만, 차이점은 새로 도입된 콘텐츠 모델의 개념과 구조 관련 요소가 추가된 것이라 한다
그렇다면 새로 도입되었다는 콘텐츠 모델의 개념과 구조관련 요소가 무엇인지 알아보겠다

콘텐츠 모델의 개념

기존 HTML 기반의 마크업 에서는 인라인 요소와 블록 요소로 구분하는 정도의 개념이 존재하였다면 HTML5에서는 좀 더 명확한 정보구조, 설계 및 구성을 위해 카테고리를 정의하여 비슷한 성격끼리 그룹화 하였는데 이를 콘텐츠 모델 이라고 한다
어떤 요소에 어떤 콘텐츠가 포함되어야 하는 가와 어떤 요소가 어떤 요소를 포함할 수 있는지 정의하는 것 이라 할 수 있다.
HTML5의 카테고리에는 Sectioning Root, Metadata Content, Flow Content, Sectioning Content, HeadingContent, Phrasing Content, Embeded Content, Interactive Content, Palpable Content, Script-supporting Elements, Trasnparet Content 등의 그룹이 있으며, 하나의 요소는 여러 그룹에 속할 수도 있고 아닐 수 도 있다

Sectioning Root

<blockquote>, <body>, <detail>, <filedset>, <figure>, <td>

섹셔닝 루트에 속하는 요소는 section 이나 article 요소같이 계층적으로 구분되지 않고 독립적인 콘텐츠로 분류되어 아웃라인에 영향을 주지 않는다

Metadata Content

<base>, <link>, <meta>, <noscript>, <script>, <style>, <title>

메타데이터는 문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style, 행동을 설정하는 script 요소를 나타내며, 브라우저에 직접적인 표시가 되지는 않으며 문서간 관계를 설정한다고 한다

Flow Content

<a>, <abbr>, <article>, <b>, <button>, <canvas>, <footer>, <h1>~<h6>, <header>, <main>, <nav> <style>, <meta>, <area>, <link> 등...

메타콘텐츠의 일부요소를 제외하고 본문에 해당하는 body 요소에 들어가는 대부분의 요소가 플로우 콘텐츠 모델 이다.
이중,

<area>, <link>, <meta>, <style>

요소는 조건부로 플로우 콘텐츠가 된다

Sectioning Content

<article>, <aside>, <nav>, <section>

섹셔닝 콘텐츠는 HTML5 에서 새로 추가된 요소들이며, 제목과 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다

HeadingContent

<h1> ~ <h6>

섹션의 제목을 나타내며 문서의 아웃라인(개요)을 고려해 사용해야 한다

Phrasing Content

<a>, <abbr>, <b>, <em>, <sub>

문단 안에서 텍스트를 나타내며, 텍스트를 문단 내부 레벨로 마크업 하는 요소들이다

Embeded Content

<audio> <canvas>, <embed>, <iframe>, <img> 등...

외부자원 또는 html 이 아닌 다른 언어로 표현되는 콘텐츠 이다. 여기서 말하는 다른 언어는 수학 공식을 표현하는 MathML이나 SVG 등이 있다

Interactive Content

<a>, <audio>(controls 속성이 있을 경우), <button>, <input>(hidden 이 아닐 경우), <select>, <textarea>, <video> 등...

사용자가 어떤 기능을 조작할 수 있는(상호작용을 하는) 요소 이다
이를테면, 회원가입의 버튼 이라던가 문서에 포함된 영상 재생 등을 의미한다

Script-supporting Elements

<script>

자체가 어떤 정보를 표현하는것은 아니지만, 기능동작 등에 해당하는 스크립트 지원에 사용된다

HTML의 구성요소

HTML5 에는 기존 HTML과 동일하게 요소와 태그, 속성 으로 구성된다.
태그는 시작태그와 종료태그로 나눌 수 있으며 ’<’ 와 ’>’ 으로 감싸져 있다
일부 종료 태그를 가지지 않은 경우가 있는데, 이를 빈 요소(empty element)라고 한다
속성은 시작태그에 사용되며, 속성은 태그마다 다를 수 있다
속성을 값을 가지는데, 일부 값을 가지지 않는 논리 속성도 존재한다.

<input type="text" id="user" class="user-name" required />

위 예시를 보면 type, id, class 는 값을 가지고 있는 속성 이며 required 는 값이 없는 논리 속성이다.
요소는 시작태그와 종료태그 모두를 포함하여 요소 라 한다

<span>요소예시 입니다</span>

HTML 요소

문서를 구성하는 기본 요소로는 아래 세가지가 있다
html: 문서의 루트 요소로서 모든 HTML 요소는 해당 요소 내에 포함되어야 한다
head: 문서의 메타데이터 집합 요소로 제목, 스타일파일, 스크립트 파일 등을 포함한다
body: 문서의 본문요소로 문서내 한번만 사용한다

메타데이터 요소(head)

title: 문서의 제목으로 텍스트를 사용한다
meta: 다양한 문서 정보를 나타낸다(charset, content 등…)
style: 해당 문서에 표현되는 스타일을 직접 기술할때 작성한다
link: 외부 문서를 연결할 때 사용한다(css 파일, 이미지파일, 문서파일 등…)
base: 문서의 상대경로에 대한 기본 URL을 정의한다
script: 해당 문서에서 사용할 스크립트를 직접 기술하거나 외부에 있는 스크립트 파일을 호출할 때 사용한다
noscript: 스크립트를 지원하지 않을 경우 대신 제공한 콘텐츠를 정의한다

섹션 관련 요소

div: 시멘틱한 의미를 가지진 않지만 콘텐츠 블록을 그룹화할 때 사용한다
main: 문서의 주요 콘텐츠 영역을 정의할때 사용하며 문서에는 하나의 main요소만 존재할 수 있다
p: 단락 콘텐츠 정의에 사용
ul: 비 순서형 목록을 마크업 할 때 사용한다
ol: 순서형 목록을 마크업 할 때 사용한다
li: 순서/비 순서형 목록의 항목정의에 사용한다
dl: 정의형 목록을 마크업 할 때 사용한다
dt: 정의형 목록의 제목 의미에 사용한다
dd: 정의형 목록의 설명에 사용한다
figure: 이미지, 오디오, 비디오, 표 등을 포함한다
figcaption: FIGURE 요소에 포함된 콘텐츠의 캡션정의에 사용한다
blockquote: 인용구 정의에 사용한다
pre: 공백이나 줄바꿈 등의 입력형식 그대로 렌더링 시 사용한다
hr: 단락의 주제를 구분할때 사용한다

<main>
  <div>
    <ul>
      <li>
        <p>안녕하세요 예제를 위한 스크립트 입니다</p>
      </li>
    </ul>
  </div>
  <div>
    <dl>
      <dt>첫번째 타이틀</dt>
      <dd>첫번째 내용</dd>
    </dl>
    <dl>
      <dt>두번째 타이틀</dt>
      <dd>두번째 내용</dd>
    </dl>
  </div>
</main>

텍스트 레벨 시멘틱 요소

a: 하이퍼링크(링크)를 지정할때 사용한다
em: 텍스트 강조에 사용한다
strong: 특별히 중요한 콘텐츠의 의미를 부여할 때 사용한다
i: 기존에는 이탤릭체(기울임)을 표현하기에 사용하였으나, 의미가 변경되어 분위기전환에 사용한다
b: 기존에는 텍스트를 굵게 표시할때 사용하였지만, 의미가 변경되어 다른텍스트와 구분할때 사용한다
mark: 텍스트를 하이라이트로 표현할때 사용한다
small: 저작권 정보와 같은 작은 크기의 텍스트 콘텐츠에 사용한다
abbr: 축약어를 정의할때 사용한다
cite: 결과물의 인용구 정의에 사용한다
q: 인라인의 인용 및 참조를 정의할때 사용한다
time: 기계적으로 이해 및 처리할 수 있는 날짜/시간정의에 사용한다
code: 소스코드 정의에 사용한다
var: 프로그램에서 변수 식별자 의미를 정의할 때 사용한다
samp: 시스템 상태 메시지를 정의할 때 사용한다
kbd: 키보드입력값 의미 정의에 사용한다
sub: 아래첨자를 정의할때 사용한다
u: 텍스트에 밑줄을 나타낼때 사용한다
dfn: 정의형 목록의 용어를 의미한다
span: 인라인텍스트를 그룹화할 때 사용한다
br: 줄바꿈에 사용한다
wbr: 특정단어 단위로 줄바꿈 적용 시 사용한다

<p>
  <span
    >페이지를
    <a href="http://www.google.com" target="_blank">여기</a>
    를 눌러주세요
  </span>
</p>

포함 콘텐츠 요소

img: 이미지를 삽입할때 사용한다
iframe: 인라인 프레임을 삽입할 때 사용한다(외부 HTML 포함)
video: 비디오 콘텐츠 삽입에 사용한다
audio: 오디오 콘텐츠 삽입에 사용한다
source: 비디오/오디오 폴백 콘텐츠 삽입에 사용한다
canvas: 동적인 비트맵 이미지 삽입에 사용한다
svg: 벡터 기반의 이미지 삽입에 사용한다

<img src="./assets/downloads/image/helloworld.jpg" alt="다운로드 이미지" />

표 관련 요소

table: 테이블 삽입에 사용한다
caption: 테이블 캡션 정의에 사용한다
colgroup: 테이블 열 그룹에 사용한다
col: 열을 정의할때 사용한다
thead: 테이블의 제목행에 사용한다
tbody: 테이블의 본문행에 사용한다
tfoot: 테이블 푸터행에 사용한다
tr: 테이블 행 정의에 사용한다
th: 테이블 제목 셀 정의에 사용한다
td: 테이블 본문 셀 정의에 사용한다

<table>
  <caption>
    표제목
  </caption>
  <colgroup>
    <col style="background:#23232d" />
    <col style="background:#ff22dd" />
  </colgroup>
  <thead>
    <tr>
      <th>김무명</th>
      <th>이무명</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>100</td>
      <td>89</td>
    </tr>
    <tr>
      <td>81</td>
      <td>95</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>181 / 90.5</td>
      <td>184 / 92</td>
    </tr>
  </tfoot>
</table>

폼 관련 요소

form: 폼 서식이 포함될 영역을 마크업할때 사용한다
fieldset: 서로 연관있는 폼서식을 그룹화할때 사용한다
legend: FIELDSET 요소로 그룹화한 폼의 목적을 명시할때 사용한다
label: 폼 서식의 레이블을 정의할때 사용한다
input: 한줄 입력상자 정의에 사용한다(TEXT, NUMBER, RADIO 등…)
button: 전송 및 취소 등 버튼서식을 삽입할 때 사용한다
select: 리스트나 목록상자 정의에 사용한다
optgroup: 리스트나 목록상자 서식항목 그룹을 정의할 때 사용한다
option: 리스트나 목록상자 서식항목을 정의할때 사용한다
datalist: form 요소에서 미리 지정된 옵션 목록을 제공
textarea: 여러줄의 입력상자 삽입에 사용한다
progress: 진행률상황 표시에 사용한다

<div>
  <label for="job-list">직업</label>
  <select name="jobs" id="job-list">
    <option value="police">경찰</option>
    <option value="doctor">의사</option>
    <option value="singer">가수</option>
  </select>
  <label for="age">나이</label>
  <input type="number" id="age" min="10" max="200" />
</div>

마치며

블로그 글을 준비하기 위해 나름대로 자료조사도 하고 문서도 뒤적거리며 작성했지만 결과물(블로그글)이 생각보다 알차지 못한 것이(너무 기초중의 기초…ㅠㅠ) 많이 아쉬웠다
그리고 조사를 하며 알고 있던 부분보단 모르고 있는 부분이 아직도 많다는 것을 다시금 깨닫게 되었고, 알고 있던 지식이 잘못된(허술한) 지식이었던 부분들도 있어(이를테면 태그를 닫는 ’/’) 이러한 오류를 잡아내기 위해서라도 더 세심한 자료조사를 이어나가야 겠다는 생각이 들었다

참고자료

TCPSCHOOL
XAML or HTML
HTML 위키백과
웹표준 핵심가이드북2 HTML5_CSS3 완성