HTML Kitchen Sink

A complete example of all HTML elements grouped by category for demonstration purposes.

This section showcases various HTML elements to demonstrate their appearance and usage in a web document. It includes headings, paragraphs, lists, links, tables, forms, buttons, and more.

Feel free to explore and use these examples as a reference for your own projects.

Typography

Main Title: Exploring the Universe

Section Title: The Solar System

Subsection: Planetary Orbits

Topic: Kepler's Laws

Detail: Law of Ellipses

Note: Applies to All Planets

This is a paragraph demonstrating standard text formatting. Typography plays a crucial role in ensuring readability and structure in web design. Good typography helps convey information effectively.

Emphasized text highlights important information, such as italicized keywords.

Strong text is used for urgency, such as critical warnings.

Small text is often used for disclaimers or footnotes.

Marked text is used to highlight key data or notes.

Deleted text indicates content that is no longer relevant, such as outdated information.

Inserted text shows new additions to content, like updated figures.

_{Subscript text is used for scientific notations, like H2O.}

^{Superscript text is often used for exponents, such as E = mc2.}

HTML is the standard markup language for creating web pages.

The Theory of Everything by Stephen Hawking is a fascinating book.

To be, or not to be, that is the question. - William Shakespeare

Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.

Lists

Unordered List

• Plan a vacation
• Buy groceries
  • Milk
  • Bread
  • Eggs
• Read a new book

Ordered List

1. Sign up for a gym membership
2. Complete a workout routine
   1. Warm-up exercises
   2. Strength training
   3. Cool-down stretches
3. Track progress weekly

Definition List

JavaScript

A high-level, just-in-time compiled programming language commonly used in web development.

API

Application Programming Interface, a set of rules that allows one piece of software to interact with another.

UX

User Experience, focusing on the overall feel and efficiency of a product for the user.

Task List

• Complete project documentation
• Review pull requests
• Schedule team meeting

Links

Here are some examples of links with various use cases:

• Visit Google - A link to an external website.
• About Us - A relative link to an internal page.
• Jump to Typography Section - An anchor link to a section on the same page.
• Email Us - A link to send an email.
• Call Us - A link to initiate a phone call.
• Download PDF - A link to download a file.

Here are some styled links:

• Styled External Link
• Styled Internal Link

Tables

Here is a sample table displaying product details:

Styled for clarity, showing a variety of data types in a structured format.

Forms

Buttons

Examples of buttons with different styles and purposes:

Examples of interactive buttons:

Miscellaneous

Blockquote

"The only limit to our realization of tomorrow is our doubts of today." – Franklin D. Roosevelt

Caption: A famous inspirational quote.

Code Snippet

Example of inline code:

Example of block code:

        function greet() {
            console.log("Hello, World!");
        }
        greet();
    

Progress Indicator

File upload progress:

40% completed.

Meter

Battery Level:

Caption: Battery is at 80% capacity.