[HTML] HTML 마크업

HTML(HyperText Markup Language)은 웹을 이루는 기초적인 구성 요소이다. HTML은 웹 콘텐츠의 의미와 구조를 정의할 때 사용한다.

"Hypertext"란 웹 페이지를 다른 페이지로 연결하는 링크를 말한다. 링크는 웹의 근본적인 속성이다.

HTML은 웹 브라우저에 표시되는 글, 이미지 등의 다양한 컨텐츠를 표시하기 위해 "마크업"을 사용한다. <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <canvas>, <video> 등 처럼 수많은 "요소"를 사용한다.

HTML 마크업의 기초

태그 (tag)

태그는 시작 태그와 종료 태그로 나눈다. < 와 > 로 둘러 싸여있다.

기본 형식은 시작 태그의 경우 <tag> 의 형태르르 가지며, 종료 태그의 경우 </tag> 형태를 가진다.

일부 태그의 경우, 종료 태그를 가지지 않는 경우도 있는데, 이를 '빈 요소(empty element)' 라고 한다.
```
<p>HTML과 XHTML의 미래!<br>HTML5</p>
        
```
속성 (attribute)

시작 태그는 필요에 따라 속성을 가질 수 있으며, 사용할 수 있는 속성은 태그마다 다를 수 있다.

또한 시작 태그 내에 여러 개의 속성을 선언할 수 있는데, 이 경우 속성과 속성은 공백으로 구분하여 지정해야 한다.

속성에는 값을 가지지 않는 논리 속성도 있다.
```
<input type="text" id="user" required>

```
요소 (element)

시작 태그와 종료 태그 모두를 포함하여 '요소(element)'라고 한다.
```
<p>HTML과 XHTML의 미래! HTML5</p>

```

HTML5의 탄생

HTML5가 탄생하기 이전까지 당시 웹 표준화 기구인 W3C(World Wide Web Consortium)에서는 HTML5에 대한 계획이 없었다.

그러나 여러 불편함이 나오면서 W3C의 이러한 행보에 반기를 든 HTML 및 관련 기술들을 발전시키는데 관심이 있던 WHATWG(Web Hypertext Application Technology Working Group)가 탄생하게 되었다. WHATWG는 2004년 애플, 모질라 재단, 오페라 소프트웨어가 공동 설립한 공개 그룹으로 HTML을 개발하기로 결정하면서 W3C가 이를 대부분 수용하여 HTML5가 탄생하게 된다.

초기의 웹은 웹 표준 기술이 지원하지 못하고, 여러 플러그인들이 대신해 호환성 문제가 많이 발생하였다. 그 결과 개발자에게는 개발의 어려움이, 사용자에게는 웹 브라우저 선택 제한과 각종 플러그인의 설치 등 불편함을 주었다.

이러한 문제점들을 HTML5에서 샐보게 추가된 요소와 다양한 API들을 통해 발전된 웹 구현과 접근성 및 호환성 극대화를 목표로 삼게 된다.

HTML4.01, XHTML1.0과 HTML5의 차이점

1. 콘텐츠 모델(Content Models)

기존 HTML 기반의 마크업에서는 일반적으로 인라인 요소(Inline Element)와 블록요소(Block Level Element)로 구분되는 정도였지만, HTML5에서는 좀 더 명확한 정보 구조 설계 및 구성을 우해 카태고리를 정의하여 각 요소별로 비슷한 성격끼리 그룹화하였다.

이를 HTML5의 콘텐츠 모델(Content Models)이라 한다.

특히 HTML5에 추가된 콘텐츠 모델이란,

'어떤 요소에 어떤 콘텐츠를 포함해야 하는지',
'어떤 요소가 아던 요소를 포함할 수 있는지' 를 정의한 것이다.

이 콘텐츠 모델이라는 개념을 통해 자식요소로 포함할 수 있는 카테고리를 제한해 두었으며, 이와 반대로 자식 요소가 작성될 수 있는 카테고리에도 제한을 두었다.

이런 HTML5의 콘텐츠 모델은 "구조"와 "구성"을 중시하는 마크업으로 진화했다는 점을 이해해야 한다.

섹셔닝 루트(Sectioning Root)

