필자가 이해한 수준으로만 작성되어있으며 자세한 내용은 https://www.w3schools.com/tags 에서 살펴보실 수 있습니다.

`<!-->`

주석 태그

`<!DOCTYPE>`

모든 HTML 문서는 <!DOCTYPE> 이 선언되어야한다.

대소문자를 구분하지 않는다.
가장 최신 버전인 HTML5의 태그가 가장 간소화 되어있다. <!DOCTYPE html>

`<a>`

다른 페이지로 이동하는 사용되는 하이퍼링크를 정의한다.

속성 href : 링크의 도착지를 가리킨다.

특징
링크 기본 외형
방문하지 않은 링크의 경우 밑줄과 파란색
방문했던 링크의 경우 밑줄과 보라색
활성화된 링크의 경우 밑줄과 빨간색
target 특성을 따로 지정하지 않으면 기본적으로 현재 창에서 페이지를 연다.

`<abbr>`

약어 표현을 할 수 있습니다.

속성 title: 원말 작성

`<acronym>`

abbr 태그로 대체되었다.

`<address>`

이메일, URL, 집주소, 핸드폰 번호 등의 연락처를 표현할 때 사용

특징
기본적으로 이태릭체로 적용됩니다.
address 태그 앞 뒤로 줄바꿈이 발생합니다.

`<applet>`

웹 페이지에 포함되어 작은 기능을 수행하는 프로그램을 정의할 때 사용했으나 HTML5에서 제외됨. <embed> 요소나 <object> 요소로 대체

`<area>`

는 항상 <map> 내부에 위치한다.
map을 분할하여 영역 지정할 수 있다.

예제 코드를 보는 것이 이해가 빠르겠다.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

`<article>`

그 자체로 의미가 있는 영역을 구분할 때 사용
사이트의 나머지 부분과 독립적으로 두고보아도 배포할 수 있는 수준의 영역

특징
기본적으로 렌더링 요소에 영향을 미치지는 않는다.
forum post, blog post, news story 등 요소를 추천

`<aside>`

aside로 분류되는 컨텐츠는 메인 컨텐츠의 내용과 간접적으로 관계가 있어야 한다.
aside 컨텐츠는 문서 내 sidebar로 배치되기도 한다.

특징
기본적으로 렌더링 요소에 영향을 미치지 않는다.

`<audio>`

음악, audio sream을 문서에 포함하기 위해서 사용
하나 이상의 <source>를 포함한다.
모든 브라우저에서 사용할 수 있는 확장자는 MP3, WAV (OGG는 Safari가 지원안함)

`<b>`

bold 처리

`<base>`

하나의 문서에는 오로지 하나의 base 만 존재할 수 있고, base는 <head>태그에 위치하게 된다. href와 target 특성을 가지며 다음과 같이 사용할 수 있다.

<a href="tags/tag_base.asp">

`<basefont>`

HTML5에서 지원 안 함

문서의 기본 text-color나 font-size 등을 정의하는데 사용했으나 현재는 css에서 모두 처리 한다.

`<bdi>`

오른쪽에서 왼쪽으로 작성되는 언어 군이 필요할 때 사용한다.

`<bdo>`

dir property에 ltr 또는 rtl을 작성하여 텍스트 작성 방향을 지정해줄 수 있다.

`<big>`

HTML5에서 지원 안 함

더 큰 텍스트를 표현할 때 사용했음. 현재는 CSS로 처리

`<blockquote>`

다른 출처로부터 인용된 블록을 정의할 때 사용
들여쓰기로 표현

속성 cite : URL 작성 (인용된 내용의 출처 명시)

`<body>`

document의 body를 정의, 문서에 오직 하나만 존재

heading
paragraphs
images
hyperlinks
tables
etc..

`<br>`

공백없이 줄바꿈

`<button>`

클릭가능한 버튼
input으로 만든 버튼과 차이 i태그, b태그 stonrg 태그, img 태그 등을 포함할 수 있다. input에서는 img 쓰려면 background-image를 써야함.
기본 type 속성으로 submit을 갖는다.

`<canvas>`

