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 Div Element
<div> elements come with linebreaks <div> as a container Center align a <div> element Multiple <div> elements Floating <div> elements Position <div> elements with display:inline-block Position <div> elements with display:flex Position <div> elements with display:grid
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-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