Quick reference HTML5 elements / tags

Reference for the most popular HTML5 elements / tags. All the HTML5 elements / tags used in our tutorials

Results per page:


Match: any search words all search words

Page Menu

HTML Tag / Element Reference

List of HTML5 Tags

Deprecated HTML tags. Elements no longer used in HTML5

Deprecated HTML attributes

Attributes that can be used with any HTML Element

New HTML5 Semantic/Structural Elements

CSS Pseudo-classes

CSS Combinators >, +, ~

Block Level Elements

Block level elements normally start (and end) with a new line

Examples: <h1>, <p>, <ul>, <table>

New HTML5 Semantic / Structural Elements

Not all tags are listed.

The ones below are the most commonly used and most of them are covered in this tutorial


Defines an article in the document that can be understood on it's own.

Block Element


Defines content aside from the content it is placed next to, but should be related to it

Block Element


Bidirectional Isolation - Defines a part of text that might be formatted in a different direction from other text outside it


Defines additional details that the user can view or hide.

Use with <summary>


Defines a dialog box or window


Defines a caption for a <figure> element. Use within the <figure> element.


Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.


Defines a footer for the document or a section

Block Element


Defines a header for the document or a section

Block Element


Defines the main content of a document

Block Element


Defines marked or highlighted text


menu list. Not supported in browsers <ul> Use CSS to style menu lists.


Defines a command/menu item that the user can invoke from a popup menu. Only works in Firefox!


Defines a scalar measurement within a known range (a gauge)


Defines navigation links in the document

Block Element


Defines the progress of a task


Defines what to show in browsers that do not support ruby annotations


Defines an explanation/pronunciation of characters (for East Asian typography)


Defines a ruby annotation (for East Asian typography)


Defines a section in the document ie chapters, headers, footers, or any other sections of the document.


Defines a visible heading for a <details> element. The details are shown when icon is clicked. Supported only in Opera, Chrome and Safari 6.


Defines a date/time


Defines a possible line-break

List of HTML5 Tags also used in HTML4

<a>  Hyperlink

The <a> tag defines a hyperlink, which is used to link from one place to another.


  • href The Link address e.g. <a href="http://tutorials4u.com/html">HTML-CSS-Web Design Tutorial</a>
  • hreflang language_code
  • media media_query The media/device the linked document is optimized for
  • rel& Relationship
  • target Where to open the linked document.
  • type media_type The media type of the linked document

Default Link Colours

  • Unvisited link is underlined and blue
  • Visited link is underlined and purple
  • Active link is underlined and red

See Tutorial Linking


Defines the document's body. The entire pages content is placed within the body tag

Use the <body> tag immediately after the closing </head> tag


1 only per page


<b>This is bold text</b>

Inline Element.  See also <strong>

Tags can be in ether Upper Case <P> or lower case <p>. The World Wide Web Consortium (W3C) recommends lowercase. Lowercase must be used in XHTML


By itself acts as a link Anchor

In conjunction with :link, :hover, :visited acts as a hyperlink

Inline Element


Line Break element places the start of the following text or image onto the next line.

Can be used with the clear attributes, to clear preceding floats. Inline example:

<br style="clear: both;">

No End Tag

In XHTML, the start <br> tag is amended to be a combined start /end tag: <br />


Caption to a table, by default will be center-aligned above a table

<caption> Use immediately after the <table> tag

1 only per table

Example see <table>




A description list

The defines terms/names <dt> AND <dd> tags are used within the <dl> tag


General purpose Block level Element. The main tag used for the structure of a web page

Block Element. but can include some other block elements


The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

In HTML5 only <!DOCTYPE> is required

No End Tag


1 only per page

<h1> to <h6>

<h1> Main Heading
Essential for better SEO. Use only 1 h1 heading per page

<h2> to <h6> Subheadings use as required keep in numerical order

Block Elements


<h1>Heading 1 example.</h1>
<h2>Heading 2 example.</h2>
<h3>Heading 3 example.</h3>
<h4>Heading 4 example.</h4>
<h5>Heading 5 example.</h5>
<h6>Heading 6 example.</h6>


<em> Emphasised text </em> results in Emphasised text, usually rendered in italics

Inline Element


Block Element


One, and only one <head> Element allowed