scripting(주로 Javascript)를 통해 그래픽을 그리는데 사용한다. canvas 태그 자체는 container의 역할만 하는 것이고 실제로 그래픽을 그리기 위해서는 스크립트를 사용해야 한다.

`<caption>`

table 에서 캡션을 달 때 사용한다.
반드시 table 태그 바로 다음에 위치해야 한다.
style="caption-side:bottom" 이런 식으로 캡션 위치 바꿔줄 수 있고, text-align도 동작한다.

`<center>`

HTML5에서 지원 안 함

text-align 쓰자

`<cite>`

책이나 음악, 영화, 예술 작품 등 창작물의 제목을 정의할 때 사용한다.

이텔릭체로 표현

`<code>`

code 태그는 컴퓨터 코드를 표현할 때 사용한다.

`<col>`

table의 colgroup에 각 열을 의미하는 col이다. 스타일을 적용할 때 주로 사용

span 태그를 통해서 몇 개의 열을 포함할지 지정

`<colgroup>`

태이블의 하나 이상의 열 그룹을 지정한다.

table의 요소로만 사용되며, caption보다는 다음에, thead, tbody, tfoot등 보다는 앞에 위치한다.

`<data>`

기계가 읽을 수 있는(machine-readable) 데이터 형식을 표현하기 위해서 사용.

value 속성의 값을 기계가 해석하게 된다.
safari에서는 지원하지 않는다.

`<datalist>`

input 요소에 작성될 내용을 미리 list에 정의할 수 있다.

자동완성 기능 제공
드롭 다운 리스트에서 리스트 구성 확인 가능
예시를 보면 이해가 잘 된다.

<form action="/examples/media/action_target.php" method="get">
    학과 : <input type="text" name="st_department" list="depList"><br>
    이름 : <input type="text" name="st_name"><br><br>
    <datalist id="depList">
        <option value="컴퓨터공학과"></option>
        <option value="영어영문과"></option>
        <option value="경영학과"></option>
        <option value="사회체육과"></option>
    </datalist>
    <button type="submit">제출하기</button>
</form>

`<dd>`

description list의 description

dd 태그는 dl 내에서 설명 파트를 담당하고 있다.

구문, 줄바꿈, 이미지, 링크 등이 들어갈 수 있다.

`<del>`

문서에서 지워진 표시를 나타낼 때 사용.
반대는 <ins> insert다.
~~지워짐~~ 삽입됨

속성
cite : 취소선을 사용하게 되는 근거를 제공하는 사이트 주소
datetime : 언제 삭제(취소)되었는지 명시

`<details>`

다음과 같은 구조로 summary와 함께 사용하여 열고닫을 수 있는 토글 section을 만들 수 있다.

기본적으로 닫혀있다. (open 속성을 부여해서 열어둘 수도 있다.)
details 태그에는 모든 종류의 콘텐츠를 넣을 수 있다.

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

`<dfn>`

정의 요소를 나타낸다.
dfn 태그 속성으로 title을 작성하거나, dfn 하위 태그로 abbr 태그를 생성하여 title을 작성하는 것으로 응용할 수 있다.

`<dialog>`

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

dialog 또는 subwindow를 정의한다.
popup dialog나 modal을 만들기 쉽게 해준다.

safari에서 지원하지 않으니 주의하자.

`<dir>`

HTML5에서 지원 안 함

ul 쓰자

`<div>`

영역 구분, container 등으로 사용한다.
해당 영역에 class, id 를 부여하여 style을 적용시키기 좋다.

기본적으로 div 앞 뒤로는 줄바꿈이 발생한다.

`<dl>`

description list

`<dt>`

description list의 title

`<em>`

텍스트 강조를 위해서 사용
기울임꼴로 표시된다.

`<embed>`

이미지, 영상, html 페이지 등 외부 자원을 삽입할 때 사용

type과 src를 명히새허 다양한 요소 삽입가능
img video audio iframe 태그 쓰는 것을 권장한다.

`<fieldset>`

fieldset 태그는 form과 관련 요소를 그룹화하는데 사용한다.

