HTML5 태그 및 기본 구조

HTML5 개발 과정과 HTML5의 의미있는 요소들에 대해 알아보고 HTML5 태그로 레이아웃을 구성하는 방법에 대해 알고자 HTML5 태그 및 기본 구조를 작성했다.

주의사항
1. HTML5는 개발중이기 때문에 태그가 추가되거나 역할이 변경되거나 삭제될 수 있다.
2. 웹상의 정보를 종합해서 작성했기 때문에 사실과 다른 정보가 있을 수도 있다.

목차

1. HTML5 개발 역사
2. HTML5 Semantic Element
3. HTML5 Semantic Element Layout
4. HTML5 Multimedia Element
5. HTML5 Form Element
6. HTML5 Resource Element
7. HTML5에서 용도가 변경된 요소
8. HTML5에서 삭제된 요소

HTML5 개발 역사

2004년 W3C(World Wide Web Consortium) 워크숍에서 모질라 재단과 오페라 소프트웨어가 발표한 차기 HTML 개발 초안에 대한 투표가 부결되자 워크숍이 종료된 직후 애플, 모질라 재단, 오페라 소프트웨어에 소속된 개인들이 WHATWG(Web Hypertext Application Technology Working Group)을 설립했다. WHATWG는 W3C의 XHTML 표준안 개발이 지지부진하고, HTML 표준안 개발을 소홀히 하고, 웹 개발자들의 요구에 대한 무시하는 등 다양한 문제들을 해결하기 위한 커뮤니티로 “2004년 W3C 워크숍에서 발표된 차기 HTML 개발 초안”을 기반으로 HTML5 표준안 개발을 시작했다. 2006년 W3C가 HTML5 개발에 관심을 표명하자 2007년 4월 WHATWG가 W3C에 HTML5 채택을 제안했고, 2007년 5월 W3C가 HTML5를 채택하면서 WHATWG와 함께 작업할 HTML 그룹을 신설했다. 2008년 1월 WHATWG에서 HTML 표준안 초안을 제작했고, W3C가 HTML5 표준안 초안을 공개했다. 이후 두 그룹은 수년간 HTML5 표준안 개발에 협력했지만 결국 개발 프로세스에 대한 서로 간의 견해를 좁히지 못하고 2011년부터 독자적으로 HTML5 표준안 개발을 시작했다. 2014년 10월 W3C는 WHATWG의 HTML5 표준안 최종 초안을 공개했다. 2017년 애플, 구글, 마이크로소프트, 모질라가 WHATWG의 정책을 감독하기 위한 그룹을 결성했다. 2019년 5월 W3C는 두 가지 표준안이 공존할 수 없음을 인식하고 HTML 표준안과 DOM 표준안에 대한 권한을 WHATWG에 양도했고, WHATWG의 HTML5 표준안 개발에 참여하기로 합의했다.

HTML5 Semantic Element

○ <header>

(1) 의미: 콘텐츠의 소개를 정의하는 block 태그이다.
(2) 작성: <header></header>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 포함: 하나 이상의 제목 요소 <h1> – <h6>를 포함해야 하고, 로고 또는 아이콘을 포함할 수 있다.
(5) 배치: 하나의 문서에 여러 개의 <header>를 배치할 수 있다. 문서의 도입부, <main>의 도입부, <section>의 도입부, <aside>의 도입부, <article>의 도입부
(6) 배치 불가: <footer>, <adress>, <header> 내에 <header>이 또 배치될 수 없다.
(7) 예시

<header>
  <figure>
    <img
      src="https://blog.tommyzip.co.kr/logo.png"
      alt="TOMMYZIP logo">
  </figure>
  <h1>전체 문서에 대한 제목</h1>
</header>
...
<section>
  <header>
    <h2>섹션에 대한 제목</h2>
    <p>섹션 제목 부가 설명</p>
  </header>
  <article>
    <header>
      <h3>글 제목</h3>
      <p>어제 작성된 글, <time datetime="2020-05-15">2020년 5월 15일</time> by TOMMYZIP</p>
    </header>
    <p>글 내용</p>
  </article>
</section>

○ <footer>

(1) 의미: 콘텐츠의 바닥글을 정의하는 block 태그이다.
(2) 작성: <footer></footer>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 포함: 저작권 정보, 연락처, 사이트맵, 맨 위로 링크, 관련 문서를 포함할 수 있다.
(5) 배치: 하나의 문서에 여러 개의 <footer>를 배치할 수 있다. 문서의 종결부, <main>의 종결부, <section>의 종결부, <aside>의 종결부, <article>의 종결부
(6) 예시

