| a |
다른 페이지 이동을 설정합니다. 페이지 주소 뿐만 아니라, 메일 주소, 전화 번호 등도 연결할 수 있으며, 아이디(#) 값으로 페이지 내에서도 이동이 가능합니다.
|
| align-items |
줄임말이나 머리글자를 표현하는데 사용합니다. abbr은 abbreviation의 약자로, "약자 또는 생략어"라는 의미를 가집니다. title 속성을 사용하여 전체
단어를 지정 할 수 있으며, <dfn> 태그와 같이 사용하여 정의할 수 있습니다. |
| acronym |
줄임말이나 머리글자를 표현하는데 사용합니다. 현재는 사용하지 않습니다. |
| address |
웹 페이지의 연락처 정보를 설정합니다. 사이트 주소, 전화번호, 이메일, 소설미디어, 위치 등의 정보와, 회사 정보, 회사 이름, 회사 주소 등과 관련된 정보를
표시합니다. |
| applet |
애플랫 요소를 설정합니다. 현재는 사용하지 않습니다. |
| area |
이미지 맵의 영역을 정의합니다. |
| article |
사이트의 독립적인 컨텐츠 섹션을 설정합니다. 독립적인 컨텐츠에는 포럼, 신문기사, 잡지, 블러그 항목, 게시판 글 등이 있으며, 각각의 컨테츠에는
제목(<h1>~<h6>)이 표시되어야 합니다. |
| aside |
주요 콘텐츠의 보조적 컨텐츠 섹션을 설정합니다. 웹 페이지의 메인 콘텐츠와 관련된 사이드의 정보, 광고 등 부분적인 정보를 나타낼 때 사용합니다. |
| audio |
오디오 파일을 설정합니다. |
| b |
다른 텍스트와 구별 할 때 설정합니다. 텍스트는 굵게 표시되지만 중요성을 강조하지 않습니다. |
| base |
모든 문서의 기본이 되는 URL을 설정합니다. <head> 태그 안에 설정 할 수 있으며, 문서에서 한 번만 설정 할 수 있습니다.
|
| basefont |
문서의 기본 폰트, 사이즈, 종류를 설정합니다. 지금은 CSS에서 이 기능을 구현하기 때문에 현재는 사용하지 않습니다. |
| bdi |
텍스트의 출력 방향 영역을 설정합니다. 일반적인 글은 왼쪽에서 오른쪽으로 읽지만, 아랍어나 히브리어는 오른쪽에서 왼쪽으로 읽을 때 사용합니다. |
| bdo |
텍스트의 방향을 설정합니다. 텍스트의 읽는 방향이 다른 나른 언어를 위해 사용합니다. |
| big |
텍스트의 크기를 크게 설정합니다. CSS가 그 기능을 대신하기 때문에 현재는 사용하지 않는 태그입니다. |
| blockquote |
긴 문장의 인용문을 설정합니다. 인용된 정보 출처는 cite 속성을 통해 설정합니다 |
| blink |
텍스트를 깜박이게 설정합니다. 현재는 사용하지 않으며 오래된 태그입니다. 이 기능은 CSS Animation이 대신 할 수 있습니다. |
| body |
문서의 타이틀, 스크립트, 스타일, 메타 정보 등을 설정합니다. |
| br |
텍스트 줄바꿈이 필요할 때 설정합니다. |
| button |
클릭 할 수 있는 버튼을 설정합니다. |
| canvas |
비트맵 방식의 그림을 설정합니다. canvas API와 WebGL API를 통해 그래픽과 애니메이션을 만듭니다. |
| caption |
표의 제목을 설정합니다. |
| center |
텍스트를 가운데 정렬합니다. CSS 속성이 기능을 대신하고 있기 때문에 현재는 사용하지 않습니다. |
| cite |
저작물의 출처 표기를 설정합니다. |
| code |
코드를 나타내는 텍스트를 설정합니다. |
| col |
<colgroup> 요소에 속하는 각 열의 속성을 설정합니다. |
| colgroup |
태그는 표의 열을 묶는 그룹을 설정합니다. |
| data |
주어진 요소의 데이터 값을 설정합니다. |
| datalist |
선택 목록과 자동 완성 기능을 설정합니다.사용자가 데이터를 입력하면 일치하는 목록이 있을 경우 보여줍니다. <select> 태그는 주어진 선택 목록을 선택만 할
수 있지만, <datalist> 태그는 선택 목록에 없어도, 사용자가 입력할 수 있습니다. |
| dd |
설명 목록의 항목을 설정합니다. |
| del |
문서의 삭제된 텍스트를 설정합니다 |
| details |
접기/펼치기 목록을 설정합니다. 컨텐츠 요소를 숨기거나 보여줄 수 있습니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해
구현할 수 있습니다. 접기/펼치기 목록의 제목은 <summary> 태그를 통해 설정합니다. |
| dfn |
용어를 정의할 때 설정합니다. |
| dialog |
팝업 정보을 설정합니다. |
| dir |
파일 및 폴더의 디렉토리를 설정합니다. 현재는 사용하지 않습니다. |
| div |
문서의 영역을 나누거나 그룹화 할 때 설정합니다. |
| dl |
설명 목록을 설정합니다. |
| dt |
설명 목록 항목의 제목을 설정합니다. |
| em |
텍스트를 강조할 때 설정합니다. |
| embed |
외부 콘텐츠를 사용할 수 있도록 설정합니다. |
| fieldset |
폼 컨트롤 요소의 내부 영역을 설정합니다. |
| figcaption |
<figure> 요소의 설명 또는 제목을 설정합니다. |
| figure |
인용, 도표, 사진, 코드 등의 독립적인 콘텐츠를 설정합니다. |
| font |
폰트의 크기, 색, 종류를 설정합니다. |
| footer |
사이트 관련 정보 및 관련 링크 콘텐츠 섹션을 설정합니다. |
| form |
웹 서버에 정보를 제공하는 폼 컨트롤 유형을 설정합니다. |
| frame |
다른 HTML문서가 표시 될 수 있는 특정 영역을 설정합니다. |
| frameset |
레이아웃 구성을 위한 프레임을 설정합니다. |
| <h1>~<h6> |
섹션의 제목 설정합니다. |
| head |
제목과 스크립트, 스타일 시트, 메타 정보 등을 제공합니다. |
| header |
사이트의 소개 및 메뉴 그룹을 나타내는 섹션을 설정합니다. |
| hgroup |
제목 요소 그룹화를 설정합니다. |
| hr |
단란 요소간의 주제별 구분을 설정합니다. |
| html |
웹 문서의 최상위 요소 문서의 루트를 나타냅니다. |
| i |
특별한 이유로 평범한 글자와 구분하기 위해 설정합니다. |
| iframe |
웹 문서에 다른 문서를 포함하는데 사용합니다. |
| img |
웹 문서에 이미지를 정의합니다. |
| input |
데이터를 입력할 수 있는 폼 컨트롤을 정의합니다. |
| ins |
문서에 삽입된 텍스트를 설정합니다. |
| kbd |
키보드 입력요소를 나타내는 텍스트를 정의합니다. |
| keygen |
보안키를 생성하고 컨트롤합니다. |
| label |
해당 <input> 요소의 제목을 설정합니다. |
| legend |
<fieldset> 요소 영역의 설명을 설정합니다. |
| li |
목록의 항목을 나타내는 태그입니다. |
| link |
외부 파일 연결 할 때 설정합니다. |
| main |
문서의 주요 콘텐츠를 정의합니다. |
| map |
이미지 맵을 정의합니다. |
| mark |
참조용 표시를 정의합니다. |
| marquee |
텍스트의 스크롤과 움직임을 정의합니다. |
| menu |
메뉴 리스트를 정의합니다. |
| menuitem |
메뉴 리스트 항목을 정의합니다. |
| meta |
웹 문서에 대한 정보를 제공합니다. |
| meter |
범위를 측정하는 게이지 정보를 정의합니다. |
| nav |
내부 페이지 및 외부 페이지에 대한 탐색 링크를 제공하는 페이지 섹션을 설정합니다. |
| noframes |
프레임이 지원되지 않을 경우 대체 메세지를 표시합니다. |
| noscript |
스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다. |
| object |
웹 문서에 포함된 멀티미디어 요소를 정의합니다. |
| ol |
순서가 있는 목록형 태그입니다. |
| optgroup |
<select> 메뉴 <option> 리스트의 그룹화를 설정합니다. |
| option |
<select> 요소의 항목을 정의합니다. |
| output |
사용자에 컨트롤에 따라 결과값을 계산으로 보여주는 요소입니다. |
| p |
단락을 나타냅니다. 문단은 하나로 묶을 수 있는 짧막한 단위를 말하며, 단락은 하나 하나의 짧은 토막이라고 말 할 수 있습니다. 즉 단락이 모여서 문단이 됩니다.
마크업 할 때는 문단은 <div> 태그로 그 안에는 여러개의 <p> 태그로 구성되어 있다고 보시면 됩니다. <p> 태그와 <p> 태그 사이에는
한 줄의 행간이 표현됩니다. |
| param |
<object> 태그의 매개변수를 정의합니다. |
| picture |
화면 크기에 따라 이미지를 정의합니다. 웹 사이트에서 이미지를 표현 할 수 있는 방법은 여러가지 있습니다. <img>, <picture>,
<figure> 태그와 background를 통해서도 이미지를 표현 할 수 있습니다. 이미지를 불러올 때는 <img> 태그, 이미지를 표현할 때는
<figure> 태그, 이미지를 화면 크기에 따라 설정할 때는 <picture> 태그를 사용합니다. <picture> 태그는 반응형 사이트와 관련이
있으면 화면 크기에 따라 그에 맞는 이미지를 보여주는 태그입니다. <source> 태그와 같이 사용하며 미디어 쿼리를 통해 표현합니다. |
| pre |
마크업 소스를 화면 그대로 표현합니다. HTML 마크업시 두칸 이상은 브라우저에서 한칸으로 표현됩니다. 하지만 <pre> 태그는 마크업의 빈칸과 줄바꿈을 화면
그대로 표현합니다. 코드를 보여줄 때 많이 사용하는 편입니다. |
| progress |
작업의 진행 상태를 표시하는 바를 나타냅니다. 속성을 통해 최대 진행 표시와 현재 진행 표시를 나타낼 수 있습니다. 진행 바 표시는 브라우저마다 OS마다 틀릴 수
있습니다. 현재 진행률과 제목은 <label> 태그를 통해 표시합니다. |
| q |
짧은 글을 인용할 때 사용합니다. 인용한 글의 출처는 cite 속성을 통해 표현 할 수 있으며, 긴 문장의 인용은 <blockquote> 태그를 사용할 수
있습니다. |
| rp |
루비 문자의 상단 주석을 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다.
<ruby> 태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은 주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지 않을 경우
괄호('(')를 표현해주는 역할을 합니다. <rb> 태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너 역할을 합니다. |
| rt |
루비 문자의 상단 주석을 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다.
<ruby> 태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은 주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지 않을 경우
괄호('(')를 표현해주는 역할을 합니다. <rb> 태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너 역할을 합니다. |
| rtc |
루비 문자를 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은 주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를
표현해주는 역할을 합니다. <rb> 태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너 역할을 합니다. |
| ruby |
루비 문자를 정의합니다. 루비 문자란 한자에 대한 읽는 법이나 일반적인 읽기 방법과 다르게 읽을 때 작은 글씨로 표현해주는 문자를 의미합니다. <ruby>
태그는 루비 문자를 정의하며, <rt> 태그는 상단에 작은 주석 글씨를 나타내며, <rp> 태그는 루비 태그가 지원되지 않을 경우 괄호('(')를
표현해주는 역할을 합니다. <rb> 태그는 발음을 나타내며, <rtc> 태그는 텍스트 컨테이너 역할을 합니다. |
| s |
요소는 텍스트에 취소선을 나타냅니다. 더 이상 텍스트와 관련이 없거나 적절하지 않은 것을 나타낼 때 사용합니다. 문서 편집을 위한 텍스트 수정은 <del> 또는
<ins> 태그를 사용합니다. |
| samp |
컴퓨터 프로그램으로 출력된 결과물을 나타내는 텍스트를 표현합니다. 스크립트의 결과값을 나타낼 때 사용하며 monotype의 폰트로 표현이 됩니다. |
| script |
실행 가능한 스크립트 코드를 포함하거나 외부 스크립트를 연결할 수 있습니다. |
| section |
주제별 그룹의 콘텐츠 섹션을 나타낼 때 사용하며, 각 섹션에는 <h1>~<h6> 요소를 자식으로 포함시켜 식별해야 합니다. <section> 태그는
스타일링 요소가 아니기 때문에 그룹화나 편의를 위함이라면 <div> 태그를 사용하는 것이 좋습니다. |
| select |
선택 목록을 <option> 태그를 사용하여 설정하며, 접근성을 위하여 <label> 요소를 사용하며, id와 for 속성을 설정합니다. |
| small |
저작권 및 법적인 텍스트에 설정합니다. |
| source |
<picture>, <audio> 요소 및 <video> 요소에 소스를 지정하는데 사용합니다. 닫는 태그가 없는 빈요소입니다. |
| span |
태그는 콘텐츠 요소를 표현하기 위한 인라인 요소이며, 의미가 없는 그룹화 요소입니다. 적절한 의미에 맞는 요소가 없거나 그룹화할 때 사용하며 <div> 요소와
비교가 됩니다. <div> 태그는 블록구조이며 <span> 태그는 인라인 구조입니다. |
| strike |
현재 사용하지 않는 태그입니다. 텍스트 위에 취소선(수평선)을 표현하기 위해 사용한 태그이지만 현재는 <del> 태그 또는 <s> 태그가 그 역할을
대신하고 있습니다. |
| strong |
텍스트의 중요성을 강조할 때 설정합니다. |
| style |
웹 문서에 스타일 정보를 설정할 수 있습니다. 웹 문서에 스타일을 표현하는 방법은 인라인 스타일 (inline style), 인터널 스타일 (internal
style), 익스터널 스타일 (external style) 방법이 있으며, 상황에 맞게 쓸 수 있습니다. |
| sub |
텍스트의 아래첨자를 사용할 때 쓰입니다. 주로 수학적인 공식이나 화학식에서 많이 사용하게 됩니다. <sub> 태그는 디자인적인 요소를 사용하는 것은 적합하지
않습니다. <sub> 태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다 틀릴
수 있으니 확인이 필요합니다. |
| summary |
접기/펼치기 목록을 설정합니다. 자바스크립트를 이용하여 컨텐츠 내용을 숨기고 보여줄 수 있는 기능을 HTML 태그를 통해 구현할 수 있습니다. 접기/펼치기 목록의
제목은 <summary> 태그를 통해 설정합니다. |
| sup |
텍스트의 위첨자를 사용할 때 쓰입니다. 주로 수학적인 공식에서 많이 사용하게 됩니다. <sup> 태그는 디자인적인 요소를 사용하는 것은 적합하지 않습니다.
<sup> 태그의 위치는 변경이 필요한 경우에는 vertical-align 속성을 사용하면 변경할 수 있으며, 이런 모양이나 위치는 브라우저마다 틀릴 수 있으니
확인이 필요합니다. |
| svg |
SVG(Scalable Vector Graphics)는 벡터 방식의 2차원 그림을 그리기 위한 XML기반의 마크업 언어입니다. SVG는 텍스트 기반의 표준 방식이며,
HTML이나 CSS를 이용하여 사용 할 수 있습니다. SVG는 XML 파일을 기반으로 하고 있기 때문에 인덱싱이나 압축이 가능하며, 일러스트레이터와 같은 프로그램을
통해 편집도 가능합니다. |
| table |
표를 설정합니다. |
| tbody |
표의 본문 영역을 그룹화합니다. |
| td |
표의 열(셀)을 설정합니다. |
| template |
페이지가 로드 될 때 렌더링되지 않고 자바스크립트를 이용하여 HTML을 표현해주는 태그입니다. 템플릿을 설정하고 내용은 스크립트를 통해 처리하는 방식입니다. |
| textarea |
태그는 여러줄의 텍스트를 편집할 수 있습니다. 코멘트 또는 피드백 양식으로 크기와 여러가지 속성을 설정할 수 있습니다. 접근성을 위해 <label> 요소를 같이
사용하며, 서버에 전송하기 위해 name 속성도 같이 사용합니다. row와 col 속성을 사용하면 텍스트 영역을 지원할 수 있으며, 브라우저마다 기본 값이 다를 수
있습니다. maxlength 속성을 이용하면 최대 문자수와 최소 문자수를 지정할 수 있으며, 필수 요소인 경우 필수요소로 설정할 수 있습니다. wrap 속성은 글의
줄바꿈을 설정할 수 있으며, placeholder를 이용하면 텍스트 영역의 미리보기 힌트 글자를 설정 할 수 있습니다. |
| tfoot |
표의 푸터 영역을 그룹화합니다. |
| th |
행이나 열에 타이틀을 설정합니다. |
| thead |
표의 헤더 영역을 그룹화합니다. |
| time |
시간의 특정 기간을 나타낼 때 사용합니다. 날짜를 인식하기 위해서는 datetime 속성을 같이 사용하며 엔진 결과나 알림 같은 기능을 개선 할 수 있습니다. 시간은
24시간을 기준으로 설정하며 날짜는 그레고리력(Gregorian calendar)을 기준으로 표현합니다. |
| title |
브라우저의 제목 또는 탭에 표시되는 문서의 제목을 표시합니다. 타이틀에는 텍스트만 설정할 수 있으며, 태그들은 무시됩니다. 웹 사이트의 가장 중요한 제목을 표시하며,
검색에 있어서도 가장 중요한 부분입니다. 제목은 검색 결과 페이지를 나열하는 순서를 결정하는데 가장 중요한 구성요소이며, 독자의 주의를 끌 수 있는 가장 중요한
부분입니다. 그래서 독자의 주의를 표시하기 위하며 의미 없는 단어의 작업은 검색에 있어 효율적이지 못하며, 한 단어 또는 두 단어의 제목도 피하는게 좋습니다. 검색
엔진은 일반적으로 페이지에 제목 중 50~60자 정도만 표시해 줍니다. 그래서 그 이상 쓰는 것도 좋지 않습니다. 그 이후의 글자는 생략 될 수 도 있습니다. 자신의
사이트 내에서 가장 핵심적인 부분만 제목으로 설정하는게 좋으며, 중복적으로 사용하는 것도 검색결과를 부정확하게 만들 수 있으므로 가장 중요한 제목은 한번 정도가
핵심적으로 사용하는 것이 좋습니다. |
| tr |
표의 행을 설정합니다. |
| track |
<video> 태그와 <audio> 태그의 자막을 설정합니다. 자막은 vvt 파일을 이용하여 사용합니다. |
| tt |
타자모양의 텍스트를 보여주기 위한 태그입니다. HTML5에서 지원하지 않으며, 지금은 사용하지 않는 태그입니다. |
| u |
HTML4에서는 밑줄을 표시하기 위해서 사용하였습니다. 하지만 밑줄 기능은 CSS로 충분히 표현 가능하기 때문에 더 이상 사용하지 않게 되었습니다. HTML5에서는
철자 오류 및 주석 표시를 위한 태그로 의미가 변경되었습니다. 이 태그는 밑줄을 표시하기 위한 디자인적인 요소로 사용하면 안됩니다. 철자 오류 및 주석 표시를 위한
태그입니다. 밑줄을 표시하기 위함이라면 text-decoration 속성을 이용하면 됩니다. |
| ul |
일반적인 글이나 문장을 쓴다면 <p> 태그를 사용합니다. <ul> 태그는 일반적인 글 보다는 목록 형식의 글을 사용할 때 씁니다. 목록을 쓸 때 순서가
상관이 없다면 <ul> 태그를 사용하며, 순서가 상관이 있다면 <ol> 태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 <dl> 태그를
사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에 이 때에는 <li> 태그를 같이 사용해야 합니다. <dl> 태그의 경우에는 <dt> 또는
<dd>를 같이 사용합니다. |
| var |
수학적인 변수나 프로그램의 변수를 쓸 때 사용합니다. 일반적으로 기울기체로 표시되지만 브라우저마다 다릅니다. |
| video |
웹 문서에 동영상을 재생하는 미디어 플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지 속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM,
avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다.
<source> 태그를 사용하여 비디오 파일을 불러올 수 있습니다. |
| wbr |
줄바꿈 할 위치를 정의할 때 사용합니다. |