코드랩 레퍼런스

HTML Element 본문

BASIC

HTML Element

webstoryboy 2017. 5. 11. 16:00
HTML 요소를 기능별로 정리하면 Main Root, Metadata, Content Sectioning, Text Content, Inline Text Semantics, Image and Multimedia, Embedded Content, Scripting, Demarcating Edits, Table Content, Forms, Interactive Elements, Obsolete and Deprecated Elements 같이 분류 할 수 있습니다.

Main Root

요소 설명 버전
<html> <html> 태그는 HTML 문서의 최상위 루트를 나타나태는 요소입니다. -

Metadata

요소 설명 버전
<base> <base> 태그는 문서의 모든 URL의 기본이 되는 기본 URL을 설정합니다. -
<head> <head> 태그는 사이트의 헤더 요소들의 일반적인 정보를 설정합니다. -
<link> <link> 태그는 문서와 외부 파일 연결 할 때 설정합니다. -
<meta> <meta> 태그는 문서에 대한 정보를 제공합니다. -
<style> <style> 태그는 문서에 대한 스타일 정보를 정의합니다. -
<title> <title> 태그는 문서에 대한 스타일 정보를 정의합니다. -

Content Sectioning

요소 설명 버전
<address> <address> 태그는 웹 페이지의 연락처 정보를 설정합니다. -
<article> <article> 태그는 웹 문서 내에 독립적인 컨텐츠를 정의합니다. html5
<aside> <aside> 태그는 웹 문서 내에 사이드 컨텐츠를 정의합니다. html5
<footer> <footer> 태그는 웹 문서 내에 사이트 푸터 영역을 정의합니다. html5
<h1>~<h6> <h1>~<h6> 태그는 제목 영역을 설정합니다. -
<header> <header> 태그는 웹 문서 내에 소개 및 내비 영역을 정의합니다. html5
<hgroup> <hgroup> 태그는 제목 요소 그룹화를 정의합니다. html5
<nav> <nav> 태그는 웹 문서 내에 네비게이션 링크를 정의합니다. html5
<section> <section> 태그는 주제별 그룹의 콘텐츠 섹션을 정의합니다. html5

Text content

요소 설명 버전
<blockquote> <blockquote> 태그는 긴 문장의 인용문을 정의합니다. html5
<dd> <dd> 태그는 <dl> 요소의 설명을 정의합니다. -
<div> <div> 태그는 문서의 영역을 나누거나 그룹화 할 때 사용합니다. -
<dl> <dl> 태그는 설명 목록을 정의합니다. -
<dt> <dt> 태그는 설명 목록의 용어 및 이름을 정의합니다. -
<figcaption> <figcaption> 태그는 <figure> 요소의 제목을 정의합니다. html5
<figure> <figure> 태그는 그림, 도표, 사진, 코드 등의 표현을 정의합니다. html5
<hr> <hr> 태그는 단란간의 주제별 구분을 나타냅니다. -
<li> <li> 태그는 목록의 항목을 정의합니다. -
<main> <main> 태그는 웹 문서의 주요 콘텐츠 그룹화를 정의합니다. html5
<ol> <ol> 태그는 순서가 있는 목록을 정의합니다. -
<p> <p> 태그는 문단을 정의합니다. -
<pre> <pre> 태그는 마크업의 공백 및 줄바꿈을 정의합니다. -
<ul> <ul> 태그는 순서가 없는 목록을 정의합니다. -

Inline text semantics

