HTML Examples
HTML Basic
HTML
document
HTML
headings
HTML
paragraphs
HTML links
HTML images
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
HTML Headings
HTML headings
HTML horizontal
rules
HTML
head
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
HTML Styles
HTML
styles
HTML
background color
HTML text
color
HTML text
font
HTML
text size
HTML
text alignment
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
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
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
HTML Comments
Hidden comments
Conditional
comments
Comments for
debugging
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
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
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
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
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
HTML Block and inline elements
Styling
<div> elements
Styling <span>
elements
HTML Classes
Classing
<div> elements I
Classing <div>
elements II
Classing
<span> elements
HTML Layout
Layout using
<div> elements
Layout
using semantic elements
Layout using
<table> elements
HTML IFrame
Inline frame (a frame inside an HTML page)
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
HTML Scripts
Insert a script
Use of the
<noscript> tag
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
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
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
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
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()
HTML5 SVG
SVG Circle
SVG Rectangle
SVG
Rounded Rectangle
SVG Star
SVG Logo
HTML5 Media
Play Bunny
Play bear video
with controls
Play
bear video with autoplay
Play Horse sound
with controls
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
HTML5 Local Storage
Store a name
permanently
Store
a counter permanently
Store a counter
for one session
More HTML5 Examples
HTML5 drag and
drop
HTML5
application cache
HTML5 web
workers
HTML5 server sent events
