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

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

<article>


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

Block Element

 

<aside>


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

Block Element

 

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

 

<figure>


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

 

<footer>


Defines a footer for the document or a section

Block Element

 

<header>


Defines a header for the document or a section

Block Element

 

<main>


Defines the main content of a document

Block Element

 

<mark>


Defines marked or highlighted text

 

<menu>


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

 

<menuitem> 


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

 

<meter>


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

 

<nav>


Defines navigation links in the document

Block Element

 

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

 

<time>


Defines a date/time

 

<wbr>


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.

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>

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

<a>


By itself acts as a link Anchor

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

Inline Element

<br>


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 preceeding floats. Inline example:

<br style="clear: both;">

No End Tag

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

 

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

 

<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

Block Element. but can include some other block elements

<!DOCTYPE>


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

Essential

1 only per page

 

<h1> to <h6>


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

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

Block Elements

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>

<em>


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

Inline Element

 

<form>

Block Element

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

 

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

 

<i>


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

Use <em> tag instead

Inline Element

<img>


Container for an Image / photograph

The Essential alt attribute 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

Example

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

 

<li>


Defines a list item

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

Block Element

 

<link>


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

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

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

 

<mark>


Highlighted text

Inline Element

<mark>This is highlighted text</mark>

<meta>


Use within the <head> section

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

<ol>


Ordered List

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

See also <ul> Unordered List

Block Element

 

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

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

.

Example

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

 

<span>


General purpose Inline Element element used as a container.

Inline Element

<strong>


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

Example

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

 

<style>


Use within the <head> section

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

Example

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

 

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

Block Element

 

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>

<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

<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. abbr, colspan, headers, rowspan.scope, sorted

Inline Element

<title>


Use within the <head> section

Block Element

<tr>


<tr> table row

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

.

<ul>


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

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

<BASEFONT>

Deprecated HTML tags

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

 

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

In XHTML

  • 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