요소 설명 버전
<a> <a> 태그는 하이퍼 링크를 정의합니다. -
<abbr> <abbr> 태그는 생략된 글자나 머리글자를 표시하는데 사용합니다. -
<b> <b> 태그는 글씨를 두껍게 표현할 때 사용합니다. -
<bdi> <bdi> 태그는 텍스트의 출력 방향을 브라우저가 판단해 표현합니다. -
<br> <br> 태그는 텍스트를 줄바꿈 할 때 사용합니다. -
<cite> <cite> 태그는 작품의 제목을 정의합니다. -
<code> <code> 태그는 마크업 코드를 정의합니다. -
<data> <code> 태그는 마크업 코드를 정의합니다. -
<dfn> <dfn> 태그는 전문적인 용어를 정의할 때 사용합니다. -
<em> <em> 태그는 텍스트를 강조하는데 사용합니다. -
<i> <i> 태그는 음성이나 분위기 등의 텍스트를 정의합니다. -
<kbd> <kbd> 태그는 키보드 입력을 정의합니다. -
<mark> <mark> 태그는 참조용 표시를 정의합니다. -
<q> <q> 태그는 짧은 인용을 정의합니다. -
<rp> <rp> 태그는 루비 주석을 괄호로 표현하기 위해서 사용합니다. -
<rt> <rt> 태그는 루비 주석에 대한 설명이나 발음을 정의합니다. -
<rtc> <rtc> 태그는 루비 주석에 대한 표시문자를 정의합니다. -
<ruby> <ruby> 태그는 루비 주석을 정의합니다. -
<s> <s> 태그는 정확하지 않거나 올바르지 않은 텍스트를 정의합니다. -
<samp> <samp> 태그는 컴퓨터 프로그램의 샘플 출력을 식별하기위한 요소입니다. -
<small> <small> 태그는 저작권 또는 법적인 텍스트를 정의합니다. -
<span> <span> 태그는 인라인 요소 그룹화를 정의합니다. -
<strong> <strong> 태그는 중요한 의미를 갖는 텍스트를 정의합니다.< -
<sub> <sub> 태그는 텍스트 아래첨자를 정의합니다. -
<sup> <sup> 태그는 텍스트 위첨자를 정의합니다. -
<time> <time> 태그는 날자와 시간을 정의합니다. -
<u> <u> 태그는 밑줄을 표시할 때 사용합니다. -
<var> <var> 태그는 프로그램 코드에서 변수를 정의합니다. -
<wbr> <wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. -

Image and Multimedia

요소 설명 버전
<area> <area> 태그는 이미지 맵의 영역을 정의합니다. -
<audio> <audio> 태그는 오디오 파일을 정의합니다. -
<img> <img> 태그는 문서에 이미지를 표현할 때 사용합니다. -
<map> <map> 태그는 이미지 맵을 정의합니다. -
<track> <track> 태그는 미디어 요소의 트랙을 지정합니다. -
<video> <video> 태그는 미디어 영상을 재생합니다. -

Embedded content

요소 설명 버전
<embed> <embed> 태그는 외부 어플리케이션을 연결합니다. -
<object> <object> 태그는 문서내에 포함된 멀티미디어 요소를 정의합니다. -
<param> <param> 태그는 <object> 태그의 매개변수를 정의합니다. -
<source> <source> 태그는 미디어 요소에 대한 소스를 지정하는데 사용합니다. -

Scripting

요소 설명 버전
<canvas> <canvas> 태그는 비트맵 방식의 그림을 정의합니다. -
<noscript> <noscript> 태그는 스크립트를 지원하지 않는 브라우저를 위한 대체 태그입니다. -
<script> <script> 태그는 스크립트를 정의합니다. -

Demarcating edits

요소 설명 버전
<del> <del> 태그는 문서의 삭제된(delete) 텍스트를 정의합니다. -
<ins> <ins> 태그는 문서에 삽입된 텍스트를 정의합니다. -

Table content

요소 설명 버전
<caption> <caption> 태그는 <table> 요소의 제목을 설정합니다. -
<col> <col> 태그는 <table> 요소 각 행에 대한 속성을 설정합니다. -
<colgroup> <colgroup> 태그는 <table> 요소 행의 그룹화를 정의합니다. -
<table> <table> 태그는 표를 정의합니다. -
<tbody> <tbody> 태그는 <table>의 본문을 그룹화합니다. -
<td> <td> 태그(table data)는 표의 셀을 정의합니다. -
<tfoot> <tfoot> 태그는 <table>의 푸터를 그룹화합니다. -
<th> <th> 태그는 표의 행이나 열에 머리말을 정의합니다. -
<thead> <thead> 태그는 표의 헤더를 그룹화합니다. -
<tr> <tr> 태그는 표의 행을 정의합니다. -