<blockquote>, <body>, <fieldset>, <figure>, <td>

섹셔닝 루트에 속하는 요소는 장이나 절과 같은 계층 구조로 구분되지 않고, 독립적인 콘텐츠로 분리되기 때문에 아웃라인에 영향을 주지 않는다.

메타데이터 콘텐츠(Metadata Content)

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

문서의 정보를 포함하는 메타데이터, 스타일 표현을 위한 style 요소, 행동을 설정하는 script 요소들을 나타낸다.

기본적인 웹 브라우저에 직접 표시되지 않으며, 문서(document)와 문서 간의 관계를 설정한다.

플로우 콘텐츠(Flow Content)

<a>, <abbr>, <address>, <area>(<map> 요소의 자손인 경우), <article>, <aside>, 
<audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, 
<code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, 
<dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, 
<h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, 
<ins>, <kbd>, <keygen>, <label>, <main>, <map>, <mark>, <math>, <meter>, 
<nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, 
<strong>, <style>(scoped 속성이 있는 경우) <sub>, <sup>, <svg>, <table>, 
<textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>

HTML5의 콘텐츠 모델 관계도에 표시한 것과 같이 메타데이터 콘텐츠 요소 중 일부를 제외하고 문서 본문에 해당하는 body 요소에 들어가는 대부분의 요소들이 플로우 콘텐츠 모델에 속하며,

이 중에서 area, link, meta, style 요소는 조건부로 플로우 콘텐츠가 된다.

섹셔닝 콘텐츠(Sectioning Content)

<aritcle>, <aside>, <nav>, <section>

대부분 HTML5에 새롭게 추가된 요소들이며, 제목과 그 내용을 포함한 범위를 지정하는 콘텐츠를 나타낸다.

모든 섹셔닝 콘텐츠는 헤딩과 아웃라인을 가진다.

헤딩 콘텐츠(Heading Content)

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>

섹션의 제목을 나타낸다. 문서의 아웃라인을 고려하여 사용해야 한다.

프레이징 콘텐츠(Phrasing Content)

<a>, <abbr>, <area>(<map> 요소의 자손인 경우), <audio>, <b>, <bdi>, <bdo>, <br>, 
<button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <dfn>, <em>, 
<embed>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <keygen>, <label>, 
<map>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, 
<q>, <ruby>, <s>, <samp>, <script>, <select>, <small>, <span>, <strong>, 
 <sub>, <sup>, <svg>, <textarea>, <time>, <u>, <var>, <video>, <wbr>

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

프레이징 콘텐츠가 모여 문단을 구성한다. a 요소같은 일부 요소들은 콘텐츠로 다른 요소를 포함하지 않는다는 전제하에 조건부로 프레이징 콘텐츠가 되기도 한다.

프레이징 콘텐츠로 분류되는 요소의 대부분은 플로우 콘텐츠 전체를 포함할 수 없으며(플로우 콘텐츠를 태그안에 넣을 수 없다.) 프레이징 콘텐츠로 분류된 요소만 포함할 수 있다.

또한 프레이징 콘텐츠는 텍스트 이외에 임베디드 콘텐츠를 포함할 수 있다.

임베디드 콘텐츠(Embedded Content)

<audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>

임베디드는 '포함된'이란 뜻을 가지며, 문서 안에 외부 자원('외부 리소스'라고 불리기도 함) 또는 HTML이 아닌 다른 언어로 표현되는 콘텐츠를 말한다.

외부 자원에는 이미지, 동영상, 플러그인, 아이프레임 콘텐츠 등이 있고, 다른 언어로 된 콘텐츠에는 수학 공식을 표현하는 MathML과 SVG 등이 있다.

인터렉티브 콘텐츠(Interactive Content)

<a>, <audio>(controls 속성이 있는 경우),<button>, <details>, <embed>, <iframe>, 
<img>(usemap 속성이 있는 경우), <input>(type 속성이 hidden이 아닌 경우), <keygen>, 
<label>, <object>(usemap 속성이 있는 경우), <select>, <textarea>, 
<video>(controls 속성이 있는 경우)

사용자가 어떤 기능을 조작할 수 있는 (상호작용) 콘텐츠를 말한다.

