Complete HTML Elements Showcase

HTML5 Elements

Explore the wide range of HTML5 elements with practical examples and usage guidelines.

Text Elements

HTML provides semantic text elements to structure your content meaningfully.

Example Usage:

This is a bold text and this is italicized text.

You can also highlight important text or show ~~deleted content~~ and inserted content.

Chemical formula: H₂O and mathematical equation: x² + y² = z².

This is smaller text for disclaimers or fine print.

HTML is the standard markup language.

This is a short inline quotation.

Code Implementation:

<p>This is a <strong>bold text</strong> example.</p>
<p>This is an <em>italicized text</em> example.</p>
<p>This is <mark>highlighted text</mark>.</p>
<p>Chemical formula: H<sub>2</sub>O</p>
<p>Mathematical equation: x<sup>2</sup></p>

List Elements

HTML offers several types of lists to organize content effectively.

Unordered List:

List item one
List item two
List item three

Ordered List:

First item
Second item
Third item

Description List:

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
JavaScript: Programming language for the web

Code Implementation:

<ul>
  <li>Unordered list item</li>
</ul>

<ol>
  <li>Ordered list item</li>
</ol>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

Table Elements

Tables are used to display tabular data in a structured format.

Example Table:

Name	Email	Role	Status
John Doe	john@example.com	Admin	Active
Jane Smith	jane@example.com	User	Inactive
Bob Johnson	bob@example.com	Editor	Active
3 users total

Code Implementation:

<table>
  <thead>
    <tr>
      <th>Column Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Table Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Footer Content</td>
    </tr>
  </tfoot>
</table>

Media Elements

HTML5 provides native support for various media types including images, audio, and video.

Images & Figures

Sample Image 1 — This is a sample image with a caption

Sample Image 2 — Another sample image with caption

Code Implementation:

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Image caption</figcaption>
</figure>

Video Elements

HTML5 provides native video support with the <video> element.

Sample Video: Big Buck Bunny

Autoplaying Muted Video: Elephants Dream

Code Implementation:

<video controls width="640" height="360">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Audio Elements

HTML5 provides native audio support with the <audio> element.

Sample Audio: SoundHelix Song 1

Sample Audio: SoundHelix Song 2

Code Implementation:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Embedded Content

HTML allows embedding external content using <iframe> and other elements.

Code Implementation:

<iframe 
  src="https://example.com" 
  width="800" 
  height="600" 
  title="Example Website">
</iframe>

UI Components

Common UI components built with HTML and CSS for modern web interfaces.

Alert Components

Alert messages provide feedback to users about important actions or states.

Success! Your action was completed successfully.

Warning! Please check your input and try again.

Error! Something went wrong with your request.

Info! Here's some important information for you.

Code Implementation:

<div class="alert alert-success">
  <i class="fas fa-check-circle"></i>
  <span>Success message here</span>
</div>

Progress Indicators

Progress bars visually represent the completion status of a task or process.

HTML 90%

CSS 85%

JavaScript 75%

Code Implementation:

<div class="progress-container">
  <div class="progress-label">
    <span>Label</span>
    <span>75%</span>
  </div>
  <div class="progress-bar">
    <div class="progress" style="width: 75%"></div>
  </div>
</div>

Card Components

Cards are flexible containers for displaying content in a structured way.

Featured Card

This is an example of a card component with different styling. Cards are perfect for displaying related content in a compact format.

Code Implementation:

<div class="card">
  <div class="card-header">
    <i class="fas fa-icon"></i>
    <h3>Card Title</h3>
  </div>
  <p>Card content goes here.</p>
  <button>Action Button</button>
</div>

Details & Summary

The <details> and <summary> elements create interactive disclosure widgets.

What is HTML?

HTML (HyperText Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML.

What is JavaScript?

JavaScript is a programming language that enables interactive web pages and is an essential part of web applications.

Code Implementation:

<details>
  <summary>Click to expand</summary>
  <p>Hidden content that appears when expanded.</p>
</details>

Complete HTML Elements Showcase

HTML5 Elements

Text Elements

Example Usage:

Code Implementation:

List Elements

Unordered List:

Ordered List:

Description List:

Code Implementation:

Table Elements

Example Table:

Code Implementation:

Media Elements

Images & Figures

Code Implementation:

Video Elements

Code Implementation:

Audio Elements

Code Implementation:

Embedded Content

Code Implementation:

Form Elements

Interactive Form Example

Form Best Practices:

UI Components

Alert Components

Code Implementation:

Progress Indicators

Code Implementation:

Card Components

Featured Card

Code Implementation:

Details & Summary

Code Implementation:

HTML Resources

Learning Resources

MDN Web Docs

W3Schools

FreeCodeCamp