<legend> 로 fieldset의 캡션을 정의할 수 있다.

`<figcaption>`

figure 태그의 caption을 정의

`<figure>`

삽화, 사진, 도형, 등 콘텐츠에 대한 설명을 입력할 때 사용한다.

이미지로만 이뤄진 container를 이전에는 div로 사용했다면 이제는 figure로 구분할 수 있다. (HTML5에 추가된 태그다.)

`<font>`

HTML5에서 지원 안 함

폰트 크기, 색상 등 지정하기 위해서 사용했으나 그냥 css 쓰자

`<footer>`

문서나 섹션의 하단부를 정의(바닥글)

저작권 정보
연락처 정보
사이트 맵
관련 문서 등

`<form>`

사용자 입력을 받는 form을 생성한다.

input
textarea
select
option
optgroup
filedset
label
output 위는 form 요소이며 1개 이상 form에서 포함할 수 있다.

`<frame>`

HTML5에서 지원 안 함

대신 iframe을 사용한다.

`<frameset>`

HTML5에서 지원 안 함

iframe 쓰자

`<h1> to <h6>`

가장 중요한 heading text는 h1 태그를 이용

`<head>`

metadata를 담는 요소이다. html태그와 body 태그 사이에 위치한다.

title (모든 html 문서에서 필요하다.)
style
base
link
meta
script
noscript

`<header>`

소개 콘텐츠 또는 네비게이션 링크 집합의 컨테이너를 담는다. 일반적으로 다음과 같은 요소가 포함된다.

하나 이상의 heading text
로고
저작권 정보

`<hr>`

주제 구분을 위해서 가로 선 삽입할 때 사용

`<html>`

HTML 문서의 root를 나타낸다. 다른 모든 HTML 요소의 컨테이너이다. (<!DOCTYPE>제외)

웹페이지 언어 선언을 위해서는 항상 태그 내부에 lang 속성을 명시해야 한다.(<html lang="en">)

`<i>`

다른 분위기나 음성을 위한 텍스트 영역 정의할 때 사용 : 이탤릭체로 표현

`<ifram>`

인라인 프레임을 지정

인라인 프레임은 현재 HTML 문서 내에 다른 문서를 포함하고자 할 때 사용한다.

`<img>`

HTML 페이지에 이미지 추가할 때 사용한다.

기술적으로 삽입되는 것이 아니라 웹페이지가 링크되는 것이고, 참조된 이미지를 위한 공간이 마련된다.
필수 속성 src : 이미지 경로지정 alt : 이미지 표시할 수 없는 경우의 대체 텍스트
너비와 높이가 지정되지 않으면 이미지가 로드되는 동안 페이지가 깜빡일 수 있다.

`<input>`

사용자가 데이터를 입력할 수 있는 Input filed를 생성한다.

부여되는 속성에 따라 다르게 표시될 수 있다.

<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text"> (default value)
<input type="time">
<input type="url">
<input type="week">

`<ins>`

del 태그와 반대로 입력된 데이터를 표시할 때 사용한다. ins : insert

`<kbd>`

kbd 태그는 키보드 입력을 표현할 때 사용한다.

`<label>`

다음 input type에 대하여 label을 작성할 수 있다.

<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
<meter>
<progress>
<select>
<textarea>

label을 작성하면 다음 장점이 있다.

스크린 리더 사용자(접근성) - 해당 input에 focus되었을 때 레이블을 소리내어 읽어준다.
사용자가 요소 내의 텍스트를 클릭하면 label 입력이 토글된다. (클릭 적중률 향상)

for 속성 label의 for 속성이 input의 id 속성과 같아야 바인딩 된다.

`<legend>`

legend 태그는 fieldset 요소를 위한 캡션을 정의한다.

`<li>`

ol, ul, menu 등의 태그 내부에서 리스트(목록) 아이템을 정의

`<link>`

rel 속성 : 현재 문서와 외부 문서와의 관계 정의
element content 자체는 비어있다.(속성만 정의하여 사용한다.)
favicon 설정할 때도 사용

`<main>`

문서의 메인 콘텐츠를 정의한다.

