HTML: Tags

By Xah Lee. Date: . Last updated: .

This page is a COMPLETE list of HTML tags.

HTML Structure

DOCTYPE
  • DOCTYPE delaration.
  • This must be the first line.
html
  • Wrapper tag for entire file. (only DOCTYPE goes before it.)
head

Wrapper tag for meta info

body
  • Wrapper tag for page content.
  • Must be used right after the head element.

Meta info (Must be Inside Head Tag)

meta
  • Meta info.
  • Must be inside head tag.
<meta charset="utf-8" />
link
  • For link to style sheet and others.
  • Must be inside head tag.
<link rel="stylesheet" type="text/css" href="basic.css">
title
  • Document title.
  • Most important. Every page must have this.
  • Must be inside head tag.
base
  • Base URL.
  • Rarely used.
  • Must be inside head tag.
<base href="http://example.com/" />
style
  • CSS stylesheet.
  • Must be inside head tag.
<style>
.x208 {
 color: black;
 background-color: white;
}
</style>

Page Structure

nav

Navigation bar

header

Page's header

footer

Page's footer

main

Main section

aside

Sidebar

article

Article body

section
  • Section body (e.g. a chapter or section).
  • Recommended to have a header tag e.g. h1, h2 as first child.

Title/Section Heading

h1

Headline 1

h2

Headline 2

h3

Headline 3

h4

Headline 4

h5

Headline 5

h6

Headline 6

Text Block

div
  • Generic block markup.
  • Use with CSS
p

Paragraph

pre

Monospace block

blockquote

Quote passages, excerpt.

hr

Horizontal rule (draw a horizontal line)

Lists

ul
  • Unordered list.
ol

Ordered list.

li
  • List item.
  • Use inside ul or ol.
dl

Definition list.

dt
  • Definition term.
  • Use inside dl
dd
  • Definition description.
  • Use inside dl

Inline Markup

span
  • Generic horizontal layout markup, usually for text.
  • Use with CSS to change appearance.
a

Link (known as anchor)

em

emphasize.

strong

important.

b

bold

i

italic

u

underline for book title, misspelled word, etc.

s

strike-thru

del

deleted text

ins
  • newly inserted text
  • (in contrast to del)
mark

highlight

small

smaller

sup

superscript

sub

subscript

dfn

definition term

code

computer code

var

variable

samp
  • sample code.
  • Used to show computer output.
kbd
  • keyboard input.
  • Used to show computer keystroks.
q

short inline quote

cite
  • book title
  • or title of: article, essay, song, script, film, TV show, game, artwork, etc.
ruby

Pronunciation markup for Asian languages.

rt

Used inside ruby tag, for pronunciation.

rp

Used inside ruby tag, for older browser support.

br

Line break

wbr
  • Line-break hint.
  • Browsers can render line break at this point.
bdo

Text direction

bdi

Text direction

Table

table

Tabular data.

caption

Table caption

tr

Table row

td

Table cell

th

Table cell header

thead

Table header.

tfoot

Table footer

tbody

Table body

colgroup

Group table columns for styling.

col

Used inside colgroup

Image

img

Inline image.

picture

Inline image with multiple versions.

figure

For independent illustartion, image, video, code example, etc.

figcaption

Caption for figure.

map

Image map.

area

Used inside map.

Audio, Video, Special Objects

video
audio
source

Used inside video or audio tags.

track

Used with video and audio tag, for things like subtitle.

script

Embed JavaScript code.

noscript
  • used when browsers may not support JavaScript, or user have JavaScript turned off.
  • Mostly used in early 2000s only.
<noscript>displayed when JavaScript is off</noscript>
object

Embedded object.

param

Parameter, used with object tag

embed

Interactive content or plugin

iframe

Embed a page; inner window.

canvas

Interactive graphics, games.

abbr
  • for abbreviation.
  • rarely used.

example

i18n

<abbr title="Internationalization">i18n</abbr>
address

Markup for contact of article or page.

meter

Gauge indicator.

progress
time

Forms

form

User input.

button
Render as Button. Used together with JavaScript.
input

Generic input (text, radio box, checkbox, submit button)

textarea

Large text input.

select

Menu.

option
  • Menu item.
  • Used with select.
optgroup

Menu item group label.

label

A label for a form input

fieldset

Used inside form tag to group input elements.

legend

Title in a fieldset tag.

datalist

Dropdown list, group several option tags.

menu

? Menu list

output

used as a container for JavaScript generated result.

details

A toggle to show/hide more info.

summary
  • Used inside details tag.
  • The content of summary element is shown when the details toggle is closed.

HTML5 Custom Data Attribute

Obsolete HTML5 Tags

command

? Creating a user input, such as buttons.

keygen

Generate a encryption key.

HTML 4 Tags Obsolete in HTML 5

acronym

Use abbr

applet

Use embed or object.

bgsound

Use HTML: Audio Tag

basefont

Use CSS: font-family instead.

big

Use CSS: font-size instead.

center
dir
  • Directory list.
  • Use ul
font

Use CSS font-family

frame

Use HTML: Iframe.

frameset

HTML 5 does not support anything similar.

noframes

Used with frameset.

strike

Use s.

tt
  • Stands for “teletype”, rendered in monospace font.
  • Use code or samp tag instead, or use CSS: font-family.
xmp

Use pre with CSS.