<footer>
  <nav>
    <a href="/about">About Us</a> |
    <a href=" /privacy-policy">Privacy Policy</a> |
    <a href="https://www.example.com/careers" rel="nofollow">Careers</a>
  </nav>
  <adress>
    이메일: <a href="mailto:examp@example.com">examp@example.com</a><br>
    연락처: <a href="tel:+1112223333">(111) 222-3333</a><br>
    대한민국 부산 해운대구 바닷가아파트 111층
  </adress>
  <p>© 2020 TOMMYZIP all rights reserved.</p>
</footer>

○ <nav>

(1) 의미: HTML 문서 사이를 탐색할 수 있는 링크 집합을 정의하는 block 태그이다.
(2) 작성: <nav></nav>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 배치: 문서의 메인 내비게이션 메뉴 또는 현재 문서 위치를 알려주는 내비게이션 메뉴 등으로 사용한다. 하나의 문서에 여러 개의 <nav>를 배치할 수 있다. <header> 내외부, <aside> 내부, <footer> 내부
(5) 참고: <nav>내에 <a>가 바로 위치해도 되고, <ul> 또는 <ol> 무리가 위치해도 된다.
(6) 예시

<nav class="crumbs">
  <ol>
    <li class="crumb"><a href="home">홈</a></li>
    <li class="crumb"><a href="home/blog">블로그</a></li>
    <li class="crumb">블로그 글 작성 방법</li>
  </ol>
</nav>
<h1>블로그 글 작성 방법</h1>
<p>블로그 글 작성 방법 내용</p>

○ <main>

(1) 의미: HTML 문서의 주요 내용을 정의하는 block 태그이다.
(2) 작성: <main></main>
(3) 호환성: Internet Explorer에서 사용할 수 없다.
(4) 포함 불가: 사이드바, 탐색 링크, 저작권 정보, 사이트 로고, 검색 폼 등 같은 문서에 반복되는 콘텐츠를 포함하면 안 된다.
(5) 배치 불가: HTML 문서에 고유한 항목이어야 한다. HTML 문서에 둘 이상의 <main>이 없어야 하고, <article>, <aside>, <footer>, <header>, <nav>의 하위 요소로 배치하면 안 된다.
(6) 예시

<main>
  <h2>분야별 핵심기사 모음</h2>
  <p>오늘 공개된 핵심 기사 모음입니다.</p>
  
  <article>
    <h3>사회 분야</h3>
    <p>… </p>
    <p>... </p>
    <p>... </p>
  </article>
  <article>
    <h3>과학 분야</h3>
    <p>… </p>
    <p>... </p>
    <p>... </p>
  </article>
</main>

○ <section>

(1) 의미: HTML 문서 내 독립적인 섹션 부분을 정의하는 block 태그로 HTML 문서의 전반적인 내용과 논리적으로 관련이 있는 콘텐츠들의 집합이다.
(2) 작성: <section></section>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 포함: 각각의 section을 식별할 수단으로 <h1> -<h6>을 포함하지만 절대적인 것은 아니다.
(5) 배치: HTML 문서 내 여러 개의 <section>을 가질 수 있다. <section>이 여러 개의 <section>을 가질 수 있다. <section>이 중첩된 경우 안쪽 요소는 바깥쪽 요소와 관련된 내용을 담고 있음을 의미한다.
(6) 참고: HTML 문서의 전체적인 콘텐츠와 구분되거나 외부와 구분해서 단독으로 묶는 것이 낫다면 <article>을 사용하는 게 나을 수 있다. 그리고 단순한 스타일링이 목적이라면 <div>를 사용해야 한다.
(7) 예시

<section>
  <h2>섹션입니다.</h2>
  <p>… </p>
</section>

○ <article>

