HTML Examples
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.
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.
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.
<!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.
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 |