Not Essential in HTML5, Essential in earlier versions

Although not required in HTML5 it is highly recommended that you use it. Almost all tutorials mention that various tags etc are placed in the head section, it makes it clearer for you to include the <head>  </head> tags in your HTML document

The <head> element contains Information to find additional data & for browsers Some examples follow:

  • The <title> Element, Essential. A short description of the page, should include the pages main keywords. Used by search engines and usually appears in search results. Also appears at the top of the browser window in the URL box.
  • <meta> Meta Data, Some Essential such as:
    • charset. For HTML5 use
      <meta charset="utf-8">
    • description Used by search engines and often appears in search results.
  • CSS Internal styles. Styling for that page only
  • <link> Links to External CSS style sheet(s), Almost Essential Styles for ALL pages linked to the External style sheet
  • <script> Java Script
  • <noscript> Alternative if JavaScript is turned off
  • <base>


The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).

The <html> tag informs the browser that this is an HTML document.

The <html> element which encloses every other tag & all the content of the page, except the <!DOCTYPE> which must proceed the tag.

The very last entry on a web page is the </html> closing tag.


<i> Italic text </i> results in Italic text

Use <em> tag instead

Inline Element


Container for an Image / photograph

Remember to use the Essential alt attribute with images & photographs etc. provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

No End Tag. Inline Element

Used with attributes src & alt


<img src="smiley.gif" alt="Smiley face icon">


Defines a list item

Used within Ordered List <ol>, Unordered List<ul> (Bulleted List) or <dl>

Block Element


Use within the <head> section

Generally used to link to:

  • CSS External Style Sheet(s)
  • Shortcut icon. The small icon shown at the front of the browsers URL dialog box

No End Tag

Note: In this example the External Style Sheet is located in the same folder as the HTML file

Common attributes: href, hreflang, media, rel, sizes, type

Example Link to External Style Sheet

 <link rel="stylesheet" type="text/css" href="my-style-name.css">


Highlighted text

Inline Element

<mark>This is highlighted text</mark>


Use within the <head> section

Often used with charset, content, http-equiv, name.


Ordered List

Use with <li>, reversed, start, type.

See also <ul> Unordered List

Block Element


<p> is a block level element, and defines a paragraph.

If end tag </p> is omitted the element ends at the next start block level element start tag. We recommend that you always use an end tag.

Browsers automatically add some vertical space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

Block Element. No other block level element may be nested inside a P element

HTML 4 align Not supported in HTML5. Use CSS to align

Use CSS to align



<p>No other block level element may be nested inside a P element.</p>


General purpose Inline Element element used as a container.

Inline Element


In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it more semantic & defines important text. Browsers normally render the text in a bold typeface

Inline Element


<strong>This is  Important text rendered in a Bold typeface</strong>


Use within the <head> section

Used as a container for styles used on that page only.


  <style> body {background-color:red;}
      p {color:white;}


The <table> tag defines an HTML table.

Used with <tr> table row, <th> table header, and <td> table cell. tags.

Additional tags that may be used <caption>, <col>, <colgroup>, <thead>, <tfoot>, and <tbody>

Block Element


<caption>Top Shops</caption>
   <td>The Baker</td>
   <td>High Street</td>


The <td> tag defines a standard cell in an HTML table.
The text in <td> elements are regular and left-aligned by default.

Used with <table> Table, <tr> table row, <th> table header, colspan, headers, rowspan.

Inline Element


The tag defines a header cell in an HTML table.
Header cells - contains header information and are bold and centered by default.

Used with <table> Table, <tr> table row, and <td> table cell. abbr, colspan, headers, rowspan.scope, sorted

Inline Element


Use within the <head> section

Block Element


<tr> table row

Used with <table> Table, <th> table header, and <td> table cell. tags



defines an Unordered List  (Bulleted List)

Block Element

Block level & Inline Elements

Block level Elements by default

  • Begin on new lines having a built in line break before and after the element.
  • Can have nested Inline Element elements within them.
  • They take up the full width of there Containers
  • Some Block level elements such as <div> can have other block level elements nested within them

Inline Elements

Examples: <b>, <td>, <a>, <img> big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea

Can have other inline elements nested within them but can not contain Block elements

Attributes that can be used with any HTML Element

