HTML Examples
HTML Basic
HTML document
HTML headings
HTML paragraphs
HTML links
HTML images
HTML buttons
HTML lists
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 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
An image
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
Style all elements with a specified class name
Access elements with a specified class name, with JavaScript
Multiple classes
Same class, different tag
HTML Id
Style an element with a specific id
Difference between class and id
Access an element with a specific id, with JavaScript
HTML Layout
Layout using float
Layout using flexbox
Layout using flexbox 2
Layout using flexbox 3
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 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 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
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 <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 web workers
HTML5 server sent events
