List Of HTML Tutorial Examples

Html Basic

A Simple HTML Document

Creating Comments

Hide Code Using Comments

Case Insenitvity In Elements

Empty Elements

Nesting Elements

Nesting Elements in Correct Order

Never Skip End Tag for an Element

How to Create Attibutes

Html Boolean Attributes

Html Id Attribute

Html Class Attribute

Html Title Attribute

Html Style Attribute

Html Div Element

Html Span Element

Html Text

Create Headings - H1 to H6

Create Bigger Headings using CSS

Creating Paragraph

Closing Paragraph

Creating Line Breaks Inside Paragraph

Creating Horizontal Rule (HR) Between Paragraphs

Space Collapsing Between Text In Paragraph

Preserving White Spaces In Paragraphs

Create Preformatted Text (Preserve line breaks and spaces)

Html Text Formatting and Styling Elements

Difference between Strong and Bold Tags

Difference between Emphasis and Italic Tags

Display Small Sized Text and Highlight or Mark Text

Marking Deleted and Inserted Text

Subscript and Superscript Text

Display Text as Computer Programming Code

Display Programming Code using Pre Tag (Preserve line breaks and spaces)

Display Text as Program Variable Name

Get Keyboard Input using KBD Tag

Program Output using SAMP Tag

Create Long Quotations using BLOCKQUOTE Element

Create Short Quotations using Q Element

Create Abbreviations and Acronyms

Insert Contact Information

Insert Cite Information

Setting Text Direction of an Element

HTML Links

How to Create Links

HTML href Attribute: Creating Interactive Links

Create Effective and Relevant Link Text

Using Image as a Link Text

Open link in a new browser window

Optimizing Link Descriptions with Title Attribute in Anchor Tags

Enabling File Downloads with HTML Download Attribute

Optimizing Non-HTML Resource Links

Creating Email Links using Mailto Scheme - A link that sends an e-mail

Creating Bookmarks in HTML for Easy Navigation

How to Remove Underline from HTML Links

Html Images

How to Insert Images in Html Page

Setting Image Source and Alternate Text of an Image

Setting the Width and Height of an Image

Make a hyperlink of an image

How to Create Floating Alignment Images

How to Align an Image Vertically Based on Surrounding Content

Create Responsive Images using Picture Element

Creating an image-map - An image with clickable regions


Creating an Ordered List

Change Start Number in an HTML Ordered List

Creating an Unordered List

Creating a Nested List

Html Type Attribute

How to Set Images as List Item Markers

Creating an Definition List

Creating an Horizontal List

HTML Tables

Creating a simple table - The most basic form of a table

Tables with borders - Adding the default table borders

Tables with borders - Set width, color, and style using CSS

Tables with collapsed borders

Set spaces between columns and content using cell spacing and padding

Table cells that span more than one row/column - The rowspan/colspan attribute

Setting Text Alignment in Table Cells

Specify the table caption

Specify the table header and footer

HTML iFrame

Using an iframe to embed a web page inside another HTML document

Setting Height and Width of an iframe

Removing the default frame border from an iframe

Creating customized iframe border with color, width and style

Opening linked web pages inside an iframe

The <object> Element: Embed external content like PDF, Video, SVG Image, and more

HTML Layout

How to Create Table-Based Layout using the HTML Table Element

How to Create DIV-Based Layout using the HTML Div Element

How to Create HTML5 New Modern Layout using the HTML5 Structural Elements

HTML Multimedia (Video, Audio, and Youtube)

Embedding video in HTML documents

Defining alternative sources for video element

How to Automatically Play Videos without Sound on HTML Pages

Setting Poster Images and Looping Videos in HTML

Embedding audio in HTML documents

Defining alternative sources for audio element

Creating Customized (Autoplay and Loop) Audio Player in HTML Documents

Linking the Audio Files in HTML Page

Playing a YouTube Video in HTML

How to Automatically Play Youtube Videos Continuously or Repeatedly without Sound

How to Display Youtube Video Title and Thumbnail

How to Control Youtube Video Playtime Range (Start time and end time)

HTML Graphics (SVG and Canvas)

