Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

Complete List of HTML/xHTML Tags, With Guide to Proper Semantic Use

Comprehensive list of HTML tags with their semantically appropriate uses

I haven’t listed absolutely every HTML tag ever, as some of them are too obscure to be worth mentioning.

Tag

What it is

When to use it

<a>

Anchor (most commonly a link)

Vital. Use to create links in content. Use the title attribute whenever the contents of the <a>…</a> pair do not accurately describe what you’ll get from selecting the link. Title attribute often displays as a tooltip in visual browsers, which may be a helpful usability aid.

<abbr>

Defines an abbreviation

Works in a similar way to <dfn> and <acronym>, using a title attribute (displays a tooltip in standard visual browsers). e.g. <abbr title=”Hypertext markup language”>HTML</abbr>

<ACRONYM>

Defines an acronym

Works in a similar way to <abbr> and <dfn>, using a title attribute (displays a tooltip in standard visual browsers).

<ADDRESS>

Used for marking up a physical (e.g. mailing) address

Not commonly used. Recommend looking into microformats, which allow for more detail and interoperability.

<APPLET>

Inserts a Java applet

The old way to insert a Java app. Use <object> instead today.

<AREA>

Hotspot in image map

Avoid image maps where possible. Occasionally necessary.

<BASE>

Specifies the base location of the document.

Use only when necessary. Adjusts any relative links and paths within the document.

<BASEFONT>

Sets default font size

Display info – never use it

<BIG>

Larger text

Display info – never use it

<BLINK>

Makes text blink

You go to hell if you use this

<BLOCKQUOTE>

Large quoted block of text

Use for any quoted text that constitutes one or more paragraphs (note: should contain <p> tags as well). Use <q> for quotations within a paragraph. Often used in conjunction with <cite> to cite the quotation’s source.

<BODY>

Document body

Essential (unless you’re using frames)

<BR>

Line break

This is arguably display information. Still in common use, but use with restraint.

<B>

Bold text

Display info – never use it

<BUTTON>

Used for a standard clickable button within a form

Often better than <input type=”button” /> or <input type=”submit” />, as it allows you to assign different styles based on the HTML element alone, whereas differentiating style based on the type of input is less well supported.

<CAPTION>

Caption for a table: describes the table’s contents

The correct way to assign a title to a table

<CENTER>

Centred block

Display info – never use it. Use <div> or some other block-level tag with the style text-align:center instead

<CITE>

Defines a citation

Defines the source of a quotation (in conjunction with content in <q> or <blockquote> pairs).

<CODE>

Defines an extract of code

Not commonly used. Similar to <pre> tag, but collapses consecutive white spaces and line breaks in the source.

<COL>

Identifies a particular column in a table

Can be very useful. e.g. <col class=”namecol”> can be applied to each first column in a series of tables, then the width of each column may be set to be equal in the stylesheet, overriding the table’s natural tendency to adjust its own column widths to fit its contents.

<DFN>

Definition of a term

Works in a similar way to <abbr> and <acronym>, using a title attribute (displays a tooltip in standard visual browsers).

<DIR>

Directory list

Now deprecated. Use a standard <ul> or other list instead.

<DIV>

Division

Specifies a logical division within a document. Use it to separate or identify chunks of content that are not otherwise distinguished naturally using other tags.

One of the most common HTML tags.

<DL>

Definition list

Contains one or more definition-term / definition-description pairs.

<DT>

Definition term

Used as part of a <dt></dt><dd></dd> pair within a definition list (<dl></dl>)

<DD>

Definition description

<EM>

Emphasis

Commonly used in place of the old <i> (italics) tag to indicate emphasis (but less than <strong>)

<FONT>

Font settings

Display info – never use it

<FORM>

Input form

Essential for data input

<H1>

Level 1 header

Aim to have one H1 on each page, containing a description of what the page is about.

<H2>

Level 2 header

Defines a section of the page

<H3>

Level 3 header