문서에는 단 하나의 main만 존재할 수 있다.
문서에서 반복되는 양식이나 내용을 담지 않는다.
article, aside, footer, header, nav 의 자식이 될 수 없다.

`<map>`

image map을 정의한다.

image map 이란 기존 이미지 위에 클릭 가능한 영역이다.

img 태그의 usemap 속성을 생성하고 imagedhk map 사이의 관계를 정의한다.

다음 예제코드를 참고하자.

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

`<mark>`

형광펜으로 칠한 것처럼 텍스트를 강조한다.

`<meta>`

html 문서의 metadata를 정의한다.

Metadata 데이터에 대한 정보

항상 head 태그 내부에 위치한다.
charset, page desc, keywords, viewport 등의 설정을 작성한다.
페이지에 표시되지는 않지만 Machine으로 부터 파싱된다.

`<meter>`

일정 범위 안에서의 값이나 분포 비율을 나타낼 때 사용
progress는 진행상태를 표시한다면 meter는 결과값을 나타낸다고 이해하면 된다
Edge 12이전 버전에서는 지원되지 않는다.(13부터 지원)

`<nav>`

네비게이션 링크들의 집합이다.

`<noframes>`

HTML5에서 지원 안 함

대신 iframe을 사용한다.

`<noscript>`

script가 지원되지 않는 경우에 표시할 컨텐츠를 담는다.

`<object>`

<object> 태그는 외부 리소스의 종류에 따라 문서 내에서 처리하는 방식을 변경할 수 있는 임베디드 객체(embedded object)를 정의할 때 사용한다.

`<ol>`

순서가 있는 리스트를 정의한다.

속성 reversed : 반대로 나열 start : 시작할 값 지정 type : 1, A, a, I, i 중 한가지로 marker type 설정

`<optgroup>`

select 태그에서 option이 많아질 때 핸들링하기 편하도록 optgroup을 생성하여 관리할 수 있다.

`<option>`

select list의 각 옵션을 정의한다.

속성없이도 사용가능하지만 value 속성을 사용해야 form 제출 할 때 값 전달이 가능하다.

`<output>`

계산 결과를 나타내는 데 사용한다. 다음 예시를 보면 이해가 쉽다.

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

`<p>`

단락을 정의한다.

`<param>`

object 요소에 대한 매개변수를 정의할 때 사용한다.

`<picture>`

picture 태그를 사용하면 이미지 리소스를 유연하게 지정할 수 있다.

view port 너비에 따라서 축소, 확대 되는 하나의 이미지를 갖는 대신에 여러 이미지를 상황에 맞게 보여지게끔할 수 있다.
picture에는 하나이상의 source와 img 태그가 포함된다.

`<pre>`

pre 요소의 텍스트는 고정 너비 글꼴로 표시되며 텍스트는 공백과 줄 바꿈을 모두 유지한다.

`<progress>`

작업의 진행 정도를 보여줄 때 사용

label 적용이 가능하다.

`<q>`

짧은 인용문을 정의한다.

긴 인용문은 blockquote를 사용하자.

`<rp>`

ruby 주석을 지원하지 않는 브라우저에서 사용한다. ruby, rt, rp는 함께 사용한다.

`<rt>`

ruby 주석에서 문자(동아시아 타이포그래피용)의 설명 또는 발음을 정의한다.

`<ruby>`

ruby 주석을 지정한다.

ruby 주석은 해당 문자의 발음이나 의미를 나타내기 위해 본문에 첨부된 작은 추가 텍스트이다. (주로 일본 출판물에서 자주 사용)

`<s>`

del과 마찬가지로 지워진 텍스트를 나타내지만, 사용 목적이 다르다. s는 더 이상 올바르지 않거나 관련이 없는 텍스트를 지정한다. (예를 들어 sold out)

del 태그는 완전히 문서에서 삭제할 텍스트를 지정한다.

`<samp>`

컴퓨터 프로그램의 샘플 출력을 정의할 때 사용한다.

더 이상 사용하지 않는다.

`<script>`

