Style

Purpose and Usage

How To Use This Page

• Check heading hierarchy and paragraph rhythm first.
• Verify component states (links, buttons, inputs, disabled states) next.
• Validate overflow and embedded media behavior last.

Typography and Text

This section validates core text semantics and common content formatting patterns.

Heading

The <h1> to <h6> HTML elements represent headings, with <h1> being the highest (most important) level and <h6> the lowest. They structure content hierarchically, aiding readability and accessibility. These elements are often styled with larger or bolder text by default, but their appearance can be customized with CSS. Proper use of heading levels ensures semantic accuracy, improves SEO, and helps assistive technologies like screen readers navigate content effectively.

Link

The <a> HTML element, known as the anchor element, is used to create hyperlinks that navigate to other pages, sections within the same page, or external resources. It includes the href attribute to specify the link's destination and can be styled with CSS for visual customization. Anchors also support additional attributes like target to open links in new tabs or windows and rel to define the relationship between the current document and the linked resource. The <a> element is a core component for building navigable and interconnected web content.

Buttons

Buttons in HTML can be created using the <button> element or styled <a> links with a button-like class (e.g., .button). They can be displayed inline or as separate elements within <p> or <div> containers. Inline buttons are positioned next to each other, while separate buttons are placed on distinct lines or blocks. Proper styling with CSS ensures visual consistency and enhances usability, while semantic use of <button> is recommended for interactive controls and form submissions.

Nested in Paragraph

Inline

Separate

Nested in Div

Inline

Separate

Paragraph

The <p> HTML element represents a paragraph, serving as the basic block of text content in a document. Browsers automatically add spacing before and after <p> elements to separate them visually. It is a versatile element for structuring text, supporting inline elements like <strong>, <em>, and <a> for emphasis, links, and formatting. Proper use of <p> ensures readability and semantic clarity in HTML documents.

Blockquote

The <blockquote> HTML element is used to represent a section of content that is a quotation from another source. Typically, browsers render <blockquote> content with indented margins to visually differentiate it from surrounding text. Optional attributes like cite can specify the source URL of the quote for attribution. This element is ideal for longer quotations, while shorter quotes are better suited to the <q> element.

Background Color

The background-color CSS property sets the background color of an element. It supports various color formats, including named colors like DodgerBlue, hexadecimal values such as #A1F203, RGB(A) values like rgba(125, 255, 71, 0.25), and HSL(A) values such as hsl(210deg, 100%, 66%). This property is commonly used to add color behind content, highlight sections, or define visual themes, and it can be combined with transparency for layered designs.

Text Color

The color CSS property sets the text color of an element. It supports various formats, including named colors like Tomato, hexadecimal values such as #FA0, RGB(A) values like rgb(82, 255, 146), and HSL(A) values such as hsl(0deg, 100%, 66%). Modern syntax allows for enhanced readability, such as space-separated values in rgb() and hsl(). These formats provide flexibility for defining text colors with precision, transparency, or predefined names, enhancing the visual design of webpages.

List

Lists in HTML are used to group related content, offering a structured way to display items. There are three main types of lists: <ul> (unordered list) for items with no specific order, <ol> (ordered list) for numbered or ranked items, and <dl> (description list) for term-description pairs. Each list type uses <li> for individual items, except <dl>, which uses <dt> (term) and <dd> (description). Lists are highly customizable with CSS properties like list-style-type, margin, and padding, allowing developers to tailor their appearance and layout for a variety of use cases such as menus, content groupings, or data presentations.

Definition List

The <dl> element represents a definition list, with <dt> for terms and <dd> for their definitions.

Ordered List

Numerical

The <ol> element with type="1" creates an ordered list with numbers.

Alphabetical Uppercase

The <ol> element with type="A" creates an ordered list with uppercase letters.

Alphabetical Lowercase

The <ol> element with type="a" creates an ordered list with lowercase letters.

Roman Numeral Uppercase

The <ol> element with type="I" creates an ordered list with uppercase Roman numerals.

Roman Numeral Lowercase

The <ol> element with type="i" creates an ordered list with lowercase Roman numerals.

Unordered List

Disc

The <ul> element with type="disc" uses filled circles as bullets.

Circle

The <ul> element with type="circle" uses hollow circles as bullets.

Square

The <ul> element with type="square" uses squares as bullets.

None

The <ul> element with type="none" removes bullet points.

Nested List

Nesting lists in HTML involves placing one list inside another, creating a hierarchical structure for organizing content. Both <ul> (unordered lists) and <ol> (ordered lists) can be nested by placing another <ul> or <ol> inside a <li> element. For example, a nested unordered list can appear as a sublist within an item of an ordered list. Developers can use CSS to style nested lists, adjusting margin, padding, or list-style-type for clear visual hierarchy. Nesting lists is commonly used for creating menus, outlines, or structured content with multiple levels of detail.

Horizontal Rule