Defines a sub-section of the page (should always follow an H2 in the logical hierarchy)

<H4>

Level 4 header

Etc. Less commonly used

<H5>

Level 5 header

Less commonly used. Only complex academic documents will break down to this level of detail.

<H6>

Level 6 header

Less commonly used

<HEAD>

Document head

Essential. Contains information about a page that does not constitute content to be communicated as part of the page.

<HR>

Horizontal rule

Display info with no semantic value – never use it. “Horizontal”, by definition, is a visual attribute.

<HTML>

 

Core element of every web page.

<IMG >

Show an image

Vital. Always use the alt or longdesc attributes when the image has content value

<INPUT>

Input fields within forms

Vital. (I prefer to use <button> for buttons and submit buttons though)

<ISINDEX>

Old type of search input

Not really used any more. Use <form> instead.

<I>

Italicised text

Display info – never use it

<KBD>

Keyboard input

Display info – never use it

<LINK>

Defines a relationship to another document

Commonly used to reference external stylesheets, but has other minor uses

<LI>

List item

Specifies an item in an unordered or ordered list (<ul> or <ol>)

<MAP>

Client-side imagemap

May have occasional value, but only use when absolutely necessary

<MARQUEE>

Makes text scroll across the screen

See <blink>

<MENU>

Menu item list

Deprecated. Do not use. Use other standard list types instead.

<META>

Meta-information

Useful way to insert relevant information into the <head> section of the page that does not need to be displayed.

<OL>

Ordered list

Type of list where the order of elements has some meaning. Generally rendered with item numbers (best managed with CSS).

<OPTION>

Selection list option

Vital for options within a drop-down control.

<PARAM>

Parameter for Java applet

Used in conjunction with an <object> or <applet> tag to pass additional setting information at runtime.

<PRE>

Preformatted text

Renders text in a pre-formatted style, preserving line breaks and all spaces present in the source. May be useful. (This one’s a paradox, as it is strictly display info that applies only to visual browsing, but it’s still so commonly used and useful that I’m hesitant to advise against using it.)

<P>

Paragraph

Only use to denote a paragraph of text. Never use for spacing alone.

<Q>

Short quotation

Use for inline quotations (whereas <blockquote> should be used for quotations of a paragraph or more). Often used in conjunction with <cite> to cite the quotation’s source.

<SAMP>

Denotes sample output text

Similar to the <code> tag. Rarely used. Avoid.

<SCRIPT>

Inline script (e.g. JavaScript)

It’s better to have all scripts as separate files than to write inline or in the <head> section, however still has its uses.

<SELECT>

Selection list

A drop-down selector for a form.

<SMALL>

Smaller text

Display info – never use it

<SPAN>

An inline span within text

Use to apply meaning (and style) to a span of text that goes with the flow of content (whereas a <div> tag is block-level and breaks the flow)

<Strikeout>

 

Display info – never use it

<STRONG>

Strong emphasis

Use this instead of the old <b> tag.

<STYLE>

CSS style settings

Normally used in <head> section of a page. Try to use external stylesheets, to enable you to apply different styles for different output media.

<SUB>

Subscript text

Arguably display info – recommend using alternative tags (e.g. <cite>). May be required in some academic uses, e.g. Chemical formulas.

<SUP>

Superscript text

<TABLE>

Table

Use for repeated data that has a naturally tabular form. Never use for layout purposes.

<TD>

Table data cell

A cell containing actual data. If a cell actually contains a descriptor or identifier for a row or column, use a <th> (table header) tag, not a <td>. This usually applies to column headers (within a <thead>), column footers (within a <tfoot>), as well as row headers (usually the first cell in a row in the <tbody>).

<TEXTAREA>

Multi-line text input area in a form

Essential

<TH>

Table column or row header cell

May appear in a <thead> (to denote a column header cell), <tbody> (to denote a row header), and in <tfoot> (to denote a column foot cell, e.g. a total)

<TBODY>

Indicates the main body of a data table

