Elements

  • bug_report

Elements

Element는 한글의 의미로 "요소"라는 용어로 사용된다. 요소는 HTML 문서의 콘텐츠를 구성하는 기본 단위이다. 한편으로 TAG라는 용어도 사용하는 데 태그(tag)는 요소를 생성하거나 설명하는 데 사용되는 미리 약속된 기술적인 표현 수단이다. 결국 태그(tag)의 구문을 이해한다는 것은 원하는 요소를 생성해 낼 수 있다는 뜻이기도 하다. 기술적인 표현 수단을 학습하는 데 태그(tag)라는 용어를 사용하는 것은 틀린 것은 아니지만  데브딕은 좀더 익숙한 태그(tag)라는 용어보다는 CSS와 자바스크립트 등 다른 분야와 연계를 위해 요소라는 용어를 쓰기로 한다. 참고로 HTML과 TAG 그리고 요소(element)라는 용어가 서로 비슷하게 보이지만 같은 개념이 아니므로 주의하도록 한다.

개요

웹 문서는 HTML이라는 마크업(markup) 언어를 사용해서 콘텐츠를 표현하는 결과물이다. HTML은 미리 약속된 태그(tag)라는 문법(기술)적 표현을 사용해서 구조화하는 특징을 가지고 있다. 따라서 HTML에는 어떠한 태그(tag)가 있는지 그리고 용도는 무엇인지를 정확히는 아는 것이 웹 문서 제작의 기본이라 할 수 있다.

사실 HTML 5에서는 미리 규정된 태그(tag)이외에 개발자가 직접 생성할 수 있는 메커니즘을 제공한다. 이 기술을 사용하기 위해서는 자바스크립트(JavaScript)의 이해가 필요하다.

개발자가 직접 태그를 정의하는 것은 일반적이지 않으며 고도화된 프로그래밍 기법에서 필요한 일이다. 중요한 것은 표준으로 제공되는 태그(tag)를 아는 것이며 프런트엔드(frend-end) 개발의 시작이라 할 수 있다.

데브딕은 HTML Living Standard 사양을 기준으로 W3C의 표준 태그를 소개한다. 그리고 기본적인 분류도 HTML Living Standard의 분류를 따른다.

