List Of HTML Tutorial Examples
Html Basic
Nesting Elements in Correct Order
Never Skip End Tag for an Element
Html Text
Create Bigger Headings using CSS
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
Create Long Quotations using BLOCKQUOTE Element
Create Short Quotations using Q Element
Create Abbreviations and Acronyms
Setting Text Direction of an Element
HTML Links
HTML href Attribute: Creating Interactive Links
Create Effective and Relevant 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
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
HTML List
Change Start Number in an HTML Ordered List
How to Set Images as List Item Markers
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
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 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)
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
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
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
Creating password input fields
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 number input type
Creating HTML5 range input type
Creating HTML5 search 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