It is always worth using this tag, as well as using <thead> and <tfoot> where appropriate.

Note that it is permissible to have more than one <tbody>, <thead>, and <tfoot> in the same table.

<THEAD>

The head section of a table

The place to put column header cells (<th>)

<TFOOT>

The foot section of a table

Good place to put e.g. summary data, such as totals. Note that it goes before the <tbody> tag!

<TITLE>

Document title

Essential

<TR>

Table row

Essential with tables

<TT>

“Teletype” – simulates typewriter output

Similar to <pre>, except that it collapses white space like normal HTML (whereas <pre> leaves all consecutive white space intact). Avoid if possible

<UL>

Unordered list

Essential. Use for lists where the order or items has no particular importance.

<U>

Underline text

Display info – never use it

<VAR>

Variable in computer code

Obscure tag, may only be useful in academic documents. Avoid.

 

Buy The Complete Semantic HTML Guide, including Worked Example

Only £5 (approx. $8)

Add to Cart

 

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

KHAGENRA - 4 years ago

I HAVE’NT SEEN SUCH A SIMPLE,EXPLAINED AND UNDERSTABLE SITE FOR HTML CODES.

    bob - last year

    I found this to be the most helpful comment I have ever read.

Hannah Hurst - 4 years ago

This list of HTML tags is really useful and a very interesting read. The explanation of each tag use has been done extremely well and has definitely cleared up any issues or confusion I previously had.

Writing HTML can sometimes be a little tricky at the best of times so this reference is a really handy tool. It most definitely helped me and I’m sure a lot of other people would benefit also. This list also allows growing businesses to ensure they are producing professional web page designs for its clients, which will allow them to grow and prosper.

igor - 4 years ago

HR tag is not as bad as the author says. Be it horizontal or not, the proper usage is as follows: these tags divide your document into sections visible when CSS is off (e.g. in text-only browsers), and they can be removed with CSS from a styled version of the page.

Gerry - 3 years ago

Nice list of markup tags, and good recommendations. I disagree with some of the conclusions, and the absolutes you apply to them. For example might be used if the intent is not to emphasize the text, but rather to italicize it. Scientific names come to immediate mind. In the written word, those are italicized; they are not emphasized when spoken.

I find it also interesting that if you look at the page source here, the italicized text in the section on uses rather than , even though in that case the italics are used for emphasis.

Adam - 3 years ago

Blink XD blink doesn’t really even work anymore.

    Ben Hunt - 3 years ago

    Good! :-)

      Alec - a couple of years ago

      It is really simpe and useful site

Ravindra Kumar Pandey - 3 years ago

Well, I think that it’s Simpe but usable.

Rahul Sharma - 3 years ago

It would have been much better if, examples would have also been included.. and a small screen-shot of same.

Elia - 3 years ago

Wao, never had somthing like this. Very powerful. be my Teacher

gopal - a couple of years ago

due to ur web site it is possible to me to make my own web pagee

Tejaswi - a couple of years ago

List of html tags were very usefull and interesting read…

Mansi - a couple of years ago

This tags are explained here in such a simple way…
even beginners also can understand and learn from here…
This are very useful…
Its kinda small ” HTML Tag Dictionary “.

Waleed Bin Ather - a couple of years ago

Great help for me, Thx alot :D.
CAn you also make a list of CSS properties.?

shylesh - a couple of years ago

Very Very good and helpful thanks a lot :D

shadab khan - a couple of years ago

please kindly mention whether it is an empty tag or container tag

natsu - a couple of years ago

great but how i can add music clips in my html? Please help me. :-(

    Ben Hunt - a couple of years ago

    I’d use a WordPress plugin like ProPlayer, but there are lots of free media players. In fact, I think with HTML5, you can now practically embed an MP3 player with regular HTML.

    See http://html5doctor.com/native-audio-in-the-browser/

yash - a couple of years ago

Very easy, very interesting, and very convenient way to understand HTML Tags.

padamsinh deshmukh - a couple of years ago

it is very good & easy tags to understand……
i like it

CAMERON - a couple of years ago

WOW! so easy to understand and soo smooth thank you :)