클라이언트 사이드 스크립트(JavaScript)를 포함할 때 사용한다.

스크립팅 문을 직접 포함하거나 외부 스크립트 파일을 가리킨다.

`<section>`

문서의 섹션을 정의한다.

`<select>`

drop-down 리스트를 만들 때 사용한다.

속성
name : form 제출 시 자용
id : label과 연결할 때 사용

접근성 향상을 위해서 label 태그를 사용하면 좋다.

`<small>`

작은 글씨 표시(카피라이트나 사이드 코멘트 등)

사용 가능하지만, css 사용하는게 더 낫다.

`<source>`

video, audio, picture 와 같은 미디어 요소에 여러 미디어 리소스를 지정하는 데 사용한다.

`<span>`

텍스트 일부 또는 문서의 일부를 마크업할 때 사용하는 인라인 컨테이너이다.

`<strike>`

del 과 s로 대체되었다.

`<strong>`

매우 중요한 텍스트를 정의할 때 사용한다. 굵게 처리하여 표시한다.

`<style>`

문서의 스타일정보(CSS)를 정의하는데 사용한다.

`<sub>`

아래첨자 텍스트를 정의한다.

`<summary>`

details 요소에 요약 제목을 정의한다.

details 요소의 첫 번째 자식이어야만 한다.

`<sup>`

위 첨자 텍스트를 정의한다.

`<svg>`

SVG 그래픽용 컨테이너를 정의한다.

경로, 상자, 원, 텍스트, 그래픽 이미지 등을 그리는 여러 방법이 있다. SVG Tutorial

`<table>`

HTML 테이블을 정의한다.

`<tbody>`

HTML 테이블의 본문 내용 그룹화에 사용한다.

하나 이상의 tr 태그를 포함해야한다.

`<td>`

HTML 테이블의 표준 데이터 셀을 정의한다.

`<template>`

페이지가 로드될 떄 사용자에게 숨겨진 일부 HTML 콘텐츠를 보관하는 컨테이너로 사용한다.

내부 콘텐츠는 Javascript로 렌더링 할 수 있다.

`<textarea>`

여러 줄의 텍스트 입력 컨트롤을 정의한다.
텍스트 영역의 크기는 cols와 rows 속성으로 지정한다.

`<tfoot>`

HTML 테이블의 바닥글 내용을 그룹화하는데 사용한다.

`<th>`

HTML 테이블의 헤더 셀을 정의한다.

`<thead>`

HTML 테이블의 헤더 내용을 그룹화하는 데 사용한다.

`<time>`

특정 시간을 정의한다.

이 요소의 datetime 속성은 식간을 기계가 읽을 수 있는 형식으로 변환하여 브라우저가 사용자의 달력을 통해 날짜 미리 알림을 추가하도록 제안하고 검색 엔진 최적화도 가능케한다.

`<title>`

문서의 제목을 정의한다.

검색엔진은 50~60자 를 표시하므로 더 긴 제목은 사용하지 말 것

`<tr>`

HTML 테이블의 행을 정의한다.

`<track>`

audio 또는 video 요소의 텍스트 트랙을 지정한다.

미디어가 재생될 때 표시되어야 할 자막, 캡션 파일 등을 지정하는데 사용한다.

`<tt>`

HTML5에서 지원 안 함

teletype 텍스트를 정의하기 위해 사용했으나 현재는 사용하지 않는다.

`<u>`

맞춤법이 틀린 단어나 중국어 텍스트의 고유명사와 같이 명확하지 않고 일반 텍스트와 스타일이 다른 일부 텍스트를 나타낸다. (밑줄 표시)

`<ul>`

순서가 없는 리스트를 정의한다.

`<var>`

프로그래밍 또는 수학 표현식에서 변수를 정의하는 데 사용한다.

기울임꼴로 표시한다.

`<video>`

동영상 클립이나 기타 비디오 스트림과 같은 문서에 비디오 콘텐츠를 포함하는 데 사용한다.

`<wbr>`

줄바꿈을 추가해도 좋은 위치를 지정한다.

한 단어가 아니라 단어간 사이에서는 효과가 없다.