[HTML] html5 tag 정리

<!--> : 주석

<!DOCTYPE html>

// a

<a> : 링크연결

target=""

_blank : 새창열기

_parent : 부모창에 열기

_self : 자신의 창에서 열기

_top : 화면이 여러 프레임으로 이루어져 있을 시 모든 프레임을 지우고 전체 화면에 열기

[name] : 지정된 이름에 링크 열기

<abbr> : 생략어/스펠링(요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)

The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

<acronym> : 두문자어/단어 (요소 위에 마우스를 올리면 title속성의 내용이 툴팁으로 나옴)

Can I get this <acronym title="as soon as possible">ASAP</acronym>?

<address> : 연락처

<area> : 이미지맵의 영역

<article> : 문서내에서 독립적인 컨텐츠

<aside> : 사이드 바

<audio> : 오디오 파일 재생

// b

<b> : 텍스트 굵게

<base> : html문서의 기준 URL을 명시(head요소 안에서 사용)

<bdi>: 텍스트 출력 방향을 브라우저가 판단해 표현

<li>User <bdi>إيان</bdi>: 90 points</li>

=> 아랍어는 오른쪽에서 왼쪽으로.. 하지만 bdi태그 쓰면 왼쪽에서 오른쪽으로..

<bdo> : 텍스트의 방향을 명시적으로 지정

<bdo dir="rtl">This text will go right-to-left.</bdo>

=> rtl : right to left

=> ltr : left to right

<blockquote> : 텍스트를 인용문으로 정의

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
</blockquote>

<body> : 문서의 메인 컨텐트

<br> : 줄바꿈

<button> : 버튼

- autofocus : 페이지를 로드할때 해당 요소가 자동으로 포커스를 받도록 지정합니다.

- disabled : 포커스, 선택, 변경 등의 조작이 불가능하게 하고 데이터도 서버에 전송하지 않는다. 불리언 속성입니다.

- name="이름" : 버튼의 식별자를 지정합니다.

- type=버튼의 종류를 지정합니다

submit : 폼을 제출합니다. 기본값입니다.

reset : 폼을 리셋합니다.

button : 아무것도 하지 않습니다.

- value="값" : 전송되는 데이터의 초기값 지정합니다.

// c

<canvas> :

<canvas id="myCanvas"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 80, 80);
</script>

<caption> : 테이블 제목

<cite> : 작품의 제목

<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

<code> : 컴퓨터 코드

<col> : 테이블에서 하나 이상의 행

<colgroup> : 테이블에서 하나 이상의 행의 그룹

// d

<data>

<datalist> : 다른 컨트롤을 위해 미리 정의된 옵션의 집합

<dd>

<del> : 문서로부터 삭제되었음을 표시

<details> : 추가정보

<dfn> : 텍스트를 전문용어나 관용구등의 정의어로 지정

<dialog> : 팝업, 모달

<dialog open>This is an open dialog window</dialog>

<dl>

<dt>

// e

<em> : 내용 강조

// f

<fieldset> : 여러개의 컨트롤과 라벨을 그룹화

<figcaption> : 부모요소인 figure요소의 내용들에 대한 제목

<figure>: 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도

<form>

// h

<h1> - <h6> : 제목

<head>

<hr> : 문단에서 주제의 분리(단락들 사이에 의미적 구분이 있을 때 사용 = 구분선 )

<html>

// i

<i> : 텍스트 이탤릭체

<img>

<input>

<ins> : 문서에 추가된것을 나타낸다

// k

<kbd> : 사용자 입력(키보드나 음성명령등)을 정의

// l

<label>

<li>

<link>

// m

<main>

<map>

<mark> : 텍스트 마킹 하이라이트

<p>Do not forget to buy <mark>milk</mark> today.</p>

<menu>

<meta>

<meter> : 디스크 사용현황, 쿼리 결과의 관련성 등 분포 비율

- value : 필수요소로 게이지에 표시되는 측정 값을 나타냅니다.

- min : 게이지 범위의 최소값을 나타냅니다 .

- max : 게이지 범위의 최대값을 나타냅니다.

- low : 게이지의 범위를 낮은 범위로 추정될 만한 범위를 지정합니다.

- high : 게이지의 범위를 높은 범위로 추정될 만한 범위를 지정합니다.

- optimum : 게이지의 범위를 최적인 범위로 추정될 만한 범위를 지정합니다.

- form : 명시적인 폼 소유자를 지정합니다.

// n

<nav>

// o

<ol>

<optgroup> : select요소의 자식 요소로 option요소로 이루어진 항목을 그룹화한다.

<option> : select요소의 자식 요소로 각 항목을 정의한다.

<output> : 계산의 결과를 나타낸다.

- for : 계산과 관련이 있는 요소 사이에 명시적인 연결을 위해 사용합니다.

- form : 폼 소유자를 명시적으로 지정하기위해 사용됩니다.

- name : 폼 제출시 사용되는 폼 컨트롤의 이름을 나타냅니다.

// p

<p>

<param> : object요소에 의해 불러와지는 플러그인을 위한 매개변수를 정의

<picture> : 반응형에 적합. 뷰포트 너비에 따라 하나 또는 그 이상의 이미지를 확대 또는 축소하는 대신 여러 개의 이미지를 사용할 수 있다.

- srcset (필수) - 표시 할 이미지의 URL을 정의합니다.

- media - 일반적으로 CSS에 정의 된 유효한 미디어 쿼리를 수락합니다.

- sizes - 단일 너비 설명자, 너비 설명자가 포함 된 단일 미디어 쿼리 또는 너비 설명자가있는 쉼표로 구분 된 미디어 쿼리 목록을 정의합니다.

- type - MIME 유형을 정의합니다.

<pre> : 형식화된 텍스트를 그대로 보여준다.

// q <q>

// r <rp>

<rt>

<ruby>

// s

<s>

<samp>

<small>

<span>

<style>

<sub>

<sup>

// t

<table>

<tbody>

<td>

<tfoot>

<th>

<thead>

<time>

<title>

<tr>

<track>

<tt>

// u

<u>

<ul>

// v

<var>

<video>

// w

<wbr>

728x90

저작자표시 비영리 (새창열림)

'Web > Markup | WEB' 카테고리의 다른 글

[SEO] 메타태그 최적화 (0)	2021.06.07
[퍼블리싱] 퍼블리셔 (0)	2021.02.10
파비콘 (0)	2018.05.30
[HTML] View Port(뷰포트 설정) (0)	2018.05.15
[HTML] 시맨틱태그 (0)	2018.05.15

'Web > Markup | WEB' 카테고리의 다른 글

티스토리툴바