HTML Examples (original) (raw)

Last Updated : 24 Jul, 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.

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 , , and . 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

html-structure

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
2 Strong Formatting with
3 Italic Formatting with
4 Emphasized Formatting with
5 Small Formatting with
6 Marked Formatting with
7 Deleted Text with
8 Inserted Text with
9 Subscript Formatting with
10 Superscript Formatting with

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

, <tr>, , and . 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 (
    ), **unordered lists (, and **definition lists (
    ). 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

    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 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

    **HTML Links, also known as **hyperlinks, are defined by the ****** 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 tag include **href, **title, and **target, among others.

    index.html `

    Page Title GeeksforGeeks

    `

    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

    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 tag is used to reference the title of a creative work like a book, article, or website, and 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
    2 Block Quotations with
    3 Author/Owner Information with
    4 Abbreviations and Acronyms with
    5 Work Title with
    6 Text Direction with

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

    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

    ,

    ,

    to

    , and