팰퍼블 콘텐츠(Palpable Content)

<a>, <abbr>, <address>, <article>, <aside>, <audio>(controls 속성이 있는 경우), 
<base-img>, <bdi>, <bdo>, <blockquote>, <button>, <canvas>, <cite>, <code>, 
<data>, <details>, <dfn>, <div>, <embed>, <form>, <fieldset>, <figure>, 
<dl>(dl 요소의 자식 요소로 하나 이상의 이름과 값으로 구성되어 있는 경우), <em>, <footer>, 
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <i>, <iframe>, <img>, 
<input>(hidden 속성 값이 아닌 경우), <ins>, <kbd>, <keygen>, <label>, <main>, 
<map>, <mark>, <math>, <menu>(toolbar 속성이 있는 경우), <meter>, <nav>, <object>, 
<ol>(자식 요소로 하나 이상의 li 요소를 포함한 경우), <output>, <p>, <pre>, <progress>,
<q>, <ruby>, <s>, <samp>, <section>, <select>, <small>, <span>, <strong>, 
<sub>, <sup>, <svg>, <table>, <textarea>, <time>, <u>, <var>, <video>, <span>,
<ul>(자식 요소로 하나 이상의 li 요소를 포함한 경우)

기존 콘텐츠 모델에 새롭게 추가된 개념으로 구체적으로 보여지고 이해할 수 있는 콘텐츠 요소를 말한다.

최소한 하나 이상의 요소가 존재해야 하며, 이 때 해당 요소는 숨김 상태여서는 안된다.

스크립트 지원 요소(Script-suporting Elements)

<script>

요소 자체가 어떤 정보를 표현하지는 않지만 사용자에 대한 기능 등에 해당하는 스크립트를 지원하는데 사용된다.

트랜스 패어런트 콘텐츠(Transparent Content)

<table>, <audio>, <canvas>, <del>, <ins>, <map>, <noscript>, <object>, <video>

모든 요소는 콘텐츠 모델을 가지지만, 카테고리에 속하지 않은 경우도 있다. 이러한 요소들을 '트랜스 패어런트'라고 한다.

트랜스 패어런트 콘텐츠 요소와 그 안에 담긴 콘텐츠를 바꾸어 마크업해도 HTML5 문법에 오류가 없다는 것을 의미한다.

콘텐츠 카테고리 MDN

2. 아웃라인 알고리즘(Outline Algorithm)

HTML5에서는 정보 구조를 명확히 할 수 있도록 '아웃라인 알고리즘' 개념이 도입되었다.

웹 페이지의 정보 구조를 판별할 수 있는 개념. 책의 목차와 비슷하다.

HTML5에서 추가된 많은 요소들은 대부분 아웃라인 알고리즘과 관련이 있다.

그 중에도 직접적으로 아웃라인을 구성하는 요소에는 헤딩 콘텐츠, 섹셔닝 콘텐츠 그리고 섹셔닝 루트 요소 등이 있다.

HTML5의 아웃라인 구성은 W3C Markup Validation Service에서 확인할 수 있다.

기존 HTML4.01이나 XHTML1.0에서 사용된던 div 요소로만 콘텐츠를 그룹핑하여 의미를 부여했을 경우의 아웃라인.

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="utf-8">
    <title>div 요소를 사용한 문서의 아웃라인</title>
  </head>
  <body>
    <div id="wrapper">
      <div id="header">
        <h1>HTML5</h1>
      </div>
      <div class="gnb">
        <h1>메인 메뉴</h1>
        <ul>
          <li><a href="#">콘텐츠 모델</a></li>
          <li><a href="#">아웃라인 알고리즘</a></li>          
        </ul>
      </div>
      <div id="main">
        <div class="section">
          <h1>콘텐츠 모델 이란?</h1>
          <p>어떤 요소에 어떤 콘텐츠를 포함해야 하는지 또 어떤 요소가 어떤 요소를 포함할 수 있는지를 정의한 것을 말한다.</p>
        </div>
        <div class="section">
          <h1>메타데이터 콘텐츠</h1>
          <p>Metadata 콘텐츠는 다른 콘텐츠의 표현과 행동을 설정하거나 문서와 문서의 관계를 설정할 때 사용한다.</p>
        </div>
        <div class="article">
          <h1>플로우 콘텐츠</h1>
          <p>Flow 콘텐ㄴ츠는 웹 페이지상에 직접 표시되지 않는 일부 메타데이터를 제외하고 거의 모든 요소들이 이 그룹에 속한다.</p>
        </div>
      </div>
      <div id="footer">
        <p>Copyright &cpopy; webCafe</p>
      </div>
    </div>
  </body>