(1) 의미: HTML 문서 내 독립적인 콘텐츠를 정의하는 block 태그로 그 내용 자체만으로 이해가 되어야 하고 다른 요소의 내용과 구분되어야 한다. 블로그 포스트, 게시물, 뉴스 기사로 사용할 수 있다.
(2) 작성: <article></article>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 포함: 각각의 article를 식별할 수단으로 <h1> -<h6>을 포함해야 한다.
(5) 배치: HTML 문서 내 여러 개의 <article>를 가질 수 있다. 각 <article>이 여러 개의 <article> 또는 여러 개의 <section>을 가질 수 있다. <article>가 중첩된 경우 안쪽 요소는 바깥쪽 요소와 관련된 글을 나타낸다.
(6) 속성: <address>의 작성 일자와 시간은 <time>의 datetime 속성을 이용해서 설명해야 한다.
(7) 참고: <article>의 작성자 정보는 <address>를 이용해서 제공할 수 있지만, 중첩 <address>에는 적용하면 안 된다.
(8) 예시

<article class="film_review">
  <header>
    <h2>영화 리뷰</h2>
  </header>
  <section class="main_review">
    <p>인터스텔라</p>
  </section>
  <section class="user_reviews">
    <article class="user_review">
      <p>아주 감명깊은 영화입니다.</p>
      <footer>
        <p>
          작성 <time datetime="2020-05-16 19:00">2020년 5월 16일</time> by 철수
        </p>
      </footer>
    </article>
    <article class="user_review">
      <p>CG효과가 엄청나요.</p>
      <footer>
        <p>
          작성 <time datetime="2020-05-17 19:00">2020년 5월 17일 </time> by 영희
        </p>
      </footer>
    </article>
  </section>
  <footer>
    <p>
      작성 <time datetime="2020-05-20 19:00">2020년 5월 20일 </time> by 민수
    </p>
  </footer>
</article>

○ <aside>

(1) 의미: HTML 문서의 주요 내용과 간접적으로 연관된 부분을 정의하는 block 태그로 일반적으로 사이드 바 또는 콜아웃 박스를 나타낸다.
(2) 작성: <aside></aside>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 참고: 괄호로 묶는 텍스트의 경우 문서의 주요 내용에 포함되어야 하므로 <aside>를 사용하면 안 된다.
(5) 예시

<article>
  <p>
    아카데미 후보에 오른 <em>겟 아웃</em>은
    2017년 처음 개봉했습니다.
  </p>
  <aside>
    갯 아웃은 마케팅비로 7700만 달러를 사용했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

○ <details>

(1) 의미: “사용자 요청에 따라 열고 닫을 수 있는 추가 세부 사항을 보여주는 위젯”의 생성을 정의하는 block 태그이다. 열림 상태일 때만 추가 세부 사항을 보여준다.
(2) 작성: <details></details>
(3) 작동: 기본적으로 위젯은 닫혀있고, 열면 콘텐츠가 확장되면서 추가 세부 사항이 표시된다.
(4) 호환성: Internet Explorer에서 사용할 수 없다.
(5) 포함: 모든 종류의 콘텐츠를 넣을 수 있다.
(6) 예시
<details> 내 <summary>만 보이고, <summary>를 클릭하면 세부 내용이 보인다.

<details>
    <summary>세부내용</summary>
    세부내용은 이러이러합니다.
</details>

○ <summary>

(1) 의미: <details>의 제목을 정의하는 block 태그이다.
(2) 작성: <summary></summary>
(3) 호환성: Internet Explorer에서 사용할 수 없다. (단, <summary>를 지원하는 브라우저에서도 display: list-item와 함께 사용할 수 없다)
(4) 배치: <summary>는 <details>의 첫 번째 하위 요소로 배치해야 한다.
(5) 예시

<details>
    <summary>열쇠는 있지만 문은 없습니다. 공간은 있지만 공간은 없습니다. 들어갈 수는 있지만 떠날 수는 없습니다. 이것은 무엇입니까?</summary>
    키보드
</details>

○ <mark>

(1) 의미: 표시된 텍스트를 정의하는 inline 태그로 텍스트의 일부를 강조할 때 사용한다.
(2) 작성: <mark></mark>
(3) 기본값: 검은색 글자에 노란색 배경이 깔린다.
(4) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(5) 예시

<p>검색결과 "된장찌개":</p>
<hr>
<p>아주 간단하게 <mark>된장찌개</mark>를 끓이는 방법.</p>
<p><mark>된장찌개</mark>의 영양성분 표시하기.</p>

○ <figure>

(1) 의미: 일러스트레이션, 다이어그램, 사진, 코드 목록 등을 포함한 콘텐츠를 정의하는 block 태그이다.
(2) 작성: <figure></figure>
(3) 기본값: 상하 마진 1em, 좌우 마진 40px
(4) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(5) 예시

