Results per page:

Match: any search words all search words

HTML Tag / Element Reference


List of HTML5 Tags

Deprecated HTML tags

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>

List of HTML5 Tags

Not all tags are listed.

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


<a>  Hyperlink

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


  • href        The Link address eg <a href="">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 dockument.
  • 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 imediatly after the closing </head> tag


1 only per page


<b>This is bold text</b>


Tag Description / Comments End





Bold use the <strong> tag instead


Yes Inline NONE





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

In XHTML, the <br> tag must be properly closed, like this: <br />

No inline clear

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


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

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

In HTML5 only <!DOCTYPE> is required


1 only per page


<h1> to <h6>

<h1> Main Heading
Almost Essential 1 only per page

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

<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>

Yes Block  

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


Yes inline  
<form>   Yes Block  

One, and only one <head>



It can contains Information for browsers as follows

  • The <title> Element, Almost Essential
  • <meta> Meta Data, Almost Essential
  • CSS page styling
  • <link> Links to External CSS style sheets, Almost Essential
  • <script> Java Script
  • <noscript>
  • <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.


Yes   NONE

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

Use <em> tag instead


Yes inline  
<img> Image No inline  

Defines a list item

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


  Block src

Generally used with CSS External Style Sheet & Use within the <head> section

Example Link to External Style Sheet

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

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

No   href
<mark> <mark>This is highlighted text</mark> Yes inline  
<meta> Use within the <head> section     charset

Ordered List

Use with <li>

See also <ul> Unordered List


Yes Block reversed

<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).

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


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


Opt Block

left right center justify

align Not supported in HTML5.

Use CSS to align

<span> General purpose inline element used as a container.   Inline  

In HTML 4.01, the <strong> tag defines strong emphasized text, but in HTML5 it defines important text


<strong>This is Bold / Important text</strong>


Yes Inline  

Use within the <head> section

Used as a container for a page styles.


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


Yes   media

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>


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

  Block abbr

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


  Inline colspan

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. tags.


  Inline abbr

Use within the <head> section



<tr> table row

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


  Block NONE

defines an Unordered List  (Bulleted List)

  Block NONE


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


Block level Elements by default

  • Begin on new lines having a built in line break before and after the element.
  • Can have nested inline elements within them.
  • They take up the full width of there Containers



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



Inline elements

Examples: <b>, <td>, <a>, <img>

b, 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




New HTML5 Semantic/Structural Elements 

Tag Description End Tag    Attributes HTML5
<article> Defines an article in the document thatcan be understood on it's own Yes    
<aside> Defines content aside from the content it is placed inext to, but should be related to it      
<bdi> Bi-directional Isolation - Defines a part of text that might be formatted in a different direction from other text outside it      
<details> Defines additional details that the user can view or hide. Use with <summary>      
<dialog> Defines a dialog box or window      
<figcaption> Defines a caption for a <figure> element. Use within the <figure> element. Yes    
<figure> Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. Yes    
<footer> Defines a footer for the document or a section Yes    
<header> Defines a header for the document or a section Yes    
<main> Defines the main content of a document Yes    
<mark> Defines marked or highlighted text Yes    
<menuitem>  Defines a command/menu item that the user can invoke from a popup menu. Only works in Firefox! Yes    
<meter> Defines a scalar measurement within a known range (a gauge)      
<nav> Defines navigation links in the document Yes    
<progress> Defines the progress of a task      
<rp> Defines what to show in browsers that do not support ruby annotations      
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)      
<ruby> Defines a ruby annotation (for East Asian typography)      
<section> Defines a section in the document i.e. chapters, headers, footers, or any other sections of the document.      
<summary> Defines a visible heading for a <details> element. The details are shown when icon is clicked. Supported only in Opera, Chrome and Safari 6. Yes    
<time> Defines a date/time      
<wbr> Defines a possible line-break      



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 has a . symbol immediately before the name.




    .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"></div>

Because id="Header" must be unique it can not be used again on the same page. Some Web editors will add a number eg. 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 CSS style for an element


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


title 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 requied 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
Deprecated Description Replacement
<acronym> Acronym  
<applet> Inserts applet <object>
<basefont> sets font styles Use CSS
<big> Defines big text Use CSS
<center> centres text Use CSS <p style="text-align:center">
<dir> directory list Use <ul> Unordered List
<font> applies font styles Use CSS
<frame> A window (a frame) in a frameset  
<frameset> A set of frames  
<noframes> Alternate content for users that do not support frames  
<menu> menu list. Not supported in browsers <ul> Use CSS to style menu lists.
<isindex> Allows a form to contain a simple string search <INPUT> form element.
<s> strike through Use CSS
<strike> strike through Use CSS
<tt> Teletype text  
<u> underline Use CSS












Deprecated HTML attributes

Use CSS syles instead
Attribute Deprecated if used in:
align <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 referer to the relationship between elements.


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

The sibling element can be sub divided into 2 sub catagories 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