The <hr> HTML element represents a thematic break or division in content, often displayed as a horizontal line. It is typically used to separate sections of a document or indicate a shift in topic. The <hr> element is a void element, meaning it does not require a closing tag. Developers can style the appearance of the <hr> using CSS properties like border, width, height, and background-color to customize its look and fit the design of the page.

Tables

The <table> HTML element is used to create tabular data structures, allowing developers to organize information into rows and columns. It works in conjunction with elements such as <tr> for table rows, <th> for table headers, and <td> for table data cells. Additional elements like <caption> provide table descriptions, and <thead>, <tbody>, and <tfoot> organize content into sections for better structure and styling. Developers can use CSS to style tables and JavaScript to enhance interactivity, such as sorting and filtering table data.

Table With Caption

Table Without Caption

Table Body Only

Address

The <address> HTML element represents contact information for the author or owner of a document or article. This can include details such as physical addresses, phone numbers, email addresses, and URLs. When placed within the <body>, it pertains to the entire document; within an <article>, it relates specifically to that article. Content inside the <address> element is typically rendered in italics, with browsers adding line breaks before and after the element. It's important to use <address> solely for contact information to maintain semantic accuracy.

Details

The <details> HTML element is used to create a disclosure widget that allows users to toggle visibility of additional content. It typically works alongside the <summary> element, which serves as a label or summary for the collapsible content. When clicked, the <summary> reveals or hides the content within the <details>. This element is useful for creating collapsible sections, FAQs, or hidden details in a webpage. By default, the content inside <details> is hidden until toggled open by the user. Developers can enhance its functionality and appearance with CSS and JavaScript for a more interactive experience.

Details with Plain Text Summary

Details with Button Summary

Code

HTML provides several elements for displaying code, keyboard input, and preformatted text in a meaningful and visually distinct way. The <code> element is used for inline code snippets, such as <div>code</div>. The <kbd> element represents user keyboard input, like Cmd. The <samp> element is used for sample output, such as This is sample output from a computer program.. For displaying blocks of preformatted text, the <pre> element preserves whitespace, line breaks, and formatting, allowing for easy representation of code blocks or structured text. These elements are essential for presenting code or computer-related content in a clear and semantically correct way.

P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

Inline Element

Inline elements in HTML are used to format and style parts of text or other content within a document without breaking the flow into a new line. They typically occupy only as much width as necessary, allowing content to flow naturally within its containing block. Examples of inline elements include <a> for links, <strong> and <em> for semantic emphasis, <abbr> for abbreviations, <mark> for highlighting, and <time> for temporal data. These elements are versatile for enhancing text with meaning, style, or interaction while maintaining the inline layout within their parent container.

HTML Comment

The <!-- --> syntax is used to create comments in HTML. Comments are ignored by the browser and do not appear on the rendered page, serving as notes or explanations for developers. They can be used to temporarily disable code or add annotations within the markup for better readability and collaboration. For example: <!-- This is a comment -->. Comments are a useful tool for documenting the structure and purpose of the HTML without affecting the user experience.

Media and Embedded Content

This section validates images, audio/video, canvas/SVG, and embedded document behavior.

Image

The <img> HTML element is used to embed images into a webpage. It includes attributes such as src to specify the image URL, alt to provide alternative text for accessibility and fallback, width, and height for sizing. The loading attribute can optimize performance by deferring the loading of offscreen images using lazy. Developers can enhance user experience by combining the <img> element with CSS for styling and JavaScript for interactivity, ensuring images are responsive and accessible across devices.

No <figure> element

Wrapped in a <figure> element, no <figcaption>

Wrapped in a <figure> element, with a <figcaption>

Background Image

The background-image CSS property allows developers to set an image as the background for an element. It supports various types of values, such as URLs to external images, gradients, or none to remove the background image. Additional properties like background-size, background-position, and background-repeat provide control over the image's scaling, alignment, and tiling behavior. Combining background-image with other background properties using background shorthand enables efficient styling for visually engaging designs.

Picture

The <picture> HTML element provides a container for multiple image sources, enabling developers to implement responsive images and art direction. It works with <source> elements that use attributes like media and srcset to define images for specific screen sizes or conditions. The fallback <img> element ensures compatibility with browsers that do not support the <picture> element or when no <source> matches. This setup optimizes loading and presentation by selecting the most appropriate image for the user’s device and context.

Resize the browser window to see other images. The image shown changes based on screen width:

• When the screen is at least 1200 pixels wide.
• When the screen is at least 1000 pixels wide.
• When the screen is at least 800 pixels wide.
• When the screen is at least 600 pixels wide.
• When the screen is at least 400 pixels wide.
• When the screen is less than 400 pixels wide.

Audio

The <audio> HTML element enables embedding audio content into a webpage, supporting formats like MP3, WAV, and Ogg. It includes attributes such as controls, autoplay, loop, and muted for customizing playback. Multiple source files can be specified using the <source> element for cross-browser compatibility. Developers can use JavaScript to control playback, create custom audio controls, and integrate additional features like visualizers or synchronized captions for an enhanced user experience.

Audio Without Loop

Audio With Loop

Video