</html>

HTML5
메인 메뉴
콘텐츠 모델 이란?
콘텐츠 모델의 분류
메타데이터 콘텐츠
플로우 콘텐츠

header, nav, section, article 등과 같이 아웃라인에 영향을 미치는 섹셔닝 요소 사용하여 콘텐츠를 구성한 후 아웃라인을 확인해보자.

<!DOCTYPE html>
<html lang="ko-KR">
<head>
  <meta charset="utf-8">
  <title>div 요소를 사용한 문서의 아웃라인</title>
</head>
<body>
  <div id="wrapper">
    <div id="header">
      <div class="branding">
        <h1>HTML5</h1>
      </div>
      <div class="gnb">
        <h1>메인 메뉴</h1>
        <ul>
          <li><a href="#">콘텐츠 모델</a></li>
          <li><a href="#">아웃라인 알고리즘</a></li>
        </ul>
      </div>
    </div>
    <div id="main">
      <div class="section">
        <h1>콘텐츠 모델 이란?</h1>
        <p>어떤 요소에 어떤 콘텐츠를 포함해야 하는지 또 어떤 요소가 어떤 요소를 포함할 수 
         있는지를 정의한 것을 말합니다.</p>
      </div>
      <div class="section">
        <h1>콘텐츠 모델의 분류</h1>
        <div class"article">
          <h1>메타데이터 콘텐츠</h1>
          <p>Metadata 콘텐츠는 다른 콘텐츠의 표현과 행동을 설정하거나 문서와 문서의 
           관계를 설정할 때 사용합니다.</p>
        </div>
        <div class="article">
          <h1>플로우 콘텐츠</h1>
          <p>Flow 콘텐츠는 웹 페이지상에 직접 표시되지 않는 일부 메타데이터를 
           제외하고 거의 모든 요소들이 이 그룹에 속합니다.</p>
        </div>
      </div>
    </div>
    <div id="footer">
      <p>Copyright &copy; webCafe</p>
    </div>
  </div>
</body>
</html>

HTML5 Outliner 사이트에 확인한 아웃라인 구성 결과를 살펴보면,
제목을 같은 h1 요소로 마크업 했지만 해당 제목 요소의 구성이 포함된 섹셔닝 요소에 따라 달라진 것을 확인할 수 있다.
1. HTML5
  1. 메인메뉴
  2. 콘텐츠 모델 이란?
  3. 콘텐츠 모델의 분류
    1. 메타데이터 콘텐츠
    2. 플로우 콘텐츠

sesction이나 article 등의 요소로 콘텐츠를 구분하지 않고 div 요소만 사용했을 경우, 제목인 h1요소는 모두 같은 계층으로 구성됨을 알 수 있다.

HTML5에 추가된 섹셔닝 요소들은 제목 관련 요소와 함께 아웃라인을 구성하는 중요한 요소로 사용된다.

3. 다양한 API의 추가

API란, (Application Programming Interface)로 프로그램을 개발할 때 필요한 기본 기능을 말한다.

새로운 프로그램을 만들 때 사용하는 프로그래밍 언어 차원에서 제공되거나 프로그램이 구동되는 환경을 의미하는 플랫폼에서 만들어져 제공되며 개발자는 API를 활용해서 실제 필요로 하는 기능을 만들 수 있다.

오프라인 웹 구현을 위한 API

오프라인에서 동작할 수 있는 웹 기능을 구현하기 위한 API. Web Storage, Web SQL Database, IndexedDB, Application Cache 등의 API가 추가되었다.

