HTML 항목별 전체 태그 (설명 미포함, MDN 번역)

FE/퍼블리싱 블로그·2021년 4월 11일

Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

<목차: HTML 태그 항목>

1. Main root (1)

html

2. Document metadata (6)

메타는 상위라는 뜻을 가지고 있다. 즉 문서가 가지고 있는 데이터를 설명해주는 데이터가 메타데이터이다. 소프트웨어 (검색 엔진이나 브라우저 등)가 페이지를 사용하고 렌더할 수 있게 돕는 style, script, data에 대한 정보를 가지고 있다.

1)Default Emmet

head
meta
title

link
style

3)Else

base

3. Sectioning root (1)

body

4. Content sectioning (9)

문서 내용을 논리적으로 나눌 수 있게 한다. Sectioning 태그(header, footer, navigation, h1~h6 등)를 이용해 페이지 내용의 큰 개요 및 섹션을 구분지을 수 있다.

1)header

header
h1~h6
nav

2)body

main
section
article
aside

3)footer

address
footer

5. Text content (13)

<body> 태그 안에서 text content 태그를 이용해 문서 내용의 구분을 지을 수 있다. 문서 내용의 목적이나 구조를 나타내게 도우며 '접근성'과 'SEO'에 큰 영향을 미친다.

1)list

ul
ol
- li

2)description

dl(description list)
- dt(description title)
- dd(description description)

3)figure

figure
fig-caption

4)else

4-1)sectioning

div
blockquote
hr

4-2)text

p
pre

6. Inline text semantics (31)

단어, 줄, 혹은 애매한 텍스트에 뜻, 구조, 스타일을 정의하게 도와준다.

1)bi-directional

bdi(bi-directional isolation)
bdo(bi-directional override)

2)underline-rendering

a(anchor)
u(unarticulated): misspelled, proper names in Chinese text. rendered in underline

3)emphasize-rendering

b(bold)
strong
em(emphasize)

4)italics-rendering

i(italics)
dfn(definition)
cite

5)monospace-font-rendering

code
kbd(keyboard)
samp(sample)

6)ruby

rb(ruby base)
rp(ruby fallback parenthesis)
rt(ruby text)
rtc(ruby text container)
ruby

7)else

abbr(abbreviation)
br
data
mark
q(quotation)
s(strikethrough)
small
span
sub(subscript)
sup(superscript)
time
var(variable)
wbr(word break)

7. Image and multimedia (6)

image, audio, video와 같은 멀티미디어를 지원하게 돕는다.

1)image map

map
area

2)multimedia

audio
img
video
track

8. Embedded content (7)

7번의 Image & multimedia를 제외하고 HTML에서 지원하는 다른 컨텐츠를 위한 태그를 갖고 있다.

1)multiple media resource

embed
object
param
source

2)nesting/embedding another HTML page

iframe
portal

3)else

picture

9. SVG and MathML (2)

SVG와 MathML을 곧장 HTML 문서 안에 넣기 위한 태그를 갖고 있다.

svg
math

10. Scripting (3)

동적인 컨텐츠 및 웹 앱을 만들기 위해 HTML은 '자바스크립트'와 같은 스크립팅 언어를 지원한다.

canvas: use either the canvas scripting API or the WebGL API to draw graphics and animations.
noscript: defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support script.
script: used to embed a client-side script (JavaScript).

11. Demarcating edits (2)

Demarcating은 '경계를 표시하다'라는 뜻을 갖고 있다. 텍스트의 수정된 특정 부분을 알려주는 태그를 갖는다.

Github에서 삭제되고 추가된 코드가 있을 때 deleted(빨강으로 표시)와 inserted(초록으로 표시) 를보여주는 것과 유사하다. (MDN에 적힌 내용이 아닌 개인 의견)

12. Table content (10)

테이블 형식의 데이터를 위한 태그를 갖는다.

1)table

table
tr

2)table head

thead
th

3)table body

tbody
td(table data)

tfoot

5)else

caption
colgroup
col

 <table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

13. Forms (14)

HTML 폼 구성을 위한 태그를 지닌다.

form
fieldset
legend
label
datalist
option
button
input
meter
optgroup
select
output
progress
textarea

14. Interactive elements (4)

상호작용이 가능한 UI 객체를 만들 수 있는 태그를 갖는다.

details
summary
dialog
menu

15. Web Components (2)

Web Components란 HTML과 관련된 기술로 커스텀 element를 만들 수 있게 도와주는 것이다. 원래 존재하는 HTML 태그처럼 기능한다. 표준 HTML 태그의 커스텀 버전도 만들 수 있다.

slot:
template

FE/퍼블리싱 블로그

이전 포스트

HTML 카테고리별 전체 태그 - 설명 포함 (Deprecated 제외)

다음 포스트