HTML5 Examples
This section contains a whole bunch of examples demonstrating the various HTML elements and its features in real action.
HTML Basic
- A simple HTML document
- Specify headings for the content
- Inserting paragraphs of text content
- Creating links to other HTML documents or Web resources
- Inserting images into the HTML document
HTML Text
- Headings - h1 to h6
- Paragraph and line breaks
- Text formatting
- Preformatted text (Preserve line breaks and spaces)
- Sub and Superscript text
- Long and short quotations
- Abbreviations and acronyms
- Marking deleted and inserted text
- Setting text direction of an element
- Insert contact information
- Inserting comments
- Inserting horizontal lines
- Computer output tags
HTML Links
- Create hyperlink
- Using image as a link
- Open link in a new browser window
- Navigate inside page - Jump link
- Move outside of an iframe
- Creating a mailto link - A link that sends an e-mail
HTML Images
- Setting width and height of the images
- Aligning images
- Make a hyperlink of an image
- Creating an image-map - An image with clickable regions
HTML Tables
- Making a simple table - The most basic form of a table
- Setting the dimension of a table
- Specify the table caption
- Tables with borders - Adding the default table borders
- Sets the padding of table cells - The cellpadding attribute
- Sets the distance between table cells - The cellspacing attribute
- Table cells that span more than one row/column - The rowspan/colspan attribute
- Column groups - The col and colgroup elements
HTML Lists
- Creating an unordered list
- Creating an ordered list
- Creating a definition list
- Creating a nested list - Single level
- Creating a nested list - Multi level
HTML Forms
- Creating text input fields
- Creating password input fields
- Creating HTML5 new input fields
- Checkboxes and radio buttons
- Select boxes - A drop-down list
- Select box with a pre-selected value
- Grouping of options inside a select box
- Enable multiple selection inside a select box
- Textarea - A multi-line text input field
- Creating buttons
- File select field
- Grouping similar form fields
- Submit or reset a form - The use of submit and reset button
HTML Styles
- Style HTML elements using inline styles - The style attribute
- Style HTML elements using embedded styles - The style element
- Link to an external style sheet - The link element
- Learn more about styling of HTML elements
HTML iFrame
- Using an iframe to embed a web page inside another HTML document
- Removing the default frameborder from an iframe
- Opening linked web pages inside an iframe
HTML Scripts
- Insert JavaScript inside the HTML pages to add interactivity - The script element
- Include external JavaScript file inside the HTML pages
- Provide alternative content if script isn't supported or disabled - The noscript element
HTML5 New Input Types
- Creating HTML5 color input type
- Creating HTML5 date input type
- Creating HTML5 datetime input type
- Creating HTML5 datetime-local input type
- Creating HTML5 email input type
- Creating HTML5 month input type
- Creating HTML5 number input type
- Creating HTML5 range input type
- Creating HTML5 search input type
- Creating HTML5 tel input type
- Creating HTML5 time input type
- Creating HTML5 url input type
- Creating HTML5 week input type
HTML5 Canvas
- Embedding canvas into HTML documents
- Drawing a line onto the canvas
- Drawing an arc onto the canvas
- Drawing a rectangle onto the canvas
- Drawing a circle onto the canvas
- Setting the stroke color and width on canvas
- Setting the cap style for the stroke on canvas
- Filling color inside a rectangle shape on canvas
- Filling color inside a circular shape on canvas
- Filling linear gradient inside canvas shapes
- Filling radial gradient inside canvas shapes
HTML5 SVG
- Embedding SVG into HTML documents
- Creating a line using SVG
- Creating a rectangle using SVG
- Creating a circle using SVG
- Rendering text on web pages using SVG
- Apply transformation while rendering text on web pages using SVG
HTML5 Audio
- Embedding audio in HTML documents
- Defining alternative sources for audio element
- Linking the audio files
- Inserting audio in HTML documents using the object element
- Inserting audio in HTML documents using the embed element
HTML5 Video
- Embedding video in HTML documents
- Defining alternative sources for video element
- Inserting video in HTML documents using the object element
- Inserting video in HTML documents using the embed element
- Embedding the YouTube video in HTML documents