<figure>
    <img src="/media/examples/elephant-660-480.jpg"
         alt="코끼리 사진">
    <figcaption>일몰을 배경으로한 코끼리 사진</figcaption>
</figure>
…
<figure>
  <figcaption><code>navigator</code>를 이용하여 브라우저 정보 얻기</figcaption>
  <pre>
function NavigatorExample() {
  var txt;
  txt = "Browser CodeName: " + navigator.appCodeName;
  txt+= "Browser Name: " + navigator.appName;
  txt+= "Browser Version: " + navigator.appVersion ;
  txt+= "Cookies Enabled: " + navigator.cookieEnabled;
  txt+= "Platform: " + navigator.platform;
  txt+= "User-agent header: " + navigator.userAgent;
}            
  </pre>
</figure>
…
<figure>
  <figcaption><cite>Edsger Dijkstra:</cite></figcaption>
  <blockquote>If debugging is the process of removing software bugs,
  then programming must be the process of putting them in.</blockquote>
</figure>

○ <figcaption>

(1) 의미: <figure>의 캡션을 정의하는 block 태그이다.
(2) 작성: <figcaption></figcaption>
(3) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(4) 배치: <figure>의 첫 번째 또는 마지막 요소로 배치해야 한다.

○ <time>

(1) 의미: 날짜와 시간을 정의하는 inline 태그이다.
(2) 작성: <time></time>
(3) 호환성: Internet Explorer에서 사용할 수 없다.
(4) 속성: <time>의 시간과 날짜를 나타내는 형식을 datetime로 지정해야 한다.
(5) 참고: 복잡한 계산상 문제로 인해, 그레고리력의 도입 이전 시간을 나타낼 때 사용하면 안 된다. 그리고 datetime 속성이 없는 경우 <time>의 텍스트 콘텐츠를 datetime 값으로 간주하기 때문에 <time>내에 어떠한 자식 요소도 두어서는 안 된다.
(6) 예시

<p>날짜와 시간은 <time datetime="2020-05-16 21:10">5월 16일</time>.</p>
<!--
날짜와 시간은 5월 16일.
-->

○ <data>

(1) 의미: 주어진 내용에 대해 기계가 읽을 수 있는 번역을 정의하는 inline 태그이다. 예를 들어 제품 이름에 기계가 읽을 수 있는 제품 번호를 추가할 수 있다.
(2) 작성: <data></data>
(3) 호환성: Internet Explorer에서 사용할 수 없다. Safari 10, Safari on iOS 10 이상에서 사용할 수 있다.
(4) 참고: 내용이 날짜 또는 시간과 관련된 경우 <time>를 사용해야 한다.
(5) 예시

<p>카메라 신제품:</p>
<ul>
    <li><data value="3598">캐논 R3</data></li>
    <li><data value="3999">소니 RX4</data></li>
    <li><data value="4000">니콘 D8</data></li>
</ul>

○ <progress>

(1) 의미: 작업의 진행률을 정의하는 block 태그이다. 가로 막대 형태로 진행 정도를 동적으로 보여준다.
(2) 작성: <progress></progress>
(3) 호환성: Internet Explorer 10, Safari on iOS 7 이상에서 사용할 수 있다.
(4) 포함: 접근성 향상을 위해 <label>과 함께 사용해야 한다.
(5) 속성
– value: 현재 숫자 값으로 0과 max 속성 사이에 있어야 한다. max 속성을 사용하지 않을 경우 0과 1사이의 부동소수점 값을 정해야 한다.
– max: 최댓값으로 0보다 큰 값을 가져야 하고, 기본값은 1이다.
(6) 참고: <meter>와 달리 최솟값은 항상 0이다.
(7) 예시

<label for="files">파일 작업량:</label>
<progress id="files" max="100" value="60"> 60% </progress>

○ <meter>

