@HTML SHORT TUTORIAL

 Tutorials  Exercises  Services  

HTML  CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++

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

@HTML Documentation ­ w3school

Page 1 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 2 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 3 of 16
@HTML SHORT TUTORIAL
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

@HTML Documentation ­ w3school

Page 4 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 5 of 16
@HTML SHORT TUTORIAL
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

@HTML Documentation ­ w3school
Page 6 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 7 of 16
@HTML SHORT TUTORIAL
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 Documentation ­ w3school

Page 8 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 9 of 16
@HTML SHORT TUTORIAL

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

@HTML Documentation ­ w3school

Page 10 of 16
@HTML SHORT TUTORIAL
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

@HTML Documentation ­ w3school
Page 11 of 16
@HTML SHORT TUTORIAL

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 Documentation ­ w3school
Page 12 of 16
@HTML SHORT TUTORIAL

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
@HTML Documentation ­ w3school
Page 13 of 16
@HTML SHORT TUTORIAL

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 ❯

@HTML Documentation ­ w3school

Page 14 of 16
@HTML SHORT TUTORIAL

COLOR PICKER



 SPACES UPGRADE AD-FREE

NEWSLETTER GET CERTIFIED

REPORT ERROR

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

@HTML Documentation ­ w3school

Page 15 of 16
@HTML SHORT 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 Get Certified

HTML Examples HTML Certificate
CSS Examples CSS Certificate
JavaScript Examples JavaScript Certificate
How To Examples Front End Certificate
SQL Examples SQL Certificate
Python Examples Python Certificate
W3.CSS Examples PHP Certificate
Bootstrap Examples jQuery Certificate
PHP Examples Java Certificate
Java Examples C++ Certificate
XML Examples C# Certificate
jQuery Examples XML Certificate

    FORUM ABOUT
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­2023 by Refsnes Data. All Rights Reserved. W3Schools is Powered by

W3.CSS.

@HTML Documentation ­ w3school

Page 16 of 16