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.

Attributes

  • href        The Link address eg <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 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

<body>

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

Essential

1 only per page

<b>

<b>This is bold text</b>

 

Tag Description / Comments End
Tag
  HTML5
<a>

 

 

  Inline  
<b>

 

Bold use the <strong> tag instead

 

Yes Inline NONE

<BASEFONT>

 

Deprecated

     
<br>

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>

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>

 

    NONE
<dd>        
<dl>

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

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

In HTML5 only <!DOCTYPE> is required

Essential

1 only per page

 

No    
<h1> to <h6>

<h1> Main Heading
Almost Essential 1 only per page

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

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

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

 

Yes inline  
<form>   Yes Block  
<head>

One, and only one <head>

Essential

 

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>

 

    NONE
<html>

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>

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

Use <em> tag instead

 

Yes inline  
<img> Image No inline  
<li>

Defines a list item

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

 

  Block src
alt
<link>

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

Example Link to External Style Sheet

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

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

No   href
hreflang
media
rel
sizes
type
<mark> <mark>This is highlighted text</mark> Yes inline  
<meta> Use within the <head> section     charset
content
http-equiv
name
<ol>

Ordered List

Use with <li>

See also <ul> Unordered List

 

Yes Block reversed
start
type
<p>

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

Example

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

 

Opt Block

align
left right center justify

align Not supported in HTML5.

Use CSS to align

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

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

Example

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

 

Yes Inline  
<style>

Use within the <head> section

Used as a container for a page styles.

Example

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

 

Yes   media
scoped
type
<table>

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>

Example

<table>
<caption>Top Shops</caption>
<tr>
   <th>Shop</th>
   <th>Address</th>
</tr>
<tr>
   <td>The Baker</td>
   <td>High Street</td>
</tr>
</table>

  Block abbr
colspan
rowspan
scope
sorted
<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

 

  Inline colspan
headers
rowspan
<th>

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
colspan
headers
rowspan
scope
sorted
<title>

Use within the <head> section

 

    NONE
<tr>

<tr> table row

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

.

  Block NONE
<ul>

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

 

In XHTML

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

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.

 

Example

<head>
    <style>      

    .red {background: red;}
    .grey {background: gray;}
    .simpleborder border: 1px solid black;}

    </style>
</head>
<body>
    <div class="red">Some content</div>
    <div class="simpleborder grey">Some content</div>

</body>

 

 

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

 

 

id

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

Example

<head>
    <style>
        #Header {background: red;}
    </style>
</head>
<body>
    <div id="Header"></div>
</body>

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

style

Specifies an inline CSS style for an element

Example

<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

Example

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

Deprecated

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

 

 

Attributes

 

 

 

 

 

width

 

 

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

Example

div > p { Your CSS styles }

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

 

+ Adjacent Sibling Selector

Example

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

Example

div ~ p { Your CSS styles}

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