(1) 의미: 알려진 범위 내에서 스칼라 값 또는 분수 값을 정의하는 block 태그이다. 가로 막대 형태로 값의 정도를 동적으로 보여준다.
(2) 작성: <meter></meter>
(3) 호환성: Internet Explorer, Android webview에서 사용할 수 없다.
(4) 포함: 접근성 향상을 위해 <label>과 함께 사용해야 한다.
(5) 속성
– value: 현재 숫자 값으로 min 속성과 max 속성 사이에 있어야 한다. 값이 잘못되면 0으로 인식하고 min 속성과 max 속성을 벗어난 경우 범위의 가장 가까운 끝과 동일하다.
– min: 기본값은 0이다.
– max: 기본값은 1이다.
– low: 측정된 범위의 하한선으로 min 속성보다 커야 하고, max 속성보다 작아야 한다. low 속성을 지정하지 않거나 min 속성보다 작은 경우 하한선은 최솟값과 동일하다.
– high: 측정된 범위의 상한선으로 min 속성보다 커야 하고, max 속성보다 작아야 한다. high 속성을 지정하지 않거나 max 속성보다 큰 경우 상한선은 최댓값과 동일하다.
– optimum: 선호하는 숫자 값을 나타낸다. 예를 들어 optimum 값이 하한선과 최솟값 사이에 있을 때 value 값이 낮은 범위에 위치하면 가로 막대기가 녹색 계열로 표시되고, value 값이 높은 범위에 위치하면 가로 막대기가 붉은 계열로 표시된다.
– form: <input type=”number”>과 연결할 수 있다.
(6) 예시

<label for="gas">gas level:</label>
<meter id="gas"
       min="0" max="100"
       low="25" high="85" optimum="70"
       value="40">
    at 40/100
</meter>

HTML5 Semantic Element Layout

의미 있는 요소는 최소한의 규칙만 제시하므로 레이아웃을 구성하는 방법에 정답이 없다. 기획자가 목적에 맞게 영역을 분할 한 경우 그에 맞춰서 의미 있는 요소를 사용하는 게 중요하다. 만약에 현재 공개된 의미 있는 요소 중 사용할만한 요소가 없거나 별다른 의미가 없다면 <div>를 사용해야 한다.

HTML5 Multimedia Element

○ <audio>

(1) 의미: 사운드 콘텐츠를 HTML 문서에 포함시키는 데 사용하는 block 태그이다.
(2) 작성: <audio></audio>, audio 태그 내의 콘텐츠는 브라우저가 audio를 지원하지 않을 때 보인다.
(3) 지원: MP3, WAV, OGG 확장자만 공식 지원하며, 모든 브라우저에서 호환성 문제없이 사용하려면 MP3을 사용해야 한다.
(4) 호환성: Internet Explorer 9 이상에서 사용할 수 있다. 단 buffered, muted, volume 속성은 대부분의 브라우저에서 지원하지 않는다.
(5) 포함: 서로 다른 오디오 소스를 가진 하나 이상의 <source> 태그를 포함한다.

(6) 속성
– autoplay: 페이지 로딩 후 오디오를 자동으로 실행한다.
– controls: 브라우저에서 제공하는 재생, 볼륨, 탐색, 일시정지 컨트롤을 사용한다.
– volume: 오디오의 볼륨을 조정한다. 최소 0.0부터 최대 1.0까지 선택할 수 있다.
– loop: 오디오가 끝날 때마다 다시 실행한다.
– muted: 오디오 출력을 음소거한다.
– preload: none, metadate, auto를 사용해서 페이지가 로드될 때 오디오를 로드하는 방법을 지정한다. 기본값은 브라우저마다 다르다. autoplay가 preload 명령보다 우선되기 때문에 preload를 none로 설정했더라도 autoplay가 설정되어 있으면 페이지가 로드될 때 오디오도 로드된다.
– src: 오디오 파일의 URL을 지정한다.
(7) 예시

<figure>
    <figcaption>클래식 음악:</figcaption>
    <audio
        controls
        src="/media/examples/classic.mp3">
        브라우저가 오디오 태그를 지원하지 않습니다.
    </audio>
</figure>
…
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  브라우저가 오디오 태그를 지원하지 않습니다.
</audio>

○ <video>

(1) 의미: 비디오 콘텐츠를 HTML 문서에 포함시키는 데 사용하는 block 태그이다.
(2) 작성: <video></video>, video 태그 내의 콘텐츠는 브라우저가 video 요소를 지원하지 않을 때 보인다.
(3) 지원: MP4, WebM, OGG 확장자만 공식 지원하며, 모든 브라우저에서 호환성 문제없이 사용하려면 MP4를 사용해야 한다.
(4) 호환성: Internet Explorer 9 이상에서 사용할 수 있다. video 태그 속성은 종류가 많고 각 브라우저마다 지원 사항이 다르기 때문에 사용하기 전에 모질라 문서를 참고해야 한다. 예를 들어 Safari on iOS에서 autoplay 속성은 Safari on iOS 10 이상 사용할 수 있는데 소리가 없거나 오디오가 비활성화 처리된 영상에서만 정상적으로 작동한다. 
(5) 포함: 서로 다른 비디오 소스를 가진 하나 이상의 <source> 태그를 포함한다.