요소 전체 분류

  • The Document Element

    웹 문서를 출력하기 위해 진입점 역할을 하는 요소를 나타낸다.

    • 〈!DOCTYPE〉

      웹 문서 맨 처음에 반드시 문서 타입을 명시한다.

    • <html>

      웹 문서의 최상위 요소이며 루트(root) 요소라고도 부른다.

  • Document Metadata

    유저 에이전트(user agent)의 해석기에 필요한 메타데이터(metadata)를 생성하는 요소를 나타낸다.

    • <head>

      웹 문서에서 비가시적인 요소들이 작성되는 공간을 갖는 태그이며 웹브라우저가 문서를 해석할 때 필요한 메타데이터(metadata)를 제공하는 역할을 한다.

    • <title>

      웹 문서의 제목 또는 이름을 작성한다. 웹 문서당 하나만 사용한다.

    • <base>

      URL 구문 분석을 위한 문서 기본 URL과 하이퍼링크를 따라갈 수 있는 기본 탐색 가능 이름을 지정할 수 있다.

    • <link>

      문서에 사용할 외부 리소스와의 관계를 설정하고 연결한다.

    • <meta>

      <title>, <base>, <link>, <style>, <script> 요소로 표현할 수 없는 다양한 종류의 메타데이터를 정의한다. 

    • <style>

      문서에 CSS 스타일시트(stylesheet)를 포함할 수 있다.

  • Sections

    콘텐츠의 역할과 내용 구분을 위해 섹션을 나누기 위한 용도로 사용되는 요소를 나타낸다.

    • <body>

      웹 문서에서 가시적인 플로우 콘텐츠(flow content) 요소들을 배치하는 공간을 나타낸다.

    • <article>

      문서, 페이지, 응용 프로그램 또는 웹사이트의 완전하거나 독립적인 구성을 나타낸다. 원칙적으로 독립적으로 배포하거나 재사용할 수 있다.

      포럼 게시물, 잡지 또는 신문 기사, 블로그 항목, 커뮤니티 댓글, 대화형 위젯(widget) 또는 가젯(gadget) 또는 기타 독립적인 콘텐츠 항목이 될 수 있다.

    • <section>

      문서 또는 애플리케이션의 일반 섹션을 나타낸다. 일반적으로 제목이 있는 콘텐츠 주제별 그룹을 나타낸다. 하위 콘텐츠로 거의 예외없이 항상 제목이 있어야 한다.

    • <nav>

      다른 페이지 또는 페이지 내의 특정 위치로 연결되는 탐색 링크가 있는 섹션을 나타낸다.

    • <aside>

      페이지에서 기본 콘텐츠와 접선적으로 관련되어 있으며 별개로 간주될 수 있는 콘텐츠로 구성된 페이지 섹션을 나타낸다.

    • <h1>~<h6>

      6단계의 제목을 표시한다. <h1>이 가장 큰 크기의 제목이 표시되고 <h6>가 가장 작은 크기의 제목이 표시된다.

    • <hgroup>

      제목 및 관련 콘텐츠를 나타낸다.

    • <header>

      문서에서 소개 또는 탐색 지원 인터페이스를 가진 그룹을 나타낸다.

    • <footer>

      가장 가까운 상위 섹션 콘텐츠 요소의 바닥글을 나타내거나 상위 섹션이 없는 경우 <body> 요소의 바닥글을 나타낸다. <footer>에는 일반적으로 작성자, 관련 문서 링크, 저작권 데이터 등 해당 섹션에 대한 정보가 포함된다.

    • <address>

      HTML 문서와 직접 연관된 사람 또는 조직의 연락처 정보를 나타낸다.

  • Grouping Content

    웹 문서의 콘텐츠를 그룹화하는 데 사용되는 요소를 나타낸다.

    • <p>

      단락을 표시하는 태그이다.

    • <hr>

      단락 수준의 주제 구분을 위한 수평선을 생성한다. 또는 <select> 요소의 <option> 집합 사이의 구분선을 생성하기도 한다.

    • <pre>

      미리 형식이 지정된 텍스트 블록을 나타내며 이 블록의 구조는 요소가 아닌 타이포그래피(typographic) 규칙으로 표시된다.

    • <blockquote>

      다른 소스에서 인용된 섹션을 나타낸다.

    • <ol>

      순서가 있는 목록을 생성한다.

    • <ul>

      순서가 없는 목록을 생성한다.

    • <menu>

      정렬되지 않은 항목 목록(<li>) 형식의 콘텐츠로 구성된 도구 모음을 나타낸다. 각 항목은 사용자가 수행하거나 활성화할 수 있는 명령을 갖는다.

    • <li>

      목록(<ol>, <ul>) 또는 메뉴(<menu>)의 항목을 나타낸다.

    • <dl>

      정의형 목록(definition list)을 생성하는 래퍼(wrapper) 요소이다.

    • <dt>

      정의 목록(definition list)에서 정의할 대상의 제목(용어, 이름)을 나타낸다.

    • <dd>

      정의 목록(definition list)에서 정의할 대상의 설명을 나타낸다.

    • <figure>

      선택적으로 캡션(<figcaption>)을 추가해 피규어(figure)를 표시하는 플로우 콘텐츠(flow content)를 나타낸다.

    • <figcaption>

      <figure> 요소 내의 콘텐츠에 대한 캡션(caption) 또는 범례를 나타낸다.

    • <main>

      문서의 중심 콘텐츠를 나타낸다.

    • <search>

      양식 컨트롤(form controls), 검색, 필터링 작업 수행과 관련된 콘텐츠를 포함하는 문서 또는 응용 프로그램의 일부를 나타낸다. 검색 또는 필터링 기능이 있는 요소 내용을 의미론적(semantically)으로 식별한다.

    • <div>

      콘텐츠의 기본적인 영역을 나누는 용도로 가장 광범위하게 사용된다.

  • Text-level Semantics

    텍스트 수준(text level)에서 시맨틱스(semantics: 의미론)를 부여하는 요소를 나타낸다.

    • <em>

      텍스트 콘텐츠 일부에 대해 강조를 나타낸다.

    • <strong>

      텍스트 콘텐츠의 일부에 대한 강한 중요성, 심각성 또는 긴급성을 나타낸다.

    • <small>

      작은 글씨와 같은 측면 주석을 나타낸다.

    • <s>

      더 이상 정확하지 않거나 관련이 없는 텍스트 콘텐츠를 나타낸다.

    • <cite>

      작품(책, 논문, 에세이, 시, 악보, 노래, 대본, 영화 등)의 제목을 나타낸다. 자세히 인용되거나 참조되는 저작물일 수도 있고 단순히 언급되는 저작물일 수도 있다.

    • <q>

      다른 출처에서 인용한 일부 구문 콘텐츠를 나타낸다.

    • <dfn>

      정의 구문 또는 문장의 컨텍스트 내에서 정의되는 용어를 나타낸다. 가장 가까운 조상인 <p>, <dt>/<dd> 그룹, <section>은 용어의 정의로 간주된다.

    • <abbr>

      선택적으로 확장과 함께 약어 또는 두문자어를 나타낸다.

    • <ruby>

      하나 이상의 구문 콘텐츠(phrasing content) 범위를 루비(ruby) 주석으로 표시한다. 루비(ruby) 주석은 기본 텍스트와 함께 표시되는 짧은 텍스트로 주로 동아시아 타이포그래피에서 발음 가이드로 사용되거나 다른 주석을 포함하기 위해서 사용된다.

    • <rt>

      루비(ruby) 주석의 루비 텍스트 구성 요소를 나타낸다.

    • <rp>

      루비(ruby) 주석을 지원하지 않는 유저 에이전트가 표시할 루비(ruby) 주석의 루비 텍스트 구성 요소 주위에 괄호 또는 기타 콘텐츠를 제공하는 데 사용된다.

    • <data>

      기계가 읽을 수 있는 값을 제공하는 용도로 사용된다. 

    • <time>

      기계가 읽을 수 있는 제한된 날짜와 시간 형식의 값을 제공하는 데 사용된다. datetime 애트리뷰트를 명시해 값을 지정하거나 요소 내 유효한 값을 작성한다.

    • <code>

      컴퓨터 코드의 조각을 나타낸다. XML 요소 이름, 파일 이름, 컴퓨터 프로그램 또는 컴퓨터가 인식할 수 있는 기타 문자열일 수 있다.

    • <var>

      변수를 나타낸다. 수학적 표현이나 프로그래밍 컨텍스트(context)의 실제 변수, 상수(constant)를 나타내는 식별자, 물리량을 식별하는 기호, 함수 매개변수 또는 텍스트 문장에서 자리 표시자로 사용되는 용어일 수 있다.

    • <samp>

      다른 프로그램이나 컴퓨팅 시스템의 샘플 또는 인용된 출력을 나타낸다.

    • <kbd>

      사용자 입력을 나타낸다. 일반적으로 키보드 입력이지만 음성 명령과 같은 다른 입력을 나타내는 데 사용될 수도 있다.

    • <sub>

      아래 첨자로 표시한다.

    • <sup>

      위 첨자로 표시한다.

    • <i>

      다른 음성이나 분위기의 텍스트 범위를 나타내거나 분류학적 지정, 기술 용어, 다른 언어의 관용구, 음역, 생각 또는 서양 텍스트의 선박 이름과 같은 텍스트의 다른 품질을 나타내는 방식으로 일반 구문에서 오프셋을 나타낸다.

    • <b>

      문서 요약의 핵심 단어, 리뷰의 제품 이름, 대화형 텍스트 기반 소프트웨어의 실행 가능한 단어 또는 기사 리드와 같이 추가적인 중요성을 전달하지 않고 대체 음성이나 분위기의 영향 없이 실용적인 목적으로 주의를 끄는 텍스트 범위를 나타낸다.

    • <u>

      텍스트를 중국어 텍스트의 고유명사(중국 고유명 표시)로 표시하거나 텍스트를 철자가 틀린 것으로 레이블을 지정하는 것과 같이 명시적으로 렌더링되지만 명확하지 않은 비 텍스트 주석이 있는 텍스트 범위를 나타낸다.

    • <mark>

      다른 컨텍스트(context)와의 관련성으로 인해 참조 목적으로 표시되거나 강조 표시된 한 문서의 텍스트 실행을 나타낸다.

    • <bdi>

      양방향 텍스트 서식 지정을 위해 주변과 격리될 텍스트의 범위를 나타낸다.

    • <bdo>

      자식에 대한 명시적 텍스트 방향성 서식 컨트롤을 나타낸다. 개발자는 방향 재정의를 명시적으로 지정하여 유니코드 양방향 알고리즘을 재정의할 수 있다.

    • <span>

      구문상에서 인접된 텍스트를 그룹으로 묶는 역할을 한다. 그룹으로 묶인 텍스트는 CSS를 통한 독립적인 디자인 처리가 가능하다.

    • <br>

      줄 바꿈을 나타낸다.

    • <wbr>

      외부적 요인(공간 부족)에 의해 줄 바꿈이 발생할 시 줄 바꿈 지점을 예약한다.

  • Links

    하이퍼링크(hyperlink)를 적용하는 요소를 나타낸다.

    • <a>

      href 애트리뷰트 명시 유무에 따라 역할이 다르다. href 애트리뷰트가 명시되면 하이퍼링크(hyperlink)로 작동하는 콘텐츠의 일부가 되지만 그렇지 않다면 하이퍼링크(hyperlink)의 목적지가 되는 자리 표시자 역할을 한다.

  • Edits

    문서 편집과 관련된 요소를 나타낸다.

    • <ins>

      문서에 대한 추가 사항을 나타낸다.

    • <del>

      문서에서 제거를 나타낸다. 암시된 단락 경계를 넘지 않아야 한다.

  • Embedded Contents

    문서 내에 외부 개체 삽입에 관여하는 요소를 나타낸다.

    • <audio>

      사운드 또는 오디오 스트림(stream)을 나타낸다.

    • <embed>

      외부 애플리케이션 또는 대화형 콘텐츠에 대한 통합 지점을 제공한다.

    • <iframe>

      문서 내에 프레임(frame)을 생성해 콘텐츠를 탐색할 수 있음을 나타낸다.

    • <img>

      이미지를 출력한다.

    • <map>

      <area> 요소와 함께 이미지의 특정 영역(맵)에 링크를 지정할 때 사용한다.

    • <area>

      이미지에 원하는 영역을 지정하고 하이퍼링크(hyperlink)를 지정할 수 있다.

    • <object>

      리소스의 유형에 따라 이미지 또는 탐색 가능한 자식으로 처리되는 외부 리소스를 나타낼 수 있다.

    • <picture>

      포함된 <img> 요소에 여러 소스를 제공하여 작성자가 화면 픽셀 밀도, 뷰포트의 크기, 이미지 형식 및 기타를 기반으로 사용할 이미지 리소스에 대해 유저 에이전트에 선언적으로 제어하거나 힌트를 제공할 수 있도록 하는 컨테이너(container)이다.

    • <source>

      <img> 요소에 대한 여러 대체 소스 세트(srcset 애트리뷰트) 또는 미디어 요소(<audio>, <video>)에 대한 여러 대체 미디어 리소스를 지정할 수 있다. 자체로는 아무것도 나타내지 않는다.

    • <track>

      <audio><video> 요소에 대한 시간별 텍스트 트랙을 지정할 때 사용한다. 재생 시간별 캡션이나 자막 등을 표시할 수 있다.

    • <video>

      비디오 미디어를 삽입한다.

  • Tabular data

    표(table)를 작성하는 관련 요소를 나타낸다.

    • <table>

      행과 열로 구성된 표를 나타낸다. 하나의 표가 생성이 되기 위해서는 <table> 요소 하위에 최소한의 계층순으로 하나 이상의 <tr>, <td> 요소가 존재해야 한다.

    • <caption>

      표의 제목을 작성한다.

    • <colgroup>

      열 그룹을 나타낸다.

    • <col>

      <colgroup>에 속한 열 그룹 내 하나의 열을 나타낸다. 

    • <tbody>

      표 형식에서 데이터를 나타내는 본문으로 구성된 행 그룹을 나타낸다.

    • <thead>

      표 형식에서 데이터를 나타내는 열 그룹의 제목 또는 레이블이 작성된 셀로 구성된 행 그룹을 나타낸다.

    • <tfoot>

      표 형식에서 데이터에 대한 요약으로 구성된 행 그룹을 나타낸다.

    • <tr>

      표에서 셀 그룹을 나타내며 하나의 행 단위 역할을 한다.

    • <td>

      데이터를 입력하는 데이터 셀(cell)을 나타낸다.

    • <th>

      표의 구조에서 데이터 열 그룹의 제목 또는 레이블이 표시된 셀(cell)을 나타낸다.

  • Form

    양식(form)과 관련된 요소를 나타낸다.

    • <form>

      사용자로부터 정보를 입력 받는 양식을 작성하는 양식 그룹을 나타낸다. 양식 요소에 입력된 값은 서버에 전송될 수 있으며 자체적으로 사용하기도 한다.

    • <label>

      사용자 인터페이스 항목의 이름 또는 설명을 나타낸다.

    • <input>

      입력 방식이 지정된 데이터 필드를 나타내며 일반적으로 사용자가 편집할 수 있는 양식 컨트롤을 나타낸다.

    • <button>

      하위 요소의 콘텐츠로 지정된 버튼을 나타낸다.

    • <select>

      정해진 옵션 중에서 선택하는 방식으로 입력을 할 수 있는 컨트롤을 나타낸다.

    • <datalist>

      다른 입력 요소를 위해 미리 정의된 선택 옵션을 갖는 자료를 나타내며 직접 렌더링 되지 않는다.

    • <optgroup>

      <option> 요소를 그룹화하여 label 애트리뷰트로 차별하여 표시한다.

    • <option>

      <select> 요소의 선택 항목을 나타내거나 <datalist> 요소의 자료 항목을 나타낸다.

    • <textarea>

      개행이 포함된 일반 텍스트를 입력하는 컨트롤을 나타낸다.

    • <output>

      연산 결과 또는 사용자의 작업 결과를 나타낸다.

    • <progress>

      작업의 진행률을 나타낸다.

    • <meter>

      알려진 범위 내의 스칼라(scalar) 측정 또는 분수 값을 나타낸다. value 값을 토대로 시각적 표시를 하는 <progress> 요소와 비슷해 보이지만 데이터(value)의 가치에 대한 시각적 표시를 차별화할 수 있다.

    • <fieldset>

      선택적인 캡션(<legend>)과 함께 그룹화된 양식(form) 요소 또는 컨텐츠 집합을 나타낸다.

    • <legend>

      <fieldset> 요소에 대한 캡션을 지정한다.

  • Interactive Elements

    사용자와 상호 작용을 위한 요소를 나타낸다.

    • <details>

      사용자가 추가 정보를 선택적으로 보임과 숨김 처리를 할 수 있는 공개 위젯을 생성한다. 하나의  <summary> 요소를 자식으로 사용하여 추가 정보에 대한 요약 또는 레이블을 표시해야 한다.

    • <dialog>

      사용자에게 특정 작업을 수행(열람, 확인 등)하게 하거나 사용자로부터 정보를 수집하기 위한 목적으로 상호작용하는 작은 창 형태로 제공되는 위젯을 나타낸다.

    • <summary>

      <details>  요소의 자식으로 사용되어지며 콘텐츠에 대한 요약 또는 레이블을 나타낸다.

  • Scripting

    자바스크립트(JavaScript)를 지원하거나 프로그래밍을 통해 기능이 동작되는 요소를 나타낸다.

    • <canvas>

      Canvas API 또는 WebGL API를 사용해서 그래픽 처리와 애니메이션 등 시각적 이미지를 즉시 렌더링하는 데 사용한다.

    • <noscript>

      유저 에이전트가 스크립트 유형을 지원하지 않거나 스크립트를 비활성화한 경우 하위 요소를 나타낸다. 그 반대의 경우는 아무것도 나타내지 않는다. 문서가 구문 분석되는 방식에 영향을 주어 스크립트를 지원하는 유저 에이전트와 지원하지 않는 유저 에이전트에 서로 다른 마크업을 제공하는 데 사용된다.

    • <slot>

      일반적으로 섀도우 트리(shadow tree)에서 사용되는 슬롯(slot)을 정의한다. 슬롯(slot)은 할당된 노드(node)를 나타내거나 콘텐츠를 나타낸다. 자바스크립트의 프로그래밍으로 실제로 노드(node)나 콘텐츠가 할당되어 화면에 표시된다. 일정한 형식의 콘텐츠를 자료로 사용하여 디자인된 <template> 요소 내의 <slot> 요소의 자리에 각각의 형식에 따른 데이터를 할당한다.

    • <template>

      페이지가 로드시 즉시 렌더링되지 않고 자바스크립트 프로그래밍에 따라 동적 콘텐츠로 렌더링한다.

    • <script>

      자바스크립트를 페이지 내부에 작성하거나 외부의 *.js 파일을 가져온다.