Tutorials
THE WORLD'S LARGEST WEB DEVELOPER SITE

HTML Examples

HTML Basic

HTML document
HTML headings
HTML paragraphs
HTML links
HTML images

Examples explained


HTML Attributes

The title attribute
The href attribute
The width and height attributes
The alt attribute
Attribute without quotes
Attribute without quotes does not work

Examples explained


HTML Headings

HTML headings
HTML horizontal rules
HTML head

Examples explained


HTML Paragraphs

HTML paragraphs
More HTML paragraphs
The use of line breaks in HTML
Poem problems (some problems with HTML formatting)
How to control the line breaks and spaces with the <pre> tag

Examples explained


HTML Styles

HTML styles
HTML background color
HTML text color
HTML text font
HTML text size
HTML text alignment

Examples explained


HTML Text Formatting

Bold formatting using the <b> element
Strong formatting using the <strong> element
Italic formatting using the <i> element
Emphasized formatting using the <em> element
Small formatting using the <small> element
Marked formatting using the <mark> element
Marked deleted using the <del> element
Marked inserted using the <ins> element
Marked deleted and inserted using <del> and <ins>
Subscript formatting using the <sub> element
Superscript formatting using the <sup> element

Examples explained


HTML Quotations and Citations

Formatting short quotations with the <q> element.
Formatting quoted sections with the <blockquote> element.
Formatting document author/owner information with the <address> element
Formatting abbreviations and acronyms the <abbr> element
Formatting work title with the <cite> element
Formatting text direction with the <bdo> element

Examples explained


HTML Computercode Elements

Keyboard input formatting using the <kbd> element
Computer output formatting using the <samp> element
Programming code formatting using the <code> element
Programming code formatting preserving whitespace and line-breaks
Variable formatting using the <var> element

Examples explained


HTML Comments

Hidden comments
Conditional comments
Comments for debugging

Examples explained


HTML CSS

HTML with inline CSS
HTML with internal CSS
HTML with external CSS
HTML with CSS fonts
HTML with CSS using the id attribute
HTML with CSS using the class attribute
HTML and CSS borders
HTML and CSS padding
HTML and CSS margin
HTML and CSS full demo

Examples explained


HTML Links

Linking, using an absolute URL
Linking, using a relative URL
Changing the color of links
Removing the underline from links
Changing the target of a link
An image as a link
Creating a bookmark link
A link that breaks out of a frame
A mailto link
A mailto link with subject

Examples explained


HTML Images

The Mountain
An image height and width using attributes
An image height and width using CSS
An image height and width using both
An image in another folder
An image with a broken link
An image on another server
Using an image as a link
A moving image
An image map with clickable regions
A floating image

Examples explained


HTML Tables

Basic HTML tables
A table with borders
A table with collapsed borders
A table with cell padding
A table with headings
A table with left-aligned headings
Horizontal/Vertical table headings
A table with a caption
Table cells that span more than one column
Table cells that span more than one row
A table with cell spacing
A table with HTML tags inside
Tables with different style using id I
Tables with different style using id II
Tables with different style using class I
Tables with different style using class II

Examples explained


HTML Lists

An unordered list (default)
An unordered list with disc bullets
An unordered list with circle bullets
An unordered list with square bullets
An unordered list without bullets
An ordered list (default)
An ordered list with numbers
An ordered list with letters
An ordered list with lowercase letters
An ordered list with roman numbers
An ordered list with lowercase roman numbers
A description list
A nested list I
A nested list II
A horizontal list
A horizontal list menu

Examples explained


HTML Block and inline elements

Styling <div> elements
Styling <span> elements

Examples explained


HTML Classes

Classing <div> elements I
Classing <div> elements II
Classing <span> elements

Examples explained


HTML Layout

Layout using float
Layout using flexbox
Layout using flexbox 2
Layout using flexbox 3

Examples explained


HTML IFrame

Inline frame (a frame inside an HTML page)

Examples explained


HTML head Elements

A valid HTML document with no <html> <body, and <head>
A valid HTML document with no <head> element
The <title> element defines the document title
The <style> element contains style information
The <link> element defines a relationship to an external resource
The <meta> element defines special meta information
The <script> element defines client-side JavaScripts
The <base> element defines the base URL for all URLs

Examples explained


HTML Scripts

Insert a script
Use of the <noscript> tag

Examples explained


HTML Forms

Form with text input
Form with radio button input
Form with text fields and a submit button
Form with a text fields without a name attribute
Grouping Form Data
Send e-mail from a form

Examples explained


HTML Form Elements

A simple drop-down list
A drop-down list with a pre-selected value
A textarea (a multi-line text input field)
An input button
Using the <datalist> Element
Using the <keygen> Element
Using the <output> Element

Examples explained


HTML Input Types

Input type text
Input type password
Input type radio
Input type checkbox
Input type button
Input type number - with restrictions
Input type number - with steps
Input type date - with date picker
Input type date - with restrictions
Input type color - with color picker
Input type range
Input type month
Input type week
Input type time
Input type datetime
Input type datetime-local
Input type email
Input type search
Input type tel
Input type url

Examples explained


HTML Input Attributes

The autocomplete attribute
The novalidate attribute
The autofocus_attribute
The form attribute
The formaction attribute
The formenctype attribute
The formmethod attribute
The formnovalidate attribute
The formtarget attribute
The height and width attributes
The list attribute
The min and max attributes
The multiple attribute
The pattern attribute
The placeholder attribute
The required attribute
The step attribute

Examples explained


HTML5 Canvas

Draw on the canvas with JavaScript
Draw a line with lineTo()
Draw a circle with arc()
Draw a text with fillText()
Draw a text with strokeText()
Draw a linear gradient
Draw a circular gradient
Draw an image with drawImage()

Examples explained


HTML5 SVG

SVG Circle
SVG Rectangle
SVG Rounded Rectangle
SVG Star
SVG Logo

Examples explained


HTML5 Media

Play Bunny
Play bear video with controls
Play bear video with autoplay
Play Horse sound with controls

Examples explained


HTML5 Geolocation

Get geolocation coordinates
Handle geolocation errors
Get geolocation with a map
Get geolocation with Google map script
Get geolocation and watch the position

Examples explained


HTML5 Local Storage

Store a name permanently
Store a counter permanently
Store a counter for one session

Examples explained


More HTML5 Examples

HTML5 drag and drop
HTML5 application cache
HTML5 web workers