HTML Examples ❮ Prev Next ❯ 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 ❮ Prev Next ❯