(6) 속성
– autoplay: 페이지 로딩 후 비디오를 자동으로 실행한다.
– controls: 브라우저에서 제공하는 재생, 볼륨, 탐색, 일시정지/재시작 컨트롤을 사용한다.
– height: 비디오의 출력 영역 높이를 지정한다. 단위는 픽셀이다.
– width: 비디오의 출력 영역 너비를 지정한다. 단위는 픽셀이다.
– loop: 비디오가 끝날 때마다 다시 실행한다.
– muted: 오디오 출력을 음소거한다.
– preload: none, metadate, auto를 사용해서 페이지가 로드될 때 비디오를 로드하는 방법을 지정한다. 기본값은 브라우저마다 다르다. autoplay가 preload 명령보다 우선되기 때문에 preload를 none로 설정했더라도 autoplay가 설정되어 있으면 페이지가 로드될 때 비디오도 로드된다.
– poster: 재생 버튼을 누르기 전까지 표시할 이미지 파일의 URL을 지정한다.
– src: 비디오 파일의 URL을 지정한다.
(7) 예시

<video controls width="250" poster="posterimage.jpg">
    <source src="/media/examples.webm" type="video/webm">
    <source src="/media/examples.mp4"type="video/mp4">
    브라우저가 비디오 태그를 지원하지 않습니다.
</video>
…
<!-- 사용자가 자막 선택 -->
<video src="examples.ogg">
  <track kind="subtitles" src="examples.en.vtt" srclang="en" label="English">
  <track kind="subtitles" src="examples.sv.vtt" srclang="sv" label="Svenska">
</video>

○ <canvas>

(1) 의미: 스크립트(일반적으로 JavaScript)으로 그래픽을 그리는데 사용하는 투명한 컨테이너로 block 태그이다.
(2) 작성: <canvas></canvas>, canvas 태그 내의 콘텐츠는 브라우저가 canvas 요소를 지원하지 않을 때 보인다.
(3) 기본값: 너비 300픽셀, 높이 150픽셀
(4) 호환성: Internet Explorer 9 이상에서 사용할 수 있다.
(5) 속성
– height: 캔버스의 출력 영역 높이를 지정한다. 익스플로러에서 최대 8,192픽셀까지 지원하고 다른 브라우저에서 최대 32,767픽셀까지 지원한다.
– width: 캔버스의 출력 영역 너비를 지정한다. 익스플로러 기준 최대 8,192픽셀까지 지원하고 다른 브라우저에서 최대 32,737픽셀까지 지원한다.
(6) 참고: <canvas>는 그려진 객체에 대한 어떠한 정보도 제공하지 않기 때문에 일반적인 접근성 웹사이트나 앱에서 사용하면 안 된다.
(7) 예시

<canvas id="canvas" width="300" height="300">
 브라우저가 캔버스 태그를 지원하지 않습니다.
</canvas>
…
<script>
var canvas = document.getElementById('canvas'); 
var ex = canvas.getContext('2d'); 
ex.fillStyle = "rgba(255,0,0,1)";
ex.fillRect(10, 10, 100, 100);
</script>

HTML5 Form Element

○ <output>

(1) 의미: 계산 결과(스크립트에서 수행한 결과 등)를 정의하는 컨테이너로 inline 태그이다.
(2) 작성: <output></output>
(3) 호환성: Internet Explorer, Opera Android에서 사용할 수 없다.
(4) 속성
– for: 계산 결과와 계산에 사용된 요소 간의 관계를 지정한다.
– form: 출력 요소가 속하는 양식을 지정한다.
– name: 출력 요소의 이름을 지정한다.
(5) 예시
– <form>의 oninput 속성을 사용해서 result의 value는 a의 정수와 b의 정수를 더한 값이라고 정의한다.
– 이름이 b인 range 타입의 <input>은 범위가 0부터 100인 슬라이더이고, 기본값은 50이다.
– 이름이 a인 number 타입의 <input>은 숫자 입력창이고, 기본값은 10이다.
– 이름이 result인 <output>은 id가 a와 b인 input의 value 값으로 계산한 결과를 나타내며, 기본값은 60이다.

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" id="b" name="b" value="50" /> +
  <input type="number" id="a" name="a" value="10" /> =
  <output name="result" for="a b">60</output>