Forms

요소 설명 버전
<button> <button> 태그는 클릭 할 수 있는 버튼을 설정합니다. -
<datalist> <datalist> 태그는 <input> 요소의 미리 정의된 옵션의 리스트를 정의합니다. -
<fieldset> <fieldset> 태그는 폼 요소의 그룹 내부 영역을 설정합니다. -
<form> <form> 태그는 웹 서버에 정보를 제공하는 폼 컨트롤 유형을 정의합니다. -
<input> <input> 태그는 데이터를 입력할 수 있는 폼 컨트롤을 정의합니다. -
<label> <label> 태그는 <input> 요소의 라벨을 지정합니다. -
<legend> <legend> 태그는 <fieldset> 요소의 영역 제목을 정의합니다. -
<meter> <meter> 태그는 범위를 측정하는 게이지 정보를 정의합니다. -
<optgroup> <optgroup> 태그는 <option> 리스트를 그룹화합니다. -
<option> <option> 태그는 <select> 요소의 항목을 정의합니다. -
<output> <output> 태그는 계산의 결과를 보여줍니다. -
<progress> <progress> 태그는 작업의 진행상태를 정의합니다. -
<select> <select> 태그는 선택 목록을 정의합니다. -
<textarea> <textarea> 태그는 여러줄의 텍스트를 편집할 수 있는 컨트롤을 정의합니다. -

Interactive elements

요소 설명 버전
<details> <details> 태그는 컨텐츠를 숨기거나 보여줄 수 있습니다. -
<dialog> <dialog> 태그는 추가정인 정보를 팝업(박스) 형식으로 보여줍니다. -
<menu> <menu> 태그는 메뉴 리스트를 정의합니다. -
<menuitem> <menuitem> 태그는 메뉴 리스트 항목을 정의합니다. -
<summary> <summary> 태그는 <details> 요소 내용에 대한 요약 또는 제목을 정의합니다. -

Obsolete and deprecated elements

요소 설명 버전
<acronym> <acronym> 태그는 생략된 글자나 약어를 표시하는데 사용합니다. 현재는 사용하지 않는 태그입니다.
<applet> <acronym> 태그는 생략된 글자나 약어를 표시하는데 사용합니다. 현재는 사용하지 않는 태그입니다.
<basefont> <basefont> 태그는 문서의 기본 폰트, 사이즈, 종류를 설정합니다 현재는 사용하지 않는 태그입니다.
<big> <big> 태그는 텍스트 크기를 크게해줍니다. 현재는 사용하지 않는 태그입니다.
<blink> <blink> 태그는 텍스트를 깜박이게 합니다. 현재는 사용하지 않는 태그입니다.
<center> <center> 태그는 텍스트를 가운데 정렬합니다. 현재는 사용하지 않는 태그입니다.
<command> <command> 태그는 사용자가 호출 할 수 있는 명렁어를 설정합니다. 현재는 사용하지 않는 태그입니다.
<content> <content> 태그는 DOM 요소에 가상 요소를 삽입합니다. 현재는 사용하지 않는 태그입니다.
<dir> <dir> 태그는 디렉토리 제목을 나열하는데 사용합니다. 현재는 사용하지 않는 태그입니다.
<font> <font> 태그는 폰트의 크기, 색, 종류를 설정합니다. 현재는 사용하지 않는 태그입니다.
<frame> <frame> 태그는 다른 HTML문서가 표시 될 수 있는 특정 영역을 설정합니다. 현재는 사용하지 않는 태그입니다.
<keygen> <keygen> 태그는 보안키를 생성하고 컨트롤합니다. 현재는 사용하지 않는 태그입니다.
<marquee> <marquee> 태그는 텍스트의 스크롤과 움직임을 정의합니다. 현재는 사용하지 않는 태그입니다.
<tt> <tt> 태그는 타자모양의 텍스트를 정의합니다. 현재는 사용하지 않는 태그입니다.

Ad

Comments