Arun - a couple of years ago

Hi Ben Hunt,

How are you,
Your website is very help full for me,
All the best.

arati - a couple of years ago

easy table of html tags to understand
thanks a lot

poonam - a couple of years ago

thanks a lot of great html table

mojo - a couple of years ago

Lol, developing websites for few years now, haven’t even heard of most of these tags, pretty much 99.9% of tags I use would be

for everything else there’s CSS

bhavya - a couple of years ago

this one is gud.but i would better if they are with examples

Stef - a couple of years ago

Thanks.. It will help me a lot:)

John Motyl Jr - a couple of years ago

Kudos to explaining the BLINK, i had such a good laugh.

Bilal - last year

nice

Amar - last year

It is really very very helpful. Thanks

daminifutane - last year

its so kind of you that you have taken such a good efforts.

gayathri - last year

very nice to study

raksha - last year

these list of tags are really very useful for beginers, but it would much easier to undrstd if these explainations are supportd by small examples

dave sanket - last year

realy it`s very…..very…..help ful site for web turtiol.

Nathan Jorams - last year

This is good. keep it up but it could batter if there are some examples for each tag

Manoj dhingra - last year

hey man!!!can u tell me about an e-book which contains tags and their usage..?

Dipo - last year

this is very usevull
thank you!

laxman - last year

so helpful thanks. and can you provide me with examples also.i will be much proud…….

    Ben Hunt - last year

    Hi. I may add examples over time.

Kevin - last year

Am i to understand that all the tags under the tag column have a corresponding closing tag?… ?

    Ben Hunt - last year

    No, not all. Some are self-closing (like
    and )

christian - last year

wow! a BIG HELP for me.. thanks to the one who made this

Drafi - last year

That’s really helpful, thanks! But it’s a downside, that it isn’t thematically.

Indira Nalbaria - last year

nice, easy to understand, thnks

solomon ntaganda - last year

thanks a lot for that help

chitu98 - last year

Thnkx bro!!!

Heather - last year

Thanks a ton for taking some time in order to publish “Complete List of HTML Tags with Guide Notes on Semantic HTML Use”.
Thanks a ton yet again ,Carley

Heather - last year

“Complete List of HTML Tags with Guide Notes on Semantic HTML Use” truly got myself simply hooked on your web-site!
I actuallydefinitely will wind up being returning far more often.
Thanks a lot -Trinidad

amit - last year

cellspadding,cellspacing,colspan,rowspan

I want to know about these tags

Lomate Vaishali - last year

thanks for giving us information about tags…

avneet - 11 months ago

it is useful and knowledgeable
thank you for this useful information

RAHUL - 10 months ago

thanks you
it is knowledgeable and eefective dude

RAHUL - 10 months ago

thanks you
it is knowledgeable and effective dude

Manjula - 10 months ago

Thank u very much It helped many of them

Gunnar Bittersmann - 10 months ago

The HTML5 specification gives semantic meanings to various elements like i, b, hr, s, small, etc. that goes beyong their default visual representation which is still captured in the elements’ names. The advice “Display info — never use it” is wrong for those elements.

There are use cases. For b and i elements, see http://www.w3.org/International/questions/qa-b-and-i-tags

The hr element is a separator (semantic meaning!), it might also be represented as ***, some image, bigger vertical space, etc. rather than a horizontal rule.

the s element might be used in:
old price: 5 bars of latinum
new price: 4 bars of latinum
and has a semantic meaning whether it would be visualized stroken-through or otherwise.

The small element can be used for legal stuff that no Ferengi wants you to read. ;-)

    Gunnar Bittersmann - 10 months ago

    Oops, tags have been eaten… Next try:
    old price: <s>5 bars of latinum</s>
    new price: 4 bars of latinum

Comments are closed