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-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 ❯

W3schools Pathfinder

Track your progress - it's free!

Get Certified

COLOR PICKER

colorpicker

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
sales@w3schools.com

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
help@w3schools.com

Top Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
How To Tutorial
SQL Tutorial
Python Tutorial
W3.CSS Tutorial
Bootstrap Tutorial
PHP Tutorial
Java Tutorial
C++ Tutorial
jQuery Tutorial

Top References

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top Examples

HTML Examples
CSS Examples
JavaScript Examples
How To Examples
SQL Examples
Python Examples
W3.CSS Examples
Bootstrap Examples
PHP Examples
Java Examples
XML Examples
jQuery Examples

Get Certified

HTML Certificate
CSS Certificate
JavaScript Certificate
Front End Certificate
SQL Certificate
Python Certificate
PHP Certificate
jQuery Certificate
Java Certificate
C++ Certificate
C# Certificate
XML Certificate

FORUM ABOUT CLASSROOM

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.