</form>

○ <input>의 추가된 Type

(1) 의미: 사용자가 데이터를 입력할 수 있는 입력 필드를 정의하는 inline 태그이다.
(2) 작성: <input>
(3) 호환성
– 타입 중 color, data, time은 Internet Explorer에서 사용할 수 없다.
– 타입 중 datetime-local는 Internet Explorer, Firefox에서 사용할 수 없다.
– 타입 중 month는 Internet Explorer, Safari, Firefox, Firefox for Android에서 사용할 수 없다.
– 타입 중 week는 Internet Explorer, Safari, Firefox, Safari on iOS에서 사용할 수 없다.
– 타입 중 password는 Android webview에서 호환성 여부를 알 수 없다.
– 타입 중 image는 Chrome for Android, Samsung Internet에서 호환성 여부를 알 수 없다.
– 타입 중 email은 Android webview, Chrome for Android, Samsung Internet에서 호환성 여부를 알 수 없다.
(4) 타입
– color: 색상을 입력하는 타입으로 색상 클릭 시 색상 선택 팝업창이 나타난다.
– date: 날짜를 입력하는 타입으로 추가 버튼 클릭 시 달력 팝업창이 나타난다.
– datetime-local: 타임 존과 상관없이 날짜와 시간을 입력하는 타입으로 추가 버튼 클릭 시 달력 팝업창이 나타난다.
– email: 이메일 주소를 입력하는 타입으로 이메일 유효성 검사를 한다. 모바일에서는 이메일 주소를 입력하기 위한 동적 키보드가 나타난다.
– month: 연도와 월을 입력하는 타입으로 추가 버튼 클릭 시 달력 팝업창이 나타난다.
– number: 숫자를 입력하는 타입으로 모바일에서는 숫자를 입력하기 위한 동적 키보드가 나타난다.
– range: 숫자를 입력하기 위한 컨트롤 타입으로 슬라이더를 좌우로 움직여서 숫자를 입력한다. min과 max를 사용해서 최솟값과 최댓값을 지정한다.
– search: 검색 문자열을 입력하는 타입으로 문자열 입력 시 브라우저의 지원 여부에 따라서 삭제 아이콘이 나타나고, 모바일에서는 동적 키보드의 Enter 키 대신 검색 키가 표시된다. 한 줄만 입력할 수 있다.
– tel: 전화번호를 입력하는 타입으로 모바일에서는 전화번호를 입력하기 위한 동적 키보드가 나타난다.
– time: 타임 존과 상관없이 시간을 입력하는 타입이다.
– url: URL을 입력하는 타입으로 URL 유효성 검사를 한다.
– week: 특정 연도의 몇 번째 주를 입력하는 타입으로 추가 버튼 클릭 시 달력 팝업창이 나타나고 주를 선택할 수 있다.
(5) 예시

<form action="/example.php">
  <label for="exText">example TEXT :</label>
  <input type="text" id="exText" name="exText"><br>
  <label for="cname">Checking name:</label>
  <input type="text" id= cname" name="cname"><br>
  <input type="submit" value="Submit">
</form>

○ <datalist>

(1) 의미: <input> 요소에 대해 사전에 정의된 옵션 리스트를 정의하는 block 태그이다.
(2) 작성: <datalist></datalist>
(3) 호환성: Internet Explorer 10, Safari on iOS 12.2 이상에서 사용할 수 있다.
(4) 예시

<label for="foodList">오늘 아침 메뉴 리스트:</label>
<input list="foods" id="foodList" name="foodList" />
<datalist id="foods">
  <option value="된장찌개">
  <option value="김치찌개">
  <option value="코다리찜">
  <option value="안심스테이크">
  <option value="두부조림">
  <option value="쇠고기무국">
</datalist>

HTML Resource Element

○ <embed>

(1) 의미: 웹 페이지, 사진, 미디어 플레이어, 플러그인 응용 프로그램과 같은 외부 리소스의 컨테이너를 정의하는 block 태그이다.
(2) 작성: <embed></embed>
(3) 참고
– 사진을 표시하려면 <img>를 사용해야 한다.
– HTML 문서를 표시하려면 <iframe>를 사용해야 한다.
– 비디오를 표시하려면 <video>를 사용해야 한다.
– 오디오를 표시하려면 <audio>를 사용해야 한다.
(4) 예시

<embed type="video/quicktime" src="example.mov" width="1280" height="720" title="example video">