Web Storage : 브라우저에 데이터를 저장하기 위한 공간. 쿠키와 비교했을 때 크기 제한과 유효기간이 없고, 데이터가 서버로 전송되지 않으며, JS 객체를 저장할 수 있다는 장점이 있다.
Web SQL Database/Indexed Database : 클라이언트(웹 브라우저)에서 관리되는 데이터베이스를 제어할 수 있는 API로 구성되어 있다.
Application Cache : 웹 애플리케이션을 오프라인에서 사용하는데 필요한 리소스(HTML, CSS, JS 이미지 등)를 클라이언트 쪽에 캐시하기 위한 기능으로, 이를 활용하면 리소스가 로컬에 캐시된 상태에서 웹브라우저가 네트워크에 접속하지 않고 캐시된 리소스를 이용할 수 있다.

실시간 커뮤니케이션 API

Web Worker : 메인 스레드(UI)와 독립적인 백그라운드 프로세스로 처리되는 스크립트를 말하며, 이를 활용하면 웹브라우저 내에서 자바스크립트로 멀티스레드 프로그램을 구현할 수 있다.
Web Socket : 웹 브라우저와 서버 간 양방향 전이중 통신(Full Duplex)을 구현한 Web Socket 프로토콜을 이용할 수 있는 API이다.
Notifications : 운영 체제에 독립적인 플랫폼 수준의 알림 메시지를 보여주는 API이다.

파일/하드웨어 접근 API

웹 브라우저에서 로콜 저장 장치 간 파일을 주고받을 수 있는 API와 웹 브라우저가 설치된 단말기의 하드웨어에 접근할 수 있는 API이다.

File API(Desktop Drag-In, Desktop Drag-out) : File API를 이용하면 로컬 파일 시스템과 웹 브라우저 간에 파일을 주고받을 수 있다.
Geolocation : 웹 브라우저가 설치되어 있는 단말기(데스크톱, 스마트폰 등)의 GPS 장치를 구동하여 현재 위치 정보를 받아오는 기능.
Device Orientation : 단말기의 센서를 이용하여 현재 방향과 기울기가 같은 정보를 구할 수 있다.
Speech Input : 단말기의 마이크로폰을 이용하여 음성을 입력받은 후 이를 문자로 바꿔주는 새로운 입력방식이다.

GUI를 위한 API

Drag & Drop : HTMl4.01에서는 Drag & Drop을 구현하기 위해 직접 자바스크립트로 개발하거나 UI 관련 자바스크립트 라이브러리를 이용해야 했지만, HTML5에서는 Drag & Drop API를 이용해 쉽게 구현 가능하다.

HTML5의 서식

HTML5는 HTML4.01이나 XHTML1.0 문법을 모두 허용하기 때문에 기존에 사용하던 마크업 문법을 그대로 사용가능하다.

HTML5문서에서 사용할 수 있는 서식을 보자.

종료 태그의 처리

HTML5에서 종료 태그를 생략하는 것이 가능하더라도 시작과 종료 태그를 정확히 명시하여 정형식(well-formed) 구조로 마크업할 것을 권장한다.

<p><img src="images/back.gif" alt="뒤로">				<!-- O -->
<p><img src="images/back.gif" alt="뒤로" /></p>	<!-- O -->

대소문자의 사용

소문자로 사용할 것을 권장한다.

<P><IMG SRC="images/back.gif" ALT="뒤로"></P>      <!-- O -->
  <p><img src="images/back.gif" alt="뒤로" /></p>  <!-- O -->

빈 요소(Empty Element)

HTML에서 meta, link, img, br, input 등 종료 태그를 가지고 있지 않은 요소를 "빈 요소(Empty Element)"라고 한다. 기존 HTML4.01에서는 <img> 형식으로, XHTML1.0에서는 <img /> 형식으로 선언해야 하며,

HTML5에서는 두 가지 방식 모두 혀용한다.

<img src="images/back.gif" alt="뒤로">        <!-- O -->
<img src="images/back.gif" alt="뒤로" />      <!-- O -->

속성(attribute)과 값(value)

논리 속성의 경우 속성값을 지정 또는 생략 가능하다.

<select multiple></select>                <!-- O -->
<select multiple="multiple"></select>     <!-- O -->

속성 값은 인용 부호를 생략하거나 홀따옴표와 겹따옴표 등으로 구분할 수 있다.

