HTML Examples

HTML Examples


HTML Basic

  1. HTML document
  2. HTML headings
  3. HTML paragraphs
  4. HTML links
  5. HTML images
  6. HTML buttons
  7. HTML lists

Examples explained


HTML Attributes

  1. The title attribute
  2. The href attribute
  3. The width and height attributes
  4. The alt attribute
  5. Attribute without quotes
  6. Attribute without quotes does not work

Examples explained


HTML Headings

  1. HTML headings
  2. HTML horizontal rules
  3. HTML head

Examples explained


HTML Paragraphs

  1. HTML paragraphs
  2. More HTML paragraphs
  3. The use of line breaks in HTML
  4. Poem problems (some problems with HTML formatting)
  5. How to control the line breaks and spaces with the <pre> tag

Examples explained


HTML Styles

  1. HTML styles
  2. HTML background color
  3. HTML text color
  4. HTML text font
  5. HTML text size
  6. HTML text alignment

Examples explained


HTML Text Formatting
  1. Bold formatting using the <b> element
  2. Strong formatting using the <strong> element
  3. Italic formatting using the <i>
  4.  formatting using the <em> element
  5. Small formatting using the <small> element
  6. Marked formatting using the <mark> element
  7. Marked deleted using the <del> element
  8. Marked inserted using the <ins> element
  9. Marked deleted and inserted using <del> and <ins>
  10. Subscript formatting using the <sub> element
  11. Superscript formatting using the <sup> element

Examples explained


HTML Quotations and Citations

  1. Formatting short quotations with the <q> element.
  2. Formatting quoted sections with the <blockquote> element.
  3. Formatting document author/owner information with the <address> element
  4. Formatting abbreviations and acronyms the <abbr> element
  5. Formatting work title with the <cite> element
  6. Formatting text direction with the <bdo> element

Examples explained


HTML Comments

  1. Hidden comments
  2. Conditional comments
  3. Comments for debugging

Examples explained


HTML CSS

  1. HTML with inline CSS
  2. HTML with internal CSS
  3. HTML with external CSS
  4. HTML with CSS fonts
  5. HTML with CSS using the id attribute
  6. HTML with CSS using the class attribute
  7. HTML and CSS borders
  8. HTML and CSS padding
  9. HTML and CSS margin
  10. HTML and CSS full demo

Examples explained


HTML Links

  1. Linking, using an absolute URL
  2. Linking, using a relative URL
  3. Changing the color of links
  4. Removing the underline from links
  5. Changing the target of a link
  6. An image as a link
  7. Creating a bookmark link
  8. A link that breaks out of a frame
  9. A mailto link
  10. A mailto link with subject

Examples explained


HTML Images

  1. An image
  2. An image height and width using attributes
  3. An image height and width using CSS
  4. An image height and width using both
  5. An image in another folder
  6. An image with a broken link
  7. An image on another server
  8. Using an image as a link
  9. A moving
  10. image map with clickable regions
  11. A floating image

Examples explained


HTML Tables

  1. Basic HTML tables
  2. A table with borders
  3. A table with collapsed borders
  4. A table with cell padding
  5. A table with headings
  6. A table with left-aligned headings
  7. Horizontal/Vertical table headings
  8. A table with a caption
  9. Table cells that span more than one column
  10. Table cells that span more than one row
  11. A table with cell spacing
  12. A table with HTML tags inside
  13. Tables with different style using id I
  14. Tables with different style using id II
  15. Tables with different style using class I
  16. Tables with different style using class II

Examples explained


HTML Lists

  1. An unordered list (default)
  2. An unordered list with disc bullets
  3. An unordered list with circle bullets
  4. An unordered list with square bullets
  5. An unordered list without bullets
  6. An ordered list (default)
  7. An ordered list with numbers
  8. An ordered list with letters
  9. An ordered list with lowercase letters
  10. An ordered list with roman numbers
  11. An ordered list with lowercase roman numbers
  12. A description list
  13. A nested list I
  14. A nested list II
  15. A horizontal list
  16. A horizontal list menu

Examples explained


