HTML examples.

A bare minimum valid HTML5 document with doctype and structure.

HTML document displaying a single top-level heading element.

Demonstrates all six heading levels from h1 through h6.

Shows how to create multiple paragraph elements with text content.

Uses br for line breaks and hr for horizontal dividers.

Demonstrates how to add invisible comments within HTML code.

Shows common meta tags for character encoding and viewport settings.

Clarifies what belongs in head versus body sections of HTML.

Well-structured page using headings, paragraphs, breaks, and rules together.

Mini-project combining metadata, headings, paragraphs, breaks, rules, and comments.

Display a simple paragraph with one word in bold using the strong tag.

Show the difference between em for emphasis and i for italic styling.

Use the u tag for underline and mark tag to highlight text.

Display chemical formula and mathematical expression using sub and sup tags.

Use the small tag to display fine print or legal disclaimers.

Display a quoted passage using blockquote and cite tags for attribution.

Display formatted code using pre and code tags preserving whitespace.

Use abbr tag to mark abbreviations with full expansion in title attribute.

Display contact information using the address tag with proper formatting.

Create a mini scientific article combining blockquote cite abbr sub sup and code.

A basic anchor tag linking to an external website using an absolute URL.

Demonstrates the difference between absolute and relative link paths in HTML.

Opens external links in new tabs with proper security attributes.

Creates anchor links that navigate to specific sections within the same page.

Creates clickable email and telephone links with pre-filled subject lines.

Creates links that trigger file downloads with custom filenames.

Uses semantic nav element to define main site navigation structure.

Implements hierarchical breadcrumb trail showing the current page location.

Adds a skip navigation link for keyboard users to bypass repetitive content.

Combines breadcrumbs skip links footer groups and multiple navigation patterns into a complete page.

Display a single image with source and alternative text attributes.

Set explicit width and height attributes to control image dimensions.

Use figure and figcaption elements for semantic image markup.

Implement srcset attribute to serve different images based on screen size.

Use picture element to provide different images for different viewport conditions.

Enable browser native lazy loading for images below the fold.

Create clickable regions on an image using map and area elements.

Demonstrate difference between CSS background images and HTML content images.

Add multiple favicon formats for different devices and browsers.

Build a complete image gallery with responsive grid lazy loading and captions.

Display a basic grocery shopping list using an unordered list element.

Create a numbered recipe instruction list using an ordered list element.

Demonstrate ordered list starting at five counting down using Roman numerals.

Build a hierarchical course outline with nested ordered and unordered lists.

Create a glossary of programming terms using description list elements.

Build a horizontal navigation menu using an unordered list with links.

Create a task checklist with custom checkbox styling using class hooks.

Display installation instructions as numbered steps with emphasized substeps.

Display a country list in three columns using CSS column properties.

Build a comprehensive FAQ page combining description lists nested lists and navigation.

A basic HTML table with two rows and two columns.

A table using th elements for column headers.

A table that includes a caption element describing its content.

A table organized with thead tbody and tfoot sections.

A table demonstrating colspan to merge cells horizontally.

A table using both rowspan and colspan for complex layouts.

A table using scope attribute for improved accessibility.

A table using colgroup and col for column styling.

A pricing table with alternating row colors and structured sections.

A comprehensive weekly class schedule with accessibility features colspan and styling.

A simple HTML form with a text input and label using the for attribute.

Form demonstrating password input type that masks user entry for security.

Compares placeholder attribute with proper label elements for accessibility and usability.

Demonstrates number input with min max and range slider for numeric values.

Form with date time and datetime-local inputs for scheduling appointments.

Uses color input type to let users select colors visually.

Form with file input allowing single and multiple file uploads.

Demonstrates hidden inputs for storing data not visible to users.

Shows the difference between readonly and disabled input attributes.

Mini-project registration form combining text email password number date search and file inputs.

A minimal form with one text input and a submit button.

Form with radio buttons for selecting a single option from a list.

Form using checkboxes to allow multiple selections from a group.

Form with a select dropdown menu and grouped options using optgroup.

Text input with autocomplete suggestions using the datalist element.

Form with a textarea for multi-line text input and character limit.

Form demonstrating custom tab order using tabindex attribute for accessibility.

Form using multiple fieldsets with legends to organize related input groups.

Form showing submit reset and generic button types with different behaviors.