<img src="images/back.gif" alt=뒤로>        <!-- O -->
<img src='images/back.gif' alt='뒤로'>      <!-- O -->
<img src="images/back.gif" alt="뒤로">      <!-- O -->

잘못된 중첩 사용 불가능

시작 태그와 종료 태그의 중첩에 문제가 발생하지 않도록 한다.

<p><strong>HTML5와 CSS3를 배웁시다.</strong></p>    <!-- O -->
<strong><p>HTML5와 CSS3를 배웁시다.</p></strong>    <!-- X -->

속성의 중복 사용 불가능

시작태그에 동일한 속성을 중복하여 선언할 수 없다.

<p style="color: red;" style="background: yellow">HTML5</p>    <!-- X -->
<p style="color: red; background: yellow">HTML5</p>            <!-- O -->

문서형 정의(DOCTYPE)

HTML4.01이나 XHTML1.0에서는 HTML 문서의 첫 줄에 문서형 선언을 기술했다. 이러한 문서형 선언은 해당 HTML 문서의 버전과 문서 타입을 명시했으나,

HTML5에서는 문서 버전 및 문서 타입이 생략된 간소화된 형식을 가졌다.

모든 웹 브라우저에서 표준 모드(Standards Mode)로 렌더링될 수 있도록 하는 역할만 담당하기 때문이다.

유효성 검사(Markup Validation)

W3C 에서 제공하는 Markup Validation Service도 HTML5 문서의 유효성 여부를 검사할 수 있다.

이때 HTML5문서의 유효성 검사는 기존 HTML 문서 형식과 달리 콘텐츠 모델에 따라 카테고리별로 포함할 수 없는 요소를 사용했는지의 여부까지 함께 확인 가능하다.

W3C Markup Validation Service

HTML 문서의 기본 구조

모든 HTML 문서는 기본적으로 다음과 같은 구조를 가진다.

<!DOCTYPE html>
<!-- HTML 문서의 시작 -->
<html lang="ko-KR">
<!-- head 요소의 시작 -->
<head>
  <!-- 문자 인코딩 선언 -->
  <meta charest="utf-8">
  <!-- title 요소의 시작 -->
  <title>문서 제목</title>
  <!-- title 요소의 종료 -->
</head>
<!-- head 요소의 종료 -->
  
<!-- body 요소의 시작 -->
<body>
  본문
</body>
<!-- body 요소의 종료 -->
</html>
<!--HTML 문서의 종료 -->

DTD 선언

웹 페이지를 제작할 때 사용할 문서형 정의를 선언.

마크업 문서를 작성할 때는 반드시 문서의 첫머리에 문서형 정의(DTD: Document Type Definition)를 선언해야 한다.

간혹 마크업 문서에 문서형 정의를 생략하는 경우가 있는데, 이것은 웹브라우저가 표준모드가 아니라 *호환모드(quirks mode)로 렌더링 되어 크로스 브라우징 환경에서 각각의 문서가 다르게 표현되는 원인이기도 하다.

HTML5의 경우 DTD 선언은 표준모드로 *렌더링 되도록 하기 위한 역할만 담당한다.

*호환모드(Quirks Mode) :

웹 브라우저가 점점 표준에 맞게 개선되면서 이전의 오래된 웹페이지들을 정상적으로 보여주기 위해 최신 버전 브라우저에 제공하는 모드를 말한다. 다시 말해 호환모드는 웹 페이지의 하위 호환성을 유지하기 위해 W3C나 IETF의 표준을 엄격히 준수하는 표준모드(Standards Mode)를 대신하여 사용하는 웹브라우저의 기술을 말한다. 이 모드에서는 같은 코드라도 웹브라우저마다 서로 다르게 해석하기 때문에 전혀 다른 결과물을 보여주기도 한다.

*렌더링(Rendering)

서버로부터 넘겨받은 HTML 코드는 웹브라우저에 읽어온 후 화면에 시각적으로 표시하는데 이 과정을 '렌더링'이라 한다.

`<html>` ~ `</html>`

모든 웹 페이지의 콘텐츠는 <html> 태그와 </html> 태그 안에 선언해야 하며, <html> ~ </html> 태그는 웹 페이지의 시작과 종료를 의미한다.