HTML Block and inline elements

  1. The <div> element
  2. The <span> element
  3. Styling a <div> element
  4. Styling a <span> element

Examples explained


HTML Classes

  1. Style all elements with a specified class name
  2. Access elements with a specified class name, with JavaScript
  3. Multiple classes
  4. Same class, different tag

Examples explained


HTML Id

  1. Style an element with a specific id
  2. Difference between class and id
  3. Access an element with a specific id, with JavaScript

Examples explained


HTML Layout

  1. Layout using float
  2. Layout using flexbox
  3. Layout using flexbox 2
  4. Layout using flexbox 3

Examples explained


HTML IFrame

  1. Inline frame (a frame inside an HTML page)

Examples explained


HTML head Elements

  1. A valid HTML document with no <html> <body, and <head>
  2. A valid HTML document with no <head> element
  3. The <title> element defines the document title
  4. The <style> element contains style information
  5. The <link> element defines a relationship to an external resource
  6. The <meta> element defines special meta information
  7. The <script> element defines client-side JavaScripts
  8. The <base> element defines the base URL for all URLs

Examples explained


HTML Scripts

  1. Insert a script
  2. Use of the <noscript> tag

Examples explained


HTML Computercode Elements

  1. Keyboard input formatting using the <kbd> element
  2. Computer output formatting using the <samp> element
  3. Programming code formatting using the <code> element
  4. Programming code formatting preserving whitespace and line-breaks
  5. Variable formatting using the <var> element

Examples explained


HTML Forms

  1. Form with text input
  2. Form with radio button input
  3. Form with text fields and a submit button
  4. Form with a text fields without a name attribute
  5. Grouping Form Data

Examples explained


HTML Form Elements

  1. A simple drop-down list
  2. A drop-down list with a pre-selected value
  3. A textarea (a multi-line text input field)
  4. An input buttonUsing the <datalist> Element
  5. Using the <output> Element

Examples explained


HTML Input Types

  1. Input type text
  2. Input type password
  3. Input type radio
  4. Input type checkbox
  5. Input type button
  6. Input type number – with restrictions
  7. Input type number – with steps
  8. Input type date – with date picker
  9. Input type date – with restrictions
  10. Input type color – with color picker
  11. Input type range
  12. Input type month
  13. Input type week
  14. Input type time
  15. Input type datetime
  16. Input type datetime-local
  17. Input type email
  18. Input type search
  19. Input type tel
  20. Input type url

Examples explained


HTML Input Attributes

  1. The autocomplete attribute
  2. The novalidate attributeT
  3. he autofocus_attribute
  4. The form attribute
  5. The formaction attribute
  6. The formenctype attribute
  7. The formmethod attribute
  8. The formnovalidate attribute
  9. The formtarget attribute
  10. The height and width attributes
  11. The list attribute
  12. The min and max attributes
  13. The multiple attribute
  14. The pattern attribute
  15. The placeholder attribute
  16. The required attribute
  17. The step attribute

Examples explained


HTML Canvas Graphics

  1. Draw on the canvas with JavaScript
  2. Draw a line with lineTo()
  3. Draw a circle with arc()
  4. Draw a text with fillText()
  5. Draw a text with strokeText()
  6. Draw a linear gradient
  7. Draw a circular gradient
  8. Draw an image with drawImage()

Examples explained


HTML SVG Graphics

  1. SVG Circle
  2. SVG Rectangle
  3. SVG Rounded Rectangle
  4. SVG StarSVG Logo

Examples explained


HTML Media

  1. Play Bunny
  2. Play bear video with controls
  3. Play bear video with autoplay
  4. Play Horse sound with controls

Examples explained


HTML Geolocation

  1. Get geolocation coordinates
  2. Handle geolocation errors
  3. Get geolocation and watch the position

Examples explained


HTML Local Storage

  1. Store a name permanently
  2. Store a counter permanently
  3. Store a counter for one session

Examples explained


HTML Media

  1. Play a video file
  2. Play an audio file in HTML
  3. Play a YouTube video in HTML

Examples explained


More HTML Examples

  1. HTML drag and drop
  2. HTML web workers
  3. HTML server sent events

 

ArmenianEnglish