Full registration form combining radio groups checkboxes select datalist textarea fieldsets and tabindex.

A simple form with a required text input that prevents submission when empty.

Form enforcing minimum and maximum character limits on a password field.

Form with number input using min, max, and step attributes for age entry.

Form validating a product code using pattern attribute with regular expression.

Form using type email and url for automatic format validation.

Form using pattern attribute with title to display helpful validation message.

Form using inputmode to optimize virtual keyboard layout on mobile devices.

Form with novalidate to disable browser validation for custom handling.

Form using CSS pseudo-classes to style valid and invalid input fields.

Full registration form combining required, pattern, min, max, type validations, and styled validity states.

A minimal HTML page using semantic header, main, and footer elements.

Using the nav element to mark up site navigation links semantically.

Demonstrating when to use section for thematic grouping versus generic div containers.

Using the article element to wrap self-contained, reusable content pieces.

Using aside to mark content tangentially related to surrounding content.

Using figure and figcaption to associate images with their captions semantically.

Demonstrating correct heading levels from h1 to h6 for document structure.

Showing ARIA landmark roles that match semantic HTML5 elements for accessibility.

A complete single-page layout using multiple semantic elements together harmoniously.

A complete blog post with header, article with sections, figures, aside, and proper headings.

A simple hero section with heading and call-to-action button centered on page.

Three product cards displayed in a horizontal grid with images and descriptions.

A list of media objects combining images with text content side-by-side.

Two-column layout with fixed-width sidebar and flexible main content area.

Page layout with header, main content area, and footer that sticks to bottom.

Full-height two-column split screen design with contrasting colors and content.

Three-tier pricing section with featured middle plan and comparison details.

Customer testimonials displayed in cards with quotes, names, and ratings.

Vertical timeline showing company milestones with dates and descriptions.

Full landing page combining hero, pricing, testimonials, FAQ accordion, and sticky footer.

HTML document with UTF-8 charset meta tag in the head section.

Adds viewport meta tag to make the page responsive on mobile devices.

Adds description meta tag for search engine result snippets and previews.

Implements Open Graph protocol meta tags for rich social media sharing previews.

Adds Twitter Card meta tags for enhanced link previews on Twitter platform.

Uses canonical link to prevent duplicate content and robots meta for indexing control.

Sets browser theme color for mobile address bar and app switcher appearance.

Uses dns-prefetch and preconnect hints to speed up third-party resource loading performance.

Demonstrates async and defer attributes for scripts plus stylesheet media queries.

Full featured blog post with comprehensive metadata for SEO social sharing and performance.

Display HTML reserved characters using entity codes for less-than, greater-than, and ampersand symbols.

Show proper usage of quote and apostrophe entities in HTML text content.

Display legal symbols including copyright, registered trademark, and trademark using HTML entities.

Show various international currency symbols using HTML entity codes.

Create a reference showing directional arrows and special arrow symbols.

Display common mathematical operators and symbols using HTML entities.

Show various accented letters from different languages using HTML entity codes.

Demonstrate non-breaking space and soft hyphen for controlling text layout.

Show how to safely include emoji and special characters in HTML.

Build a comprehensive HTML entity reference table with categories, codes, and visual examples.

Display an external webpage inside an iframe with specified width and height.

Use sandbox attribute to restrict iframe capabilities for security purposes.

Embed a YouTube video using iframe with standard embed code pattern.

Embed an interactive Google Maps location using iframe element.

Implement lazy loading for iframes to improve page performance.

Configure iframe permissions using allow attribute and referrer policy settings.

Create and embed a local HTML page within an iframe.

Demonstrate object and embed elements for external content besides iframe.

Create responsive iframe containers that maintain aspect ratio across devices.

Build a comprehensive resource gallery with multiple embed types and lazy loading.

Simple audio player with controls for a single sound file.

Audio player with multiple format sources for browser compatibility.

Basic video element with controls and poster image.

Background video that autoplays muted in a continuous loop.

Three videos demonstrating none, metadata, and auto preload options.

Video player with subtitle tracks using the track element.

Media elements with download links for unsupported browsers.

Grid layout displaying multiple videos with thumbnails and titles.

Interactive audio playlist with multiple tracks and play buttons.

Complete podcast episode page with audio player, transcript, download, and metadata.

Use the id attribute to uniquely identify and style a single element.

Demonstrate the difference between class and id by styling multiple elements.