Embedding SVG into HTML Pages

Drawing a Line using SVG <line> Element

Drawing a Rectangle using SVG <rect> Element

Drawing a Circle using SVG <circle> Element

Drawing Text with SVG using <text> and <tspan> Element

Drawing an Raster Image with SVG using <image> Element

How to Embed Canvas into HTML documents.

How to Draw a Line into the HTML Canvas.

How to Draw a Arc into the HTML Canvas.

How to Draw a Rectangle into the HTML Canvas.

How to Draw a Circle into the HTML Canvas.

Applying the stroke color and width on the canvas

Setting the cap style for the stroke on the Canvas

Filling color inside a rectangle shape on the canvas

Filling color inside a circle shape on the canvas

Filling linear gradient colors inside canvas shapes

Filling Radial gradient colors inside canvas shapes

Drawing text on the canvas

How to apply color and alignment on text in the canvas

How to apply stroke effect on text in canvas

How to draw or display an image on the canvas

HTML Head Section (Title, Style, Meta, Script and etc)

How to create a Title for an HTML page

How to create a Base URL for relative links in a current page

Style HTML elements using inline styles - The style attribute

Style HTML elements using embedded styles - The style element

Link to an external CSS style sheet - The link element

Import the external style sheet into the style element - The @import statement

Adding Javascript Code to an Html page - The script Element

Insert or Embed JavaScript Code inside the HTML pages - The script element

Include or Link external JavaScript file inside the HTML pages

Provide alternative content if javascript isn't supported or disabled in the browser - The noscript element

HTML5 Features

How to Drag and Drop an HTML Element into another

Getting visitor's coordinates (latitude and longitude) with HTML5 geolocation

Handing errors and rejections while working with HTML5 geolocation

Showing user location on interactive Google map using latitude and longitude

Monitoring (current location) the Visitor's Movement using HTML5 geolocation

Storing and Retrieving data with HTML5 local storage

Storing and Retrieving data with HTML5 session storage

Doing JavaScript works in the background with HTML5 web worker

Terminating a running web worker

Html Form and Attributes

Simple HTML Form

Creating text input fields

Creating password input fields

Creating Radio Buttons

Creating Checkboxes

File Select Field Box

Textarea - A multi-line text input field

Select boxes - A drop-down list and listbox with multiple selection

Grouping of options inside a select box

Submit or reset a form - The use of submit and reset button

Grouping similar form controls

How to Create Suggestion List using HTML Datalist Element

Navigating Form Submissions: HTML Form Action Attribute

How to Open Form Response in a New Browser window or tab - The target Attribute

Sending Form Requests with the GET Method

Sending Form Requests with the POST Method

How to prevent default form validation - The novalidate Attribute

HTML5 New Input Types and Attributes

Creating HTML5 color input type

Creating HTML5 email input type

Creating HTML5 url input type

Creating HTML5 number input type

Creating HTML5 range input type

Creating HTML5 search input type

Creating HTML5 tel input type

Creating HTML5 date input type

Creating HTML5 datetime-local input type

Creating HTML5 month input type

Creating HTML5 time input type

Creating HTML5 week input type

Setting the initial value of an input element - The value Attribute

How to prevent users from modifying the content - The readonly Attribute

Creating temporarily or permanently inactive element - The disabled Attribute

Controlling input element visible width - The size Attribute

How to limit the number of characters on user input - The maxlength Attribute

How to set an input element as mandatory - The required Attribute

How to display brief input format description on input element - The placeholder Attribute

How to set the focus on an HTML element - The autofocus Attribute

How to create autocompletion suggestions for the input element - The autocomplete Attribute

How to specify the acceptable range of values for input elements - The min and max Attributes

How to set the incremental steps for input elements - The step Attribute

How to provide a suggestion list on input elements - The list Attribute

How to set input validation by using regular expressions on input elements - The pattern Attribute

HTML Global Attributes

HTML accesskey Attribute

HTML class Attribute

HTML dir Attribute

Html Hidden Attributes

Html lang Attributes

Html Style Attributes Value

HTML tabindex Attribute

HTML title Attribute

HTML translate Attribute