The <video> HTML element is used to embed videos directly into a webpage, providing support for a variety of formats like MP4, WebM, and Ogg. It includes attributes such as controls, autoplay, loop, and muted for seamless playback customization. With the ability to define multiple source files using <source>, it ensures compatibility across different browsers. Developers can enhance user experience with JavaScript by controlling playback, creating custom controls, and integrating advanced features like captions and subtitles via the <track> element.

Canvas

The <canvas> HTML element is a versatile container for graphics and animations, allowing developers to draw shapes, images, text, and complex visual effects dynamically using JavaScript. Paired with the CanvasRenderingContext2D API or WebGL, it supports both 2D and 3D rendering. Commonly used for games, data visualizations, and interactive media, <canvas> provides a pixel-based drawing surface that scales flexibly to various screen sizes. Its lightweight nature and broad browser support make it a powerful tool for creating engaging and responsive web content.

This interactive canvas demo features dynamic bubbles that react to user input. Mouse hover or touch to create white lights that repel bubbles and altering their motion.

Meter

The <meter> HTML element represents a scalar value within a known range, often used to display measurements like progress, ratings, or usage levels. It includes attributes such as min, max, value, low, high, and optimum for precise customization and semantic meaning. Unlike the <progress> element, it is designed for measurements with meaningful ranges and thresholds. Developers can style the <meter> element with CSS or enhance its interactivity with JavaScript for more dynamic applications.

Progress

The <progress> HTML element is used to display the completion progress of a task, such as downloads, file transfers, or installations. It includes attributes like max and value to define the total and current progress. Unlike the <meter> element, it is designed for tasks with indeterminate or determinate progress. Developers can style the <progress> element with CSS or use JavaScript to dynamically update its value for real-time feedback to users.

Intermediate Progress

Determinate Progress

Inline SVG

The <svg> HTML element is a container for Scalable Vector Graphics, allowing developers to create resolution-independent shapes, paths, text, and images. It supports a variety of attributes such as viewBox, width, height, and fill for customizing appearance and behavior. The <svg> element integrates seamlessly with HTML and CSS and supports interactivity through JavaScript. It is ideal for creating icons, charts, animations, and other dynamic visualizations with crisp rendering across devices.

IFrame

The <iframe> HTML element embeds an external resource, such as another webpage or media, within the current document. It includes attributes like src for specifying the resource URL, width and height for size adjustments, and allow for controlling permissions like autoplay or fullscreen. The <iframe> element is versatile for embedding videos, maps, or interactive content, with optional sandboxing for enhanced security and controlled interactions.

Embed

The <embed> HTML element is used to embed external resources like multimedia, plugins, or interactive content into a webpage. It includes attributes such as src for specifying the resource URL and type for defining the media type. The <embed> element is versatile and does not provide fallback content but integrates seamlessly with various media and plugins, including PDFs, Flash, and custom applications.

The <embed> element is lightweight and straightforward, suitable for embedding content when fallback content is not necessary. However, if the embedded resource cannot load, it will not display any alternative content.

Embedded PDF Document

Object

The <object> HTML element embeds external resources, such as multimedia, PDFs, or even other webpages, into a document. It includes attributes like data for specifying the resource URL, type for declaring the content type, and width and height for size adjustments. Unlike the <embed> element, the <object> element allows for fallback content within its tags for unsupported environments, making it a flexible choice for embedding resources.

The <object> element is more versatile than <embed> because it supports fallback content for unsupported browsers. This makes it ideal for ensuring accessibility and providing alternative options if the embedded resource fails to load.

Embedded PDF Document using Object

YouTube Video

Embedding a YouTube video typically uses the <iframe> HTML element with attributes like src to specify the video URL, width and height for defining size, and allow for permissions such as autoplay or fullscreen. A typical YouTube embed URL looks like https://www.youtube.com/embed/<video_id>. Customization options can be added as query parameters, such as ?autoplay=1 or &mute=1, enabling enhanced user experiences and control over playback.

Forms and Inputs

This section demonstrates form controls, validation-oriented inputs, and interaction states.

The <form> HTML element is a container for user input, enabling data submission to a server. It includes attributes like action to define the target URL, method for the HTTP method (e.g., GET or POST), and enctype for encoding types. Inside the <form>, elements like <input>, <textarea>, and <button> are used to collect data. Developers can enhance form behavior with JavaScript for validation and interactivity.

Overflow and Scrollbars

This section validates horizontal, vertical, and two-axis overflow interactions.

The scrollbar in HTML refers to the visual element that allows users to scroll through overflow content in containers or the entire webpage. While scrollbars are typically controlled by the browser, developers can customize their appearance and behavior using CSS properties like overflow, scrollbar-width, and the ::-webkit-scrollbar pseudo-element for WebKit-based browsers. JavaScript can further enhance scroll interactions by handling events like scroll to trigger dynamic actions or animations. Scrollbars play a vital role in improving accessibility and user experience for content-heavy layouts.

X Scrollbar

Y Scrollbar

2D Scrollbar

References