HTML Examples
HTML Basic
HTML document
HTML headings
HTML paragraphs
HTML links
HTML images
HTML buttons
HTML lists
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 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
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
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
The <div> element
The <span> element
Styling a <div> element
Styling a <span> element
Examples explained
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
Examples explained
HTML Id
Style an element with a specific id
Difference between class and id
Access an element with a specific id, with JavaScript
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 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 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
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 <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
HTML Canvas Graphics
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
HTML SVG Graphics
SVG Circle
SVG Rectangle
SVG Rounded Rectangle
SVG Star
SVG Logo
Examples explained
HTML Media
Play Bunny
Play bear video with controls
Play bear video with autoplay
Play Horse sound with controls
Examples explained
HTML Geolocation
Get geolocation coordinates
Handle geolocation errors
Get geolocation and watch the position
Examples explained
HTML Local Storage
Store a name permanently
Store a counter permanently
Store a counter for one session
Examples explained
HTML Media
Play a video file
Play an audio file in HTML
Play a YouTube video in HTML
Examples explained
More HTML Examples
HTML drag and drop
HTML web workers
HTML server sent events
★
+1
Reference: https://www.w3schools.com/html/html_examples.asp