HTML Examples

❮ Previous 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 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 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


❮ Previous Next ❯
Copyright 1999-2023 by Refsnes Data. All Rights Reserved.