이때 시작 태그인 <html> 에 lang 속성을 사용하여 기본 언어를 지정할 수 있다.

기본언어 명시는 사용하는 언어를 HTML 문서에 선언하여 (X)HTML을 해셕할 수 있는 소프트웨어들이 올바르게 동작하도록 하는 것을 의미한다. 이는 스크린리더리가 어떤 언어로 읽을 건인지 도와주며 특히 검색엔진의 경우 사용자 언어와 일치하는 검색결과를 제시할 수 있기 때문에 원하는 정보에 더 근접해서 검색할 수 있다.

`<head>` ~ `</head>`

HTML 문서는 머리부분과 본문부분으로 나눌 수 있는데,

머리 영역의 시작은 <head> 태그로, 종료는 </head>태그로 선언해야 한다. <head> 태그 안에 <meta> 태그를 사용하여 문서의 일반적인 정보와 문자 인코딩을 명시 할 수있다.

또한 <title> 태그로 문서의 제목을 지정할 수 있다. 명시된 문서 제목은 기본적으로 북마크(즐겨찾기) 시 북마크 이름을 사용된다.

`<body>` ~ `</body>`

body요소는 HTML 문서의 본문 부분에 해당하며, 웹브라우저 화면에 나타나는 모든 콘텐츠는 <body> 태그와</body>태그 사이에 선언해야 한다.

Reference

https://m.post.naver.com/viewer/postView.nhn?volumeNo=12949118&memberNo=1378210

https://seulbinim.github.io/WSA/html-basic.html#%EB%A7%88%ED%81%AC%EC%97%85-%EC%96%B8%EC%96%B4%EC%9D%98-%EB%B6%84%EB%A5%98

저작자표시 비영리 동일조건

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

[HTML] abbr acronym (0)	2021.12.23
[HTML] HTML 그룹화 관련 요소 (0)	2020.10.22
[HTML] Meta Tags 메타태그 (1)	2020.05.26
[HTML5] form요소만들기 (0)	2020.03.18
[HTML5] form작성(MDN) (0)	2020.03.13

/* jmjmjm */

[HTML] HTML 마크업

[HTML] HTML 마크업

HTML 마크업의 기초

HTML5의 탄생

HTML4.01, XHTML1.0과 HTML5의 차이점

1. 콘텐츠 모델(Content Models)

2. 아웃라인 알고리즘(Outline Algorithm)

3. 다양한 API의 추가

오프라인 웹 구현을 위한 API

실시간 커뮤니케이션 API

파일/하드웨어 접근 API

GUI를 위한 API

HTML5의 서식

종료 태그의 처리

대소문자의 사용

빈 요소(Empty Element)

속성(attribute)과 값(value)

잘못된 중첩 사용 불가능

속성의 중복 사용 불가능

문서형 정의(DOCTYPE)

유효성 검사(Markup Validation)

HTML 문서의 기본 구조

DTD 선언

`<html>` ~ `</html>`

`<head>` ~ `</head>`

`<body>` ~ `</body>`

Reference

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 마크업

[HTML] HTML 마크업

HTML 마크업의 기초

HTML5의 탄생

HTML4.01, XHTML1.0과 HTML5의 차이점

1. 콘텐츠 모델(Content Models)

2. 아웃라인 알고리즘(Outline Algorithm)

3. 다양한 API의 추가

오프라인 웹 구현을 위한 API

실시간 커뮤니케이션 API

파일/하드웨어 접근 API

GUI를 위한 API

HTML5의 서식

종료 태그의 처리

대소문자의 사용

빈 요소(Empty Element)

속성(attribute)과 값(value)

잘못된 중첩 사용 불가능

속성의 중복 사용 불가능

문서형 정의(DOCTYPE)

유효성 검사(Markup Validation)

HTML 문서의 기본 구조

DTD 선언

<html> ~ </html>

<head> ~ </head>

<body> ~ </body>

Reference

'👩🏻‍💻STUDY > HTML' 카테고리의 다른 글

'👩🏻‍💻STUDY/HTML' Related Articles

티스토리툴바

`<html>` ~ `</html>`

`<head>` ~ `</head>`

`<body>` ~ `</body>`