HTML Examples

Last Updated : 05 May, 2025

HTML (HyperText Markup Language) is the backbone of the web, forming the structural foundation of every website. Whether you're just starting out or you're an experienced developer in need of a quick refresher, learning through examples is one of the most effective ways to understand HTML in action.

In this article, we've organized all the essential HTML concepts and paired them with clear, practical examples to help you see exactly how each element works in real-world scenarios.

HTML Examples

Note: If you want to learn HTML Concepts then check out HTML Tutorials.

1. Basic HTML Tags and Structure

Html defines the structure of the webpage. It uses a system of tags to define elements like headings, paragraphs, links, images, and more. Every HTML document starts with a basic structure that includes tags like <html>, <head>, and <body>. Inside the <body>, common tags such as <h1> to <h6> define headings, <p> defines paragraphs, and <a> is used for hyperlinks. Understanding these basic tags is the first step to building web pages.

HTML Basic Structure

S.No	Topic Name
1	HTML Document Structure
2	HTML Headings
3	HTML Paragraphs
4	HTML Links
5	HTML Images
6	HTML Buttons
7	HTML Lists

2. HTML Attributes

HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element’s behavior, appearance, or functionality in a variety of ways.

Each attribute has a name and a value, formatted as name=”value”. Attributes tell the browser how to render the element or how it should behave during user interactions.

S.No	Topic Name
1	The `title` Attribute
2	The `href` Attribute
3	The `width` and `height` Attributes
4	The `alt` Attribute
5	Attribute Syntax and Usage

3. HTML Text Formatting

HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through.

S.No	Topic Name
1	Bold Formatting with `<b>`
2	Strong Formatting with `<strong>`
3	Italic Formatting with `<i>`
4	Emphasized Formatting with `<em>`
5	Small Formatting with `<small>`
6	Marked Formatting with `<mark>`
7	Deleted Text with `<del>`
8	Inserted Text with `<ins>`
9	Subscript Formatting with `<sub>`
10	Superscript Formatting with `<sup>`

4. HTML Lists and Tables

HTML Tables and Lists are essential tools for organizing and presenting content on a webpage. Tables are used to display data in rows and columns using tags like <table>, <tr>, <td>, and <th>. They're ideal for structured information such as schedules, comparisons, or reports. On the other hand, lists help display grouped items and come in three main types: ordered lists (<ol>), unordered lists (<ul>), and definition lists (<dl>). Understanding how to use tables and lists allows for better content formatting and improves the clarity of web pages.

S.No	Topic Name
1	Unordered Lists with Different Bullets
2	Ordered Lists with Different Markers
3	Description Lists
4	Nested Lists
5	Basic Tables
6	Table Borders and Collapsed Borders
7	Cell Padding and Spacing
8	Table Headings and Captions
9	Merging Cells
10	Styling Tables with `id` and `class`

5. HTML Multimedia

Multimedia comes in many different formats. It can be almost anything you can hear or see, like images, music, sound, videos, records, films, animations, and more.

Web pages often contain multimedia elements of different types and formats.

S.No	Topic Name
1	Embedding Videos
2	Embedding Audio
3	Using the `<iframe>` Element

6. Styling with HTML and CSS

To style the webpage with HTML and CSS is the process of enhancing the appearance of web pages by controlling layout, colors, fonts, spacing, and more. While HTML is used to structure the content, CSS (Cascading Style Sheets) is used to style and design that content. CSS can be applied directly within HTML elements (inline), inside a <style> block (internal), or through an external stylesheet. By separating content from design, CSS makes web development more flexible, efficient, and visually engaging.

S.No	Topic Name
1	Inline CSS
2	Internal CSS
3	External CSS
4	CSS Fonts
5	Styling with `id` and `class` Attributes
6	Borders, Padding, and Margin

7. HTML Links

HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for “anchor.” These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page.

The basic attributes of the <a> tag include href, title, and target, among others.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<a href="https://www.geeksforgeeks.org" target="_blank">GeeksforGeeks</a>
</body> 
</html>

S.No	Topic Name
1	Absolute URLs
2	Relative URLs
3	Changing Link Colors
4	Removing Underline from Links
5	Changing Link Targets
6	Images as Links
7	Bookmark Links
8	Mailto Links

8. HTML Forms

HTML Forms use the <form> tag to collect user input through various interactive controls. These controls range from text fields, numeric inputs, and email fields to password fields, checkboxes, radio buttons, and submit buttons.

S.No	Topic Name
1	Form Structure and Elements
2	Input Types and Attributes
3	Form Validation
4	Grouping Form Data

9. HTML Quotations and Citations

HTML Quotations and Citations are used to add references, quotes, and attributions in a web page, helping to give proper context and credit to sources. Tags like <blockquote> are used for long quotations, often displayed as indented blocks, while <q> is used for short inline quotes. The <cite> tag is used to reference the title of a creative work like a book, article, or website, and <abbr> defines abbreviations. These elements not only improve readability but also enhance the semantic meaning of your content.

S.No	Topic Name
1	Short Quotations with `<q>`
2	Block Quotations with `<blockquote>`
3	Author/Owner Information with `<address>`
4	Abbreviations and Acronyms with `<abbr>`
5	Work Title with `<cite>`
6	Text Direction with `<bdo>`

10. HTML Comments

HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser.

They are useful for documenting the code, making it easier to understand and maintain.
To add a comment, use the syntax <!– your comment here –>.

S.No	Topic Name
1	Adding Comments in HTML
2	Conditional Comments
3	Comments for Debugging

11. HTML Block and Inline Elements

HTML Block elements, are used to structure the main content of a webpage. They typically start on a new line and take up the full width of their container examples <div>, <p>, <h1> to <h6>, and <ul>, etc.

On the other hand, Inline elements are used within block-level elements to style or format specific parts of the content. They don’t start on a new line and only take up as much width as necessary for example include <span>, <a>, <strong>, and <em>.

S.No	Topic Name
1	The `<div>` Element
2	The `<span>` Element
3	Styling `<div>` and `<span>` Elements

12. Advanced Features

HTML5 offers powerful advanced features that enhance web development. Semantic elements improve content structure and meaning. Canvas and SVG enable drawing and graphics directly in the browser. It also adds better support for multimedia and introduces smarter, more flexible form controls.

S.No	Topic Name
1	HTML5 Semantic Elements
2	Graphics with `<canvas>` and SVG
3	Multimedia Elements in HTML5
4	Forms Enhancements

Additional Resources:

Recent articles on HTML
HTML Output & Multiple Choice Questions

Difference between HTML and CSS

kartik

Improve

Article Tags :

HTML Examples

1. Basic HTML Tags and Structure

HTML Basic Structure

2. HTML Attributes

3. HTML Text Formatting

4. HTML Lists and Tables

5. HTML Multimedia

6. Styling with HTML and CSS

7. HTML Links

8. HTML Forms

9. HTML Quotations and Citations

10. HTML Comments

11. HTML Block and Inline Elements

12. Advanced Features

Additional Resources:

Similar Reads

HTML Basic Examples

HTML Structural Examples

HTML Hyperlinks Examples

HTML Table Examples

HTML Form Examples

HTML Frame Examples

HTML Media Based

HTML Questions

Thank You!

What kind of Experience do you want to share?