2025-05-07

HTML Tag Cheat Sheet

Table of contents

간단하게 살펴볼 수 있는 HTML 태그표입니다. 주요 출처 This is a simple HTML tag table for a reference. Reference site

태그명
Tag Name
의미
Meaning
지원
Support
자세히
Detail
<!--...--> 주석을 남길 때 사용합니다.
The comment tag is used to insert comments in the source code.
   
<!DOCTYPE> HTML 태그는 아니지만, 브라우저에 문서 타입을 알리기 위한 용도로 사용합니다.
The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
  DocType
<a> 하이퍼링크를 나타냅니다.
The <a> tag defines a hyperlink, which is used to link from one page to another.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag a
<abbr> 두문자어 또는 축약어의 정보를 제공합니다.
The <abbr> tag defines an abbreviation or an acronym, like “HTML”, “CSS”, “Mr.”, “Dr.”, “ASAP”, “ATM”.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag abbr
<address> 문서 또는 기사 소유자에 대한 컨택트 정보를 제공합니다.
The <address> tag defines the contact information for the author/owner of a document or an article.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag address
<area> 이미지맵에서 영역의 정보를 제공합니다.
The <area> tag defines an area inside an image map (an image map is an image with clickable areas).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag area
<article> 독립적이고, 그 자체로 충분히 내용을 포함한 영역을 정의하는데 사용합니다.
The <article> tag specifies independent, self-contained content.
크롬(Chrome):6.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag article
<aside> 본 컨텐츠하고 별개의 내용을 가진 컨텐츠가 있을 경우 사용합니다.
The <aside> tag defines some content aside from the content it is placed in.
크롬(Chrome):6.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag aside
<audio> 문서 내에 음성 컨텐츠를 삽입할 때 사용합니다.
The <audio> tag is used to embed sound content in a document, such as music or other audio streams.
크롬(Chrome):4.0
엣지(Edge):9.0
파이어폭스(FireFox):3.5
사파리(Safari):4.0
오페라(Opera):11.5
Tag audio
<b> 중요하다는 의미는 배제하고 bold 처리만 필요할 때 사용합니다.
The <b> tag specifies bold text without any extra importance.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag b
<base> 모든 상대 URL에 대한 base URL을 지정합니다.
The tag specifies the base URL and/or target for all relative URLs in a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag base
<bdi> 텍스트 내에서 특정 부분을 고립시킬 때 사용합니다.
The <bdi> tag isolates a part of text that might be formatted in a different direction from other text outside it.
크롬(Chrome):16.0
엣지(Edge):79.0
파이어폭스(FireFox):10.0
사파리(Safari):❌
오페라(Opera):15.0
Tag bdi
<bdo> 텍스트 방향을 덮어쓸 때 사용합니다.
The <bdo> tag is used to override the current text direction.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag bdo
<blockquote> 다른 소스를 인용하는 섹션에서 사용합니다.
The <blockquote> tag specifies a section that is quoted from another source.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag blockquote
<body> 문서의 body를 지정할 때 사용합니다.
The <body> tag defines the document’s body.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag body
<br> 줄을 넘길 때 사용합니다.
The <br> tag inserts a single line break.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag br
<button> 버튼을 정의합니다.
The <button> tag defines a clickable button.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag button
<canvas> 그래픽을 그릴 때 사용합니다.
The <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
크롬(Chrome):4.0
엣지(Edge):9.0
파이어폭스(FireFox):2.0
사파리(Safari):3.1
오페라(Opera):9.0
Tag canvas
<caption> 테이블에 대한 설명이 필요할 때 사용합니다.
The <caption> tag defines a table caption.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag caption
<cite> 창의적인 작업에 타이틀이 필요할 경우 사용합니다.
The <cite> tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag cite
<code> 컴퓨터 코드를 정의할 때 사용합니다.
The <code> tag is used to define a piece of computer code.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag code
<col> <colgroup> 엘리먼트 내부에서 각각의 column을 정의할 때 사용합니다.
The <col> tag specifies column properties for each column within a <colgroup> element.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag col
<colgroup> 서식을 구성하기 위해 테이블에서 한 개 이상의 column을 그룹화하는데 사용됩니다.
The <colgroup> tag specifies a group of one or more columns in a table for formatting.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag colgroup
<data> 컨텐츠의 인간 친화적 값에 기계 친화적 값을 추가할 때 사용합니다.
The <data> tag is used to add a machine-readable translation of a given content.
크롬(Chrome):62.0
엣지(Edge):13.0
파이어폭스(FireFox):22.0
사파리(Safari):❌
오페라(Opera):49.0
Tag data
<datalist> <input> 엘리먼트의 사전에 정의된 옵션을 명시하는데 사용합니다.
The <datalist> tag specifies a list of pre-defined options for an <input> element.
크롬(Chrome):20.0
엣지(Edge):10.0
파이어폭스(FireFox):4.0
사파리(Safari):12.1
오페라(Opera):9.5
Tag datalist
<dd> <dl>에서 이름/용어를 서술하는데 사용합니다.
The <dd> tag is used to describe a term/name in a description list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag dd
<del> 문서에서 삭제된 텍스트를 표시합니다.
The <del> tag defines text that has been deleted from a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag del
<details> 사용자의 필요에 따라 열고 닫을 수 있는 상세사항이 있을 경우 사용합니다.
The <details> tag specifies additional details that the user can open and close on demand.
크롬(Chrome):12.0
엣지(Edge):79.0
파이어폭스(FireFox):49.0
사파리(Safari):6.0
오페라(Opera):15.0
Tag details
<dfn> 컨텐츠 안에서 정의되는 용어를 명시하는데 사용합니다.
The <dfn> tag stands for the “definition element”, and it specifies a term that is going to be defined within the content.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag dfn
<dialog> 다이얼로그 박스 또는 서브윈도우를 표시할 때 사용합니다.
The <dialog> tag defines a dialog box or subwindow.
크롬(Chrome):37.0
엣지(Edge):79.0
파이어폭스(FireFox):98.0
사파리(Safari):15.4
오페라(Opera):24.0
Tag dialog
<div> HTML 문서에서 분할 혹은 섹션을 나타냅니다.
The <div> tag defines a division or a section in an HTML document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag div
<dl> <dl>(description list)를 뜻합니다.
The <dl> tag defines a description list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag dl
<dt> <dl> 내부에서 이름/용어를 표시하는 용도로 사용합니다.
The <dt> tag defines a term/name in a description list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag dt
<em> 강조하고자 하는 텍스트가 있을 경우 사용합니다.
The <em> tag is used to define emphasized text.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag em
<fieldset> form에서 관계된 엘리먼트들을 그룹화할 때 사용합니다.
The <fieldset> tag is used to group related elements in a form.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag fieldset
<figcaption> <figure> 엘리먼트에 설명을 추가할 때 사용합니다.
The <figcaption> tag defines a caption for a <figure> element.
크롬(Chrome):8.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.1
오페라(Opera):11.0
Tag figcaption
<figure> 일러스트레이션, 다이어그램, 포토, 코드 설명을 포함한 자체 컨텐츠를 포함하고 있는 영역을 표시할 때 사용합니다.
The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
크롬(Chrome):8.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.1
오페라(Opera):11.0
Tag figure
<footer> 문서 또는 섹션의 footer를 정의할 때 사용합니다.
The <footer> tag defines a footer for a document or section.
크롬(Chrome):5.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag footer
<form> 사용자 input에 대한 HTML form을 생성할 때 사용합니다.
The <form> tag is used to create an HTML form for user input.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag form
<h1>~<h6> HTML 제목을 정의할 때 사용합니다.
The <h1> to <h6> tags are used to define HTML headings.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag hn
<head> 메타데이터를 위한 영역으로 사용합니다.
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag head
<header> 주제에 대한 소개 또는 네비게이션 링크를 구성하는 영역으로 사용합니다.
The <header> element represents a container for introductory content or a set of navigational links.
크롬(Chrome):5.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag header
<hgroup> <h1>~<h6> 헤딩 영역과 한 개 이상의 <p> 엘리먼트가 관계된 내용일 경우 사용합니다.
The <hgroup> tag is used to surround a heading and one or more <p> elements.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag hgroup
<hr> 주제 전환 등이 있는 경우 사용합니다.
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag hr
<html> HTML 문서의 root를 표시할 때 사용합니다.
The <html> tag represents the root of an HTML document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag html
<i> 기술 용어, 다른 언어, 생각, 배 이름 등을 가리킬 때 종종 사용합니다.
The <i> tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag i
<iframe> Inline frame의 약자로 HTML 문서 내에서 다른 문서를 끼워 넣을 때 사용합니다.
The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag iframe
<img> HTML 페이지에서 이미지를 넣을 때 사용합니다.
The <img> tag is used to embed an image in an HTML page. Images are not technically inserted into a web page; images are linked to web pages. The <img> tag creates a holding space for the referenced image.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag img
<input> 사용자가 데이터를 입력할 수 있는 input field를 명시하는데 사용합니다.
The <input> tag specifies an input field where the user can enter data.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag input
<ins> 문서에 삽입한 텍스트를 나타내는데 사용합니다.
The <ins> tag defines a text that has been inserted into a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag ins
<kbd> 키보드 입력을 나타내는데 사용합니다.
The <kbd> tag is used to define keyboard input.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag kbd
<label> 특정 엘리먼트들의 라벨을 설정하는데 사용합니다.
The <label> tag defines a label for several elements.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag label
<legend> <fieldset>에 설명을 추가할 때 사용합니다.
The <legend> tag defines a caption for the <fieldset> element.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag legend
<li> List의 item을 추가할 때 사용합니다.
The <li> tag defines a list item.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag li
<link> 현재 문서와 외부 리소스 간의 관계를 정할 때 사용합니다.
The <link> tag defines the relationship between the current document and an external resource.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag link
<main> 문서의 메인 컨텐츠임을 명시할 때 사용합니다.
The <main> tag specifies the main content of a document.
The content inside the <main> element should be unique to the document. It should not contain any content that is repeated across documents such as sidebars, navigation links, copyright information, site logos, and search forms.
크롬(Chrome):26.0
엣지(Edge):12.0
파이어폭스(FireFox):21.0
사파리(Safari):7.0
오페라(Opera):16.0
Tag main
<map> Image map(클릭 가능한 영역이 있는 이미지)을 정의할 때 사용합니다.
The <map> tag is used to define an image map. An image map is an image with clickable areas.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag map
<mark> 하이라이트 또는 마크 처리해야 하는 텍스트에 사용합니다.
The <mark> tag defines text that should be marked or highlighted.
크롬(Chrome):6.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag mark
<menu> 순서가 없는 리스트를 정의하는데 사용합니다.
The <menu> tag defines an unordered list of content.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag menu
<meta> HTML 문서의 메타데이터를 정의하는데 사용합니다. 보통 character set, page description, keywords, author, viewport settings 등을 입력합니다.
The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data.
<meta> tags always go inside the <head> element, and are typically used to specify character set, page description, keywords, author of the document, and viewport settings.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag meta
<meter> 게이지와 같은 범위를 표현할 때 사용합니다.
The <meter> tag defines a scalar measurement within a known range, or a fractional value. This is also known as a gauge.
크롬(Chrome):8.0
엣지(Edge):13.0
파이어폭스(FireFox):16.0
사파리(Safari):6.0
오페라(Opera):11.5
Tag meter
<nav> 컨텐츠에서 네비게이션 링크들로 구성된 주요 항목이 필요할 경우 사용합니다.
The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major blocks of navigation links.
크롬(Chrome):5.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.1
Tag nav
<noscript> 브라우저가 스크립트를 지원하지 않거나 사용할 수 없는 상태일 때 노출해야 하는 영역이 필요한 경우 사용합니다.
The <noscript> tag 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.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag noscript
<object> 외부 리소스에 대한 영역을 정의할 때 사용합니다.
The <object> tag defines a container for an external resource.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag object
<ol> 순서가 있는 리스트를 정의할 때 사용합니다. 번호가 될 수도 있고 알파벳이 될 수도 있습니다.
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag ol
<optgroup> <select> 엘리먼트의 옵션들을 그룹화하는데 사용합니다.
The <optgroup> tag is used to group related options in a <select> element (drop-down list).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag optgroup
<option> Select list에서 옵션을 추가하는데 사용합니다.
The <option> tag defines an option in a select list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag option
<output> 계산 결과를 표현하는데 사용합니다.
The <output> tag is used to represent the result of a calculation (like one performed by a script).
크롬(Chrome):10.0
엣지(Edge):13.0
파이어폭스(FireFox):4.0
사파리(Safari):5.1
오페라(Opera):11.0
Tag output
<p> 한 문단을 정의할 때 사용합니다.
The <p> tag defines a paragraph.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag p
<param> <object> 엘리먼트에 대해 파라미터를 추가할 때 사용합니다.
The <param> tag is used to define parameters for an <object> element.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag param
<picture> 이미지 리소스를 지정하는데 있어 유연성을 주기 위한 용도로 사용합니다.
The <picture> tag gives web developers more flexibility in specifying image resources.
크롬(Chrome):38.0
엣지(Edge):13.0
파이어폭스(FireFox):38.0
사파리(Safari):9.1
오페라(Opera):25.0
Tag picture
<pre> 사전에 포맷이 변환된 텍스트를 표현하는데 사용합니다.
The <pre> tag defines preformatted text.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag pre
<progress> 태스크의 완료 정도를 표현할 때 사용합니다.
The <progress> tag represents the completion progress of a task.
크롬(Chrome):8.0
엣지(Edge):10.0
파이어폭스(FireFox):16.0
사파리(Safari):6.0
오페라(Opera):11.0
Tag progress
<q> 짧은 인용이 필요할 때 사용합니다.
The <q> tag defines a short quotation.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag q
<rp> <rp> 태그는 ruby text를 감싸는 괄호를 넣음으로써 ruby annotation을 지원하지 않는 브라우저에서 표시 되어야 할 컨텐츠를 표시할 수 있습니다.
The <rp> tag can be used to provide parentheses around a ruby text, to be shown by browsers that do not support ruby annotations.
크롬(Chrome):5.0
엣지(Edge):5.5
파이어폭스(FireFox):38.0
사파리(Safari):5.0
오페라(Opera):15.0
Tag rp
<rt> <rt> 태그는 ruby annotation 안에서 동아시아 문자에 대한 설명 또는 발음을 정의해야 할 때 사용합니다.
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
크롬(Chrome):5.0
엣지(Edge):5.5
파이어폭스(FireFox):38.0
사파리(Safari):5.0
오페라(Opera):15.0
Tag rt
<ruby> Rubby annotation을 명시하는데 사용합니다.
The tag specifies a ruby annotation.
A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. This kind of annotation is often used in Japanese publications.
The <rt> tag defines an explanation or pronunciation of characters (for East Asian typography) in a ruby annotation.
크롬(Chrome):5.0
엣지(Edge):5.5
파이어폭스(FireFox):38.0
사파리(Safari):5.0
오페라(Opera):15.0
Tag ruby
<s> 더이상 맞지 않거나 관계없는 텍스트를 명시할 때 사용합니다.
The <s> tag specifies text that is no longer correct, accurate or relevant.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag s
<samp> 컴퓨터 프로그램의 샘플 결과를 표시할 때 사용합니다.
The <samp> tag is used to define sample output from a computer program.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag samp
<script> 클라이언트 사이드 스크립트를 넣을 때 사용합니다.
The <script> tag is used to embed a client-side script (JavaScript).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag script
<search> 검색과 관계된 일련의 엘리먼트들을 표현할 때 사용합니다.
The <search> tag is used to specify that here comes a set of elements that is related to search.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag search
<section> 문서의 섹션을 정의할 때 사용합니다.
The <section> tag defines a section in a document.
크롬(Chrome):5.0
엣지(Edge):9.0
파이어폭스(FireFox):4.0
사파리(Safari):5.0
오페라(Opera):11.5
Tag section
<select> 드롭다운 리스트를 생성할 때 사용합니다.
The <select> element is used to create a drop-down list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag select
<small> 폰트 크기가 더 작은 텍스트를 표현할 때 사용합니다.
The <small> tag defines smaller text (like copyright and other side-comments).
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag small
<source> <source> 태그는 브라우저가 지원하는 것에 기반해 비디오/오디오/이미지를 선택적으로 재생할 수 있도록 해야 할 때 사용합니다.
The <source> tag allows you to specify alternative video/audio/image files which the browser may choose from, based on browser support or viewport width. The browser will choose the first <source> it supports.
크롬(Chrome):4.0
엣지(Edge):9.0
파이어폭스(FireFox):3.5
사파리(Safari):4.0
오페라(Opera):10.5
Tag source
<span> 문서의 한 부분 또는 텍스트의 한 부분을 마크업할 때 사용하는 인라인 컨테이너입니다.
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag span
<strong> 중요한 의미를 담은 텍스트를 강조할 때 사용합니다.
The <strong> tag is used to define text with strong importance.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag strong
<style> 문서의 스타일을 정의할 때 사용합니다.
The <style> tag is used to define style information (CSS) for a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag style
<sub> 일반 라인 보다 반 정도 아래에 쓰는 텍스트를 표현할 때 사용합니다(예, 화학식).
The <style> tag is used to define style information (CSS) for a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag sub
<summary> <detail> 엘리먼트의 헤딩 부분을 정의할 때 사용합니다.
The <summary> tag defines a visible heading for the <details> element.
크롬(Chrome):12.0
엣지(Edge):79.0
파이어폭스(FireFox):49.0
사파리(Safari):6.0
오페라(Opera):15.0
Tag summary
<sup> 일반 라인보다 반 정도 위에 쓰는 텍스트를 표현할 때 사용합니다(예, 주석).
The <style> tag is used to define style information (CSS) for a document.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag sup
<svg> SVG 그래픽 영역을 정의할 때 사용합니다.
The <svg> tag defines a container for SVG graphics.
크롬(Chrome):4.0
엣지(Edge):9.0
파이어폭스(FireFox):3.0
사파리(Safari):3.2
오페라(Opera):10.1
Tag svg
<table> HTML table은 하나의 <table> 엘리먼트와 하나 이상의 <tr>, <th> 그리고 <td> 엘리먼트들로 이루어져 있습니다.
An HTML table consists of one <table> element and one or more <tr>, <th>, and <td> elements.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag table
<tbody> <tbody>는 HTML table에서 body 컨텐츠를 그룹화할 때 사용합니다.
The <tbody> tag is used to group the body content in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag tbody
<td> HTML table에서 표준 데이터 셀을 표시할 때 사용합니다.
The <td> tag defines a standard data cell in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag td
<template> 페이지가 로드될 때 어떤 HTML 컨텐츠를 숨김 처리해야할 경우 사용할 수 있는 컨테이너입니다.
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads.
크롬(Chrome):26.0
엣지(Edge):13.0
파이어폭스(FireFox):22.0
사파리(Safari):8.0
오페라(Opera):15.0
Tag template
<textarea> 여러개의 줄로 이루어진 텍스트를 표현해야 하는 경우 사용합니다.
The <textarea> tag defines a multi-line text input control.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag textarea
<tfoot> HTML table에서 footer 컨텐츠를 그룹화할 때 사용합니다.
The <tfoot> tag is used to group footer content in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag tfoot
<th> HTML table에서 header cell를 정의할 때 사용합니다.
The <th> tag defines a header cell in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag th
<thead> HTML table에서 header 컨텐츠를 그룹화할 때 사용합니다.
The <thead> tag is used to group header content in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag thead
<time> 특정 시간 또는 datetime을 표현할 때 사용합니다.
The <time> tag defines a specific time (or datetime).
크롬(Chrome):62.0
엣지(Edge):18.0
파이어폭스(FireFox):22.0
사파리(Safari):7.0
오페라(Opera):49.0
Tag time
<title> 문서의 타이틀을 정합니다. 브라우저의 타이틀 바 혹은 페이지의 탭에서 보입니다.
The <title> tag defines the title of the document. The title must be text-only, and it is shown in the browser’s title bar or in the page’s tab.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag title
<tr> HTML table에서 row를 표시할 때 사용합니다.
The <tr> tag defines a row in an HTML table.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag tr
<track> <audio> 또는 <video> 엘리먼트의 텍스트 트랙을 명시하는 용도로 사용합니다.
The <track> tag specifies text tracks for <audio> or <video> elements.
크롬(Chrome):23.0
엣지(Edge):10.0
파이어폭스(FireFox):31.0
사파리(Safari):6.0
오페라(Opera):12.1
Tag track
<u> 잘못 쓰여진 단어 또는 일반적인 텍스트와는 스타일이 다른 텍스트를 표현할 때 사용합니다.
The <u> tag represents some text that is unarticulated and styled differently from normal text, such as misspelled words or proper names in Chinese text.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag u
<ul> 순서가 필요없는 리스트를 표현할 때 사용합니다.
The <ul> tag defines an unordered (bulleted) list.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag ul
<var> 프로그래밍 또는 수학에서 변수를 표현할 때 사용합니다.
The <var> tag is used to defines a variable in programming or in a mathematical expression.
크롬(Chrome):✅
엣지(Edge):✅
파이어폭스(FireFox):✅
사파리(Safari):✅
오페라(Opera):✅
Tag var
<video> 문서에 비디오 컨텐츠를 넣을 때 사용합니다.
The <video> tag is used to embed video content in a document, such as a movie clip or other video streams.
크롬(Chrome):4.0
엣지(Edge):9.0
파이어폭스(FireFox):3.5
사파리(Safari):3.1
오페라(Opera):11.5
Tag video
<wbr> 텍스트가 길어서 다음 줄로 텍스트를 넘겨야 할 때, 줄을 끊는 것이 가능한 구간을 표시할 때 사용합니다.
The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break.
크롬(Chrome):1.0
엣지(Edge):12.0
파이어폭스(FireFox):3.0
사파리(Safari):4.0
오페라(Opera):11.7
Tag wbr