Attribute Description / Information


Specifies one or more class names for an element (refers to a class in a style sheet). Note how multiple class names "simpleborder grey" are seperated by a space

In CSS the name of the class has a . symbol immediately before the name.


<html lang="en">
   <meta charset="utf-8">
     .red {background: red;} 
		  .grey {background: gray;} 
		  .simpleborder {border: 1px solid black;}
  <div class="red">Some content</div> 
  <div class="simpleborder grey">Some content</div>

class / id

 The id attribute and the class attribute in most cases have the same result when used linking an HTML element to CSS styles

The id has a higher precedence than class

id is also used to name an anchor


Specifies a unique id for an element

An element can only have ONE id, it can also have 1 or more classes

Once used that id name can not be used again

In the CSS there is a # symbol immediately before the id name


 #Header {background: red;}
<div id="Header">

Because id="Header" must be unique it can not be used again on the same page. Some Web editors will add a number e.g., id="Header1" if you try to reuse a used id.

Use the class attribute and not the id for attribute multi-use


Specifies an Inline Element CSS style for an element


<p style="text-align:center;">This text will be centred</p>


Specifies extra information about an element (displayed as a tool tip by browsers)

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element.

The most common use is with Links which have the states of Link, Hover, Visited & Active, when different styles are required to the default colours,


/* unvisited link */ 
   a:link {color: red; } 
/* visited link */ 
   a:visited {color: green; }
/* mouse over link */
  a:hover { color: black; }
/* selected link */
a:active {color: blue; }

Deprecated & Obsolete Elements (Tags) & Attributes


A deprecated element or attribute is one that has been outdated.

Deprecated elements may become obsolete in the future, but browsers should continue to support deprecated elements for backward compatibility.

Deprecated elements are Not supported in HTML5. Use CSS instead.

Deprecated tags may still work but are being phased out therefore should no longer be used


Deprecated HTML tags





Inserts applet <object>


sets font styles Use CSS


Defines big text Use CSS


centres text Use CSS <p style="text-align:center">


directory list Use <ul> Unordered List


applies font styles Use CSS


A window (a frame) in a frameset


A set of frames


Alternate content for users that do not support frames


Allows a form to contain a simple string search <INPUT> form element.


strike through Use CSS


strike through Use CSS


Teletype text


underline Use CSS



Deprecated HTML attributes

Use CSS styles instead of using Deprecated HTML attributes

Attribute Deprecated if used in: <caption>, <img>, <table>, <hr>, <div>, <h1..6>, <p> alink <body> background <body> bgcolor <body>, <table> <tr> <td> <th> clear <br> compact <ol>, <ul> color <basefont> Deprecated, <font> Deprecated border <img>, <object> hspace <img>,<object> link <body> noshade <hr> nowrap <td>, <th> size <basefont> Deprecated, <font> Deprecated, <hr> start <ol> text <body> type <li> value <li> vlink <body> width <hr>, <pre>, <td>, <th> vspace <img>,<object>  

CSS Parent Child Sibling selectors

Parent, child, sibling referrer to the relationship between elements.

The child element can be sub divided into 2 sub categories firstChild & lastChild.

The sibling element can be sub divided into 2 sub categories nextSibling & previousSibling.

Every element has 1 parent element except the top element <html>

Obsolete Tags

Obsolete elements and attributes have no guarantee of browser-support and they are no longer defined in the W3C specification.

CSS Combinators >, +, ~


Example without using a Combinator

div p { Your CSS styles }

The above selects all <p> elements that are inside <div> elements.

> Child Selector


div > p { Your CSS styles }

The above selects all <p> elements that are immediate children of a <div> element

+ Adjacent Sibling Selector


div + p { Your CSS styles }

The above selects all elements that are the adjacent siblings of a specified element.

Sibling elements must have the same parent element, and "adjacent" means "immediately following".

The above example selects all <p> elements that are placed immediately after the closing </div> tag.

~ General Sibling Selector

General Sibling Selector


div ~ p { Your CSS styles}

The above selects all <p> elements that are siblings of <div> elements


  • End tags must be used
    • Use the following combined opening /end tags: <br /><hr />
  • Demands the use of lowercase tags
HTML Elements and Valid DOCTYPES