Apply CSS directly to elements using the style attribute.

Use title attribute to display helpful tooltips on hover.

Set text direction to right-to-left using the dir attribute.

Use the hidden attribute to hide elements from display.

Make HTML elements editable in the browser using contenteditable.

Control spellcheck behavior and set language per element.

Control translation behavior and add keyboard shortcuts with accesskey.

Mini-project combining contenteditable, lang, dir, spellcheck, hidden, and class attributes.

Display a user name stored in a data attribute using JavaScript.

Use data attributes to identify and interact with multiple buttons via JavaScript.

Apply CSS styles based on data attribute values for status indicators.

Toggle component visibility state using data attribute state management.

Store and retrieve item metadata using data attributes in list elements.

Build interactive product cards using data attributes for product information.

Manage table row selection and actions using data id attributes.

Implement tab navigation using data target attributes to control content visibility.

Create modal dialogs triggered by buttons using data attribute hooks.

Build a complete interactive dashboard with tooltips, filtering, and state management using data attributes.

Image with descriptive alternative text for screen readers and failed loads.

Form inputs correctly associated with labels using for attribute and nesting.

Demonstrates proper use of button for actions and anchor for navigation.

Use aria-label and aria-labelledby to provide accessible names for elements.

Hide decorative icons from screen readers using aria-hidden attribute.

Apply ARIA roles to define element purpose when semantic HTML insufficient.

Control keyboard focus order using tabindex with zero and negative one.

Provide text for screen readers while hiding it visually using CSS.

Create icon-only buttons with proper accessible names and focus states.

Complete form with labels, error messages, focus management, and hidden hints.

A button toggles visibility of content using aria-expanded attribute.

Navigation menu marks current page using aria-current attribute for screen readers.

Dynamic alert messages announced to screen readers using role alert.

Non-critical status updates using aria-live polite for background announcements.

Accessible progress indicator using role progressbar with aria-valuenow and aria-valuemax.

Accessible tab interface using tablist tab and tabpanel roles with keyboard navigation.

Dropdown menu activated by button using aria-haspopup and aria-expanded attributes.

Accessible modal dialog using role dialog with aria-labelledby and aria-modal attributes.

Accessible tooltip shown on hover using role tooltip and aria-describedby.

Mini-project combining accordion disclosure tabs alerts and progress indicators.

A simple collapsible accordion using the details and summary tags.

Shows a progress element indicating task completion percentage.

Displays a meter element showing a value within a known range.

Demonstrates the input date element for selecting dates natively.

Creates a star rating input using radio buttons and CSS styling.

Uses the output element to display calculation results dynamically.

Implements a pure CSS toggle using checkbox and label elements.

Creates a modal dialog using the native dialog element with open button.

Builds a frequently asked questions section using multiple details elements.

Combines progress meter dialog date picker and output into one survey application.

Shows how template element holds inactive HTML that can be cloned via JavaScript.

Demonstrates time element with datetime attribute for machine-readable dates.

Uses wbr element to suggest optional line breaks in long words or URLs.

Shows ruby element for pronunciation guides often used in East Asian typography.

Demonstrates bidirectional text isolation and override for mixed-direction content.

Uses ins and del elements to mark editorial changes in document content.

Demonstrates kbd for keyboard input, samp for output, var for variables.

Uses dfn element to mark the defining instance of a term in text.

Demonstrates cite element for referencing titles of creative works in reviews.

Mini-project combining template, time, dfn, kbd, ins, del, and cite into interactive glossary.

Input element outside form uses form attribute to associate with the form.

Multiple submit buttons with formaction override the form action attribute dynamically.

Submit buttons override form method attribute using formmethod for different HTTP verbs.

File input with multiple attribute and accept filters for specific file types.

Image type submit button captures click coordinates in form data automatically.

Select element with multiple and size attributes for multi-option visible list selection.

Fieldset with disabled attribute disables all contained form controls at once.

Compare implicit label wrapping with explicit for attribute association for accessibility.

Use autocomplete tokens for address fields and range input with output element.

Full checkout form using formaction overrides multiple file upload disabled fieldset and autocomplete.

Table header stays visible when scrolling down a long table.

Table scrolls horizontally on small screens to prevent overflow.

Right-align numeric columns for better readability and comparison.

Display column totals in a dedicated table footer row.

Organize table rows into sections with subheadings for clarity.

Table with both row and column headers for cross-reference data.

Represent a monthly calendar using a table with day headers.

Compare multiple products across various features in a table.

Use headers attribute to associate data cells with header cells.

Complete invoice with sticky header responsive wrapper footer totals and aligned columns.

Basic HTML page with viewport meta tag for mobile responsiveness.

Uses picture element to show different images based on viewport width.

Demonstrates srcset with sizes attribute for responsive image loading optimization.

Loads different images based on device orientation using media queries.

Serves high resolution images to high DPI displays using pixel density descriptors.

Uses video element with multiple source formats for browser compatibility.

Applies different CSS for screen and print media types.

Creates a hero section with responsive background images and viewport-based text.

Demonstrates complex media queries with container queries simulation for responsive layouts.

Complete mini-project combining art direction, DPI images, responsive video, and print styles.

Simple HTML article with schema.org Article microdata for headline and author.

Product listing with schema.org Product microdata including name, price, and currency.

Breadcrumb navigation with schema.org BreadcrumbList microdata for three levels.

FAQ page using schema.org FAQPage microdata with two question-answer pairs.

HowTo guide with schema.org HowTo markup for a three-step process.

Company information with schema.org Organization markup including name and logo.

Individual profile page with schema.org Person microdata for author bio.

Conference event with schema.org Event markup including date and venue details.

Product with customer review and star rating using schema.org Review markup.

Full product page combining JSON-LD script with Product, Review, BreadcrumbList, and FAQPage.

Simple email-safe table structure with inline styles for cross-client compatibility.

Hidden preheader text that appears in email client preview without cluttering the design.

Email button using VML and table fallbacks to work across all email clients.

Webpage with separate print stylesheet to hide navigation and optimize for printing.

Multi-page document with CSS page-break controls to prevent awkward content splitting when printing.

Professional invoice layout with company header itemized table and totals optimized for printing.

Professional business letter template with company letterhead header and footer for official correspondence.

Award certificate layout with border decorative elements and signature lines ready for printing.

Complete email newsletter template with header hero section article blocks and social footer.

Complete email-safe invoice with preheader bulletproof payment button and print optimization combined.

Define and use a basic custom element with text content.

Clone a template element into a custom element shadow root.

Use declarative shadow DOM to define component markup inline.

Create a card component using named slots for flexible content.

Pass data to custom elements using HTML attributes.

Compose multiple custom components together in a single page.

Build a gallery component displaying multiple widget items.

Create a tabs component with clickable tab navigation.

Build an interactive star rating component using attributes.

Mini-project combining slots, attributes, composition and rating in a product dashboard.

HTML page demonstrating script defer attribute for non-blocking JavaScript execution.

Comparison of async and defer script loading strategies with execution timing.

Using type module for modern JavaScript with automatic defer behavior.

Using link preload to prioritize critical resources before they are discovered.

Using link prefetch to speculatively load resources for likely navigation.

Using fetchpriority to control resource loading priority for optimal performance.

Using decoding async to prevent images from blocking main thread rendering.

Inlining critical CSS in head for instant above-fold rendering.

Optimized font loading with preload and font-display for better performance.

Complete optimized article page combining defer scripts inline CSS preload and fetchpriority.

A minimal personal introduction card with name and tagline.

A simple restaurant menu listing appetizers and main courses with prices.

A landing page for a tech conference with date and registration button.

A product showcase page with image placeholder and purchase button.

A blog listing page showing three article previews with dates.

A contact page featuring form fields and an embedded Google Maps iframe.

A responsive photo gallery with placeholder images in a grid layout.

A documentation page with a table of contents sidebar and sections.

Two authentication forms with toggle between login and signup views.

A coming soon landing page with countdown timer and email subscription form.

A simple HTML resume with contact info, education, and work experience sections.

A recipe page enhanced with structured data for search engine optimization.

A day-by-day travel plan with times, locations, and activity descriptions.

A local coffee shop homepage with hours, menu highlights, and contact info.

An archive listing past newsletter issues with dates and preview excerpts.

A job posting page with position details, requirements, and application link.

An interactive quiz with radio buttons and submit functionality for user testing.

A comprehensive survey form demonstrating various HTML input types and controls.

A dashboard layout skeleton with header, sidebar navigation, and content sections.

A complete one-page website with smooth navigation, hero, services, portfolio, and contact sections.