○ <iframe>

(1) 의미: 현재 HTML 문서 내에 다른 HTML 문서를 정의하는 block 태그이다.
(2) 작성: <iframe></iframe>
(3) 호환성: 실험중인 태그와 삭제된 태그가 혼재되어 있고 기본적인 속성을 제외하면 브라우저 마다 호환성 차이가 있기 때문에 <iframe>를 사용하기 전에 모질라 문서를 참고해야 한다.
(4) 속성
전체 속성 중 일부 속성만 표기했다.
– allowfullscreen: <iframe>이 requestFullscreen() 메서드를 호출해서 전체 화면 모드를 활성화 할 수 있는 경우 true로 지정한다.
– width: 너비를 지정한다. 기본값은 300픽셀이다.
– height: 높이를 지정한다. 기본값은 150픽셀이다.
– name: 이름을 지정한다.
– src: <iframe>에 포함할 문서의 주소를 지정한다.
– sandbox: <iframe>의 콘텐츠에 대한 추가 제한 설정을 지정한다.
(5) 참고: <iframe>은 컴퓨터 자원을 점유하기 때문에 <iframe>을 여러 개 사용한다면 성능 문제가 있는지 확인해야 한다.
(6) 예시

<iframe sandbox="allow-scripts allow-forms" id="mapExample"
    title=" mapExample "
    width="1280"
    height="720"
    src="mapUrl">
</iframe>

○ <object>

(1) 의미: 외부 리소스의 컨테이너를 정의하는 block 태그이다.
(2) 작성: <object></object>
(3) 호환성: 모든 브라우저와 호환성에 문제가 없으나 삭제된 속성이 많기 때문에 사용하기 전에 모질라 문서를 확인해야 한다.
(4) 속성
– data: 리소스의 URL을 지정한다.
– width: 너비를 지정한다.
– height: 높이를 지정한다.
– name: 이름을 지정한다.
(5) 참고
– 사진을 표시하려면 <object>가 아닌 <img>를 사용해야 한다.
– HTML 문서를 표시하려면 <object>가 아닌 <iframe>를 사용해야 한다.
– 비디오를 표시하려면 <object>가 아닌 <video>를 사용해야 한다.
– 오디오를 표시하려면 <object>가 아닌 <audio>를 사용해야 한다.
(6) 예시

<object type="application/pdf"
    data="example.pdf"
    width="800"
    height="600">
</object>

HTML5에서 용도가 변경된 요소

(1) <b>
글자를 굵게 표시를 하지만, 브라우저에 아무런 의미를 전달하지 않는다. 제목에는 <h1> – <h6>을 사용해야 하고, 중요한 텍스트는 <strong>로 표시해야 하고, 강조 텍스트는 <em>으로 표시해야 하고, 눈에 띄어야 하는 강조 텍스트는 <mark>로 표시해야 하고, 책의 제목은 <cite>로 표시해야 한다.

(2) <s>
취소 선을 표시하지만 문서 편집 시 적합하지 않다. 삭제된 문자를 표시할 때는 <del>을 사용해야 하고, 반대로 추가된 문자를 표시할 때는 <ins>를 사용해야 한다.

(3) <i>
글자 기울임을 위해서 사용하면 안 된다. 글자 기울임은 CSS로 표현해야 한다. 가독성을 위해 정상적인 문장에서 벗어난 텍스트 범위에 사용해야 한다.

(4) <u>
텍스트에 밑줄을 긋는 용도로 사용하면 안 된다. 맞춤법이 틀린 단어 또는 중국어의 고유 명사처럼 일반 텍스트와 스타일이 다른 텍스트를 표시할 때 사용해야 한다.

(5) <hr>
가로 선을 보여주기 위해서 사용하면 안 된다. 각 단락을 구분해야 할 때 사용해야 한다.

HTML5에서 삭제된 요소

• <acronym>
• <applet>
• <basefont>
• <bgsound>
• <blink>
• <center>
• <dir>
• <font>
• <frame>
• <marquee>
• <nobr>
• <strike>

출처

• 모질라 HTML5 가이드
• W3C HTML5 가이드
• Htmlreference HTML5 가이드

관련 글

• 인터넷 익스플로러 HTML5 호환성 가이드
• 인터넷 익스플로러 CSS3 호환성 가이드
• CSS 초기화 가이드
• 온라인 쇼핑몰 웹 브라우저 사용 비율