HTML IN MY STYLE

The <a> tag defines a hyperlink.

PROGRAM (a tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Link Example</title>
    </head>
    <body>
        <a href="https://www.example.com">Visit Example Website</a>
    </body>
</html>

OUTPUT:

Visit Example Website

The <abbr> tag defines an abbreviation or acronym.

PROGRAM (abbr tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Abbreviation Example</title>
    </head>
    <body>
        <p>The <abbr title="World Health Organization">WHO</abbr> 
           was founded in 1948.</p>
    </body>
</html>

OUTPUT:

The WHO was founded in 1948.

The <address> tag defines contact information for the author/owner of a document.

PROGRAM (address tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Address Example</title>
    </head>
    <body>
        <address>
            Written by BLANK<br>
            Visit us at:<br>
            Example.com<br>
            Box 69, SYDNEY<br>
            UK
        </address>
    </body>
</html>

OUTPUT:

Written by BLANK
Visit us at:
Example.com
Box 69, SYDNEY
UK

The <article> tag specifies independent, self-contained content.

PROGRAM (article tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Article Example</title>
    </head>
    <body>
        <article>
            <h2>Article Title</h2>
            <p>This is the content of the article.</p>
            <p>Published on December 28, 2024</p>
        </article>
    </body>
</html>

OUTPUT:

Article Title

This is the content of the article.

Published on December 28, 2024

The <aside> tag defines content aside from the page content.

PROGRAM (aside tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Aside Example</title>
    </head>
    <body>
        <p>Main content here.</p>
        <aside>
            <h4>Sidebar</h4>
            <p>This is additional information.</p>
        </aside>
    </body>
</html>

OUTPUT:

Main content here.

The <audio> tag defines sound content.

PROGRAM (audio tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Audio Example</title>
    </head>
    <body>
        <audio controls>
            <source src="audio.mp3" type="audio/mpeg">
            <source src="audio.ogg" type="audio/ogg">
            Your browser does not support the audio element.
        </audio>
    </body>
</html>

OUTPUT:

[Audio Player Would Appear Here]

The <b> tag specifies bold text.

PROGRAM (b tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Bold Text Example</title>
    </head>
    <body>
        <p>This is <b>bold text</b>.</p>
    </body>
</html>

OUTPUT:

This is bold text.

The <base> tag specifies the base URL for all relative URLs in a document.

PROGRAM (base tag):

<!DOCTYPE html>
<html>
    <head>
        <base href="https://www.example.com/images/">
        <title>Base Example</title>
    </head>
    <body>
        <img src="picture.jpg" alt="My Picture">
        <!-- Will look for picture at https://www.example.com/images/picture.jpg -->
    </body>
</html>

OUTPUT:

Base tag affects relative URLs in the document
(No visible output - affects URL resolution)

The <bdi> tag isolates text that might be formatted in a different direction.

PROGRAM (bdi tag):

<!DOCTYPE html>
<html>
    <head>
        <title>BDI Example</title>
    </head>
    <body>
        <p>User <bdi>Joe</bdi>: 90 points</p>
        <p>User <bdi>John</bdi>: 80 points</p>
    </body>
</html>

OUTPUT:

User joe: 90 points

User John: 80 points

The <bdo> tag overrides the current text direction.

PROGRAM (bdo tag):

<!DOCTYPE html>
<html>
    <head>
        <title>BDO Example</title>
    </head>
    <body>
        <p>Normal text</p>
        <p><bdo dir="rtl">This text will go right to left</bdo></p>
    </body>
</html>

OUTPUT:

Normal text

This text will go right to left

The <blockquote> tag specifies a section that is quoted from another source.

PROGRAM (blockquote tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Blockquote Example</title>
    </head>
    <body>
        <blockquote cite="http://www.example.com">
            This is a long quotation that needs to be set apart from other content.
        </blockquote>
    </body>
</html>

OUTPUT:

This is a long quotation that needs to be set apart from other content.

The <button> tag defines a clickable button.

PROGRAM (button tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Button Example</title>
    </head>
    <body>
        <button type="button">Click Me!</button>
        <button type="submit">Submit</button>
        <button type="reset">Reset</button>
    </body>
</html>

OUTPUT:

The <canvas> tag is used to draw graphics via JavaScript.

PROGRAM (canvas tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Canvas Example</title>
    </head>
    <body>
        <canvas id="myCanvas" width="200" height="100" 
                style="border:1px solid #000;">
            Your browser does not support the canvas element.
        </canvas>
        <script>
            var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(10, 10, 150, 75);
        </script>
    </body>
</html>

OUTPUT:

The <cite> tag defines the title of a creative work.

PROGRAM (cite tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Cite Example</title>
    </head>
    <body>
        <p>My favorite book is 
           <cite>The Great Gatsby</cite> 
           by F. Scott Fitzgerald.</p>
    </body>
</html>

OUTPUT:

My favorite book is The Great Gatsby by F. Scott Fitzgerald.

The <code> tag defines a piece of computer code.

PROGRAM (code tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Code Example</title>
    </head>
    <body>
        <p>The <code>print()</code> function outputs text.</p>
        <code>
            x = 5;
            y = 6;
            z = x + y;
        </code>
    </body>
</html>

OUTPUT:

The print() function outputs text.

x = 5; y = 6; z = x + y;

The <data> tag links content with a machine-readable translation.

PROGRAM (data tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Data Example</title>
    </head>
    <body>
        <p>New Products:</p>
        <ul>
            <li><data value="398">Mini Dress</data></li>
            <li><data value="399">Maxi Dress</data></li>
        </ul>
    </body>
</html>

OUTPUT:

New Products:

  • Mini Dress
  • Maxi Dress

The <datalist> tag specifies a list of pre-defined options for an input element.

PROGRAM (datalist tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Datalist Example</title>
    </head>
    <body>
        <label for="browser">Choose your browser:</label>
        <input list="browsers" id="browser" name="browser">
        
        <datalist id="browsers">
            <option value="Chrome">
            <option value="Firefox">
            <option value="Safari">
            <option value="Edge">
            <option value="Opera">
        </datalist>
    </body>
</html>

OUTPUT:

The <del> tag defines text that has been deleted from a document.

PROGRAM (del tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Deleted Text Example</title>
    </head>
    <body>
        <p>My favorite color is <del>blue</del> red.</p>
        <p>Price: <del>USD 50</del> USD 40</p>
    </body>
</html>

OUTPUT:

My favorite color is blue red.

Price: USD 50 USD 40

The <details> tag creates an interactive widget that can be opened or closed.

PROGRAM (details tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Details Example</title>
    </head>
    <body>
        <details>
            <summary>Click to view more information</summary>
            <p>This is additional information that can be 
               hidden or shown.</p>
        </details>
    </body>
</html>

OUTPUT:

Click to view more information

This is additional information that can be hidden or shown.

The <dfn> tag represents a defining instance of a term.

PROGRAM (dfn tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Definition Example</title>
    </head>
    <body>
        <p>
            A <dfn>variable</dfn> is a container for 
            storing data values.
        </p>
        
        <p>
            <dfn title="HyperText Markup Language">HTML</dfn> 
            is the standard markup language for creating web pages.
        </p>
    </body>
</html>

OUTPUT:

A variable is a container for storing data values.

HTML is the standard markup language for creating web pages.

The <dialog> tag defines a dialog box or window.

PROGRAM (dialog tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Dialog Example</title>
    </head>
    <body>
        <dialog open>
            <p>This is an open dialog window</p>
            <button>Close</button>
        </dialog>
    </body>
</html>

OUTPUT:

This is an open dialog window

The <div> tag defines a division or section in an HTML document.

PROGRAM (div tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Div Example</title>
        <style>
            .myDiv {
                border: 2px solid blue;
                padding: 10px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="myDiv">
            <h2>This is a heading in a div</h2>
            <p>This is some text in a div.</p>
        </div>
    </body>
</html>

OUTPUT:

This is a heading in a div

This is some text in a div.

The <em> tag defines emphasized text.

PROGRAM (em tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Emphasis Example</title>
    </head>
    <body>
        <p>This is <em>very</em> important text.</p>
        <p>Please <em>do not</em> forget to submit.</p>
    </body>
</html>

OUTPUT:

This is very important text.

Please do not forget to submit.

The <embed> tag defines a container for external content or plugin.

PROGRAM (embed tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Embed Example</title>
    </head>
    <body>
        <embed 
            src="example.pdf" 
            type="application/pdf"
            width="300"
            height="200">
    </body>
</html>

OUTPUT:

[Embedded PDF would appear here]

The <fieldset> tag groups related form elements.

PROGRAM (fieldset tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Fieldset Example</title>
    </head>
    <body>
        <form>
            <fieldset>
                <legend>Personal Information</legend>
                <label for="name">Name:</label>
                <input type="text" id="name"><br>
                <label for="email">Email:</label>
                <input type="email" id="email">
            </fieldset>
        </form>
    </body>
</html>

OUTPUT:

Personal Information

The <figure> tag specifies self-contained content, like illustrations, diagrams, photos, etc.

PROGRAM (figure tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Figure Example</title>
    </head>
    <body>
        <figure>
            <img src="image.jpg" alt="Sample Image">
            <figcaption>Fig.1 - Sample Image Description</figcaption>
        </figure>
    </body>
</html>

OUTPUT:

[Image]
Fig.1 - Sample Image Description

The <form> tag creates an HTML form for user input.

PROGRAM (form tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Form Example</title>
    </head>
    <body>
        <form action="/submit" method="post">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username"><br>
            
            <label for="password">Password:</label>
            <input type="password" id="password" name="password"><br>
            
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

OUTPUT:

The <hr> tag creates a horizontal line to divide content.

PROGRAM (hr tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Horizontal Rule Example</title>
    </head>
    <body>
        <p>Text above the line</p>
        <hr>
        <p>Text below the line</p>
    </body>
</html>

OUTPUT:

Text above the line

Text below the line

The <i> tag defines text in an alternate voice or mood.

PROGRAM (i tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Italic Text Example</title>
    </head>
    <body>
        <p>Normal text and <i>italic text</i>.</p>
        <p><i>Technical terms</i> are often italicized.</p>
    </body>
</html>

OUTPUT:

Normal text and italic text.

Technical terms are often italicized.

The <iframe> tag defines an inline frame for embedding another document.

PROGRAM (iframe tag):

<!DOCTYPE html>
<html>
    <head>
        <title>IFrame Example</title>
    </head>
    <body>
        <iframe 
            src="https://www.example.com" 
            width="300" 
            height="200" 
            title="Example Website">
        </iframe>
    </body>
</html>

OUTPUT:

[Embedded content would appear here]

The <img> tag embeds an image in the document.

PROGRAM (img tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Image Example</title>
    </head>
    <body>
        <img 
            src="example.jpg" 
            alt="Example Image"
            width="300"
            height="200">
        
        <img 
            src="responsive.jpg" 
            alt="Responsive Image"
            style="max-width: 100%; height: auto;">
    </body>
</html>

OUTPUT:

[Fixed Size Image]
[Responsive Image]

The <input> tag specifies an input field where the user can enter data.

PROGRAM (input tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Input Example</title>
    </head>
    <body>
        <form>
            <input type="text" placeholder="Text input"><br>
            <input type="password" placeholder="Password"><br>
            <input type="checkbox"> Checkbox<br>
            <input type="radio" name="option"> Radio<br>
            <input type="date"><br>
            <input type="color"><br>
            <input type="submit" value="Submit">
        </form>
    </body>
</html>

OUTPUT:



Checkbox
Radio


The <ins> tag defines text that has been inserted into a document.

PROGRAM (ins tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Insert Example</title>
    </head>
    <body>
        <p>
            My favorite color is <del>blue</del> 
            <ins>green</ins>.
        </p>
        
        <p>
            Price: <del>USD 50</del> 
            <ins datetime="2024-12-29">USD 45</ins>
        </p>
    </body>
</html>

OUTPUT:

My favorite color is blue green.

Price: USD 50 USD 45

The <kbd> tag defines keyboard input.

PROGRAM (kbd tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Keyboard Input Example</title>
        <style>
            kbd {
                background-color: #eee;
                border-radius: 3px;
                border: 1px solid #b4b4b4;
                padding: 2px 4px;
                font-family: monospace;
            }
        </style>
    </head>
    <body>
        <p>Save: Press <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
        <p>Undo: Press <kbd>Ctrl</kbd> + <kbd>Z</kbd></p>
        <p>To exit, press <kbd>Alt</kbd> + <kbd>F4</kbd></p>
    </body>
</html>

OUTPUT:

Save: Press Ctrl + S

Undo: Press Ctrl + Z

To exit, press Alt + F4

The <label> tag defines a label for form elements.

PROGRAM (label tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Label Example</title>
    </head>
    <body>
        <form>
            <label for="username">Username:</label>
            <input type="text" id="username"><br>
            
            <label>
                <input type="checkbox"> Remember me
            </label>
        </form>
    </body>
</html>

OUTPUT:

The <legend> tag defines a caption for a <fieldset> element.

PROGRAM (legend tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Legend Example</title>
    </head>
    <body>
        <fieldset>
            <legend>User Details</legend>
            <label for="name">Name:</label>
            <input type="text" id="name"><br>
            <label for="age">Age:</label>
            <input type="number" id="age">
        </fieldset>
    </body>
</html>

OUTPUT:

User Details

The <main> tag specifies the main content of a document.

PROGRAM (main tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Main Example</title>
    </head>
    <body>
        <header>Header content</header>
        <main>
            <h1>Main Content</h1>
            <p>This is the main content area of the page.</p>
        </main>
        <footer>Footer content</footer>
    </body>
</html>

OUTPUT:

Header content

Main Content

This is the main content area of the page.

Footer content

The <map> tag defines an image map with clickable areas.

PROGRAM (map tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Map Example</title>
    </head>
    <body>
        <img src="workplace.jpg" alt="Workplace" 
             usemap="#workmap" width="400" height="300">

        <map name="workmap">
            <area shape="rect" coords="34,44,270,350" 
                  alt="Computer" href="computer.htm">
            <area shape="circle" coords="337,300,44" 
                  alt="Coffee" href="coffee.htm">
        </map>
    </body>
</html>

OUTPUT:

[Image with clickable areas would appear here]

The <mark> tag defines text that should be highlighted.

PROGRAM (mark tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Mark Example</title>
    </head>
    <body>
        <p>This is <mark>highlighted</mark> text.</p>
        <p>Search results: The word 
           <mark>example</mark> was found.</p>
    </body>
</html>

OUTPUT:

This is highlighted text.

Search results: The word example was found.

The <meta> tag provides metadata about the HTML document.

PROGRAM (meta tag):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="Example page">
        <meta name="keywords" content="HTML, CSS, JavaScript">
        <meta name="viewport" 
              content="width=device-width, initial-scale=1.0">
        <title>Meta Example</title>
    </head>
    <body>
        <p>Meta tags are not visible in the page content.</p>
    </body>
</html>

OUTPUT:

Meta tags are not visible in the page content.
(They provide information to browsers and search engines)

The <meter> tag defines a scalar measurement within a known range.

PROGRAM (meter tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Meter Example</title>
    </head>
    <body>
        <p>
            Disk usage: <meter value="0.6">60%</meter>
        </p>
        <p>
            Progress: <meter value="0.8" min="0" max="1">
                80%
            </meter>
        </p>
        <p>
            Temperature: <meter value="28" min="0" max="100" 
                               low="20" high="80" optimum="25">
                28 degrees
            </meter>
        </p>
    </body>
</html>

OUTPUT:

Disk usage: 60%

Progress: 80%

Temperature: 28 degrees

The <noscript> tag defines alternate content for users who have disabled JavaScript.

PROGRAM (noscript tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Noscript Example</title>
    </head>
    <body>
        <script>
            document.write("JavaScript is enabled");
        </script>
        <noscript>
            Your browser does not support JavaScript!
        </noscript>
    </body>
</html>

OUTPUT:

JavaScript is enabled
(Noscript content would show if JavaScript was disabled)

The <object> tag defines an embedded object within an HTML document.

PROGRAM (object tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Object Example</title>
    </head>
    <body>
        <object
            data="example.pdf"
            type="application/pdf"
            width="300"
            height="200">
            <p>Unable to display PDF file.</p>
        </object>
        
        <object
            data="sample.svg"
            type="image/svg+xml"
            width="300"
            height="200">
            <p>Unable to display SVG file.</p>
        </object>
    </body>
</html>

OUTPUT:

[PDF Object Would Appear Here]
[SVG Object Would Appear Here]

The <ol> tag defines an ordered list.

PROGRAM (ol tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Ordered List Example</title>
    </head>
    <body>
        <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
        </ol>
        
        <ol type="A">
            <li>Item A</li>
            <li>Item B</li>
            <li>Item C</li>
        </ol>
    </body>
</html>

OUTPUT:

  1. First item
  2. Second item
  3. Third item
  1. Item A
  2. Item B
  3. Item C

The <optgroup> tag groups related options in a select list.

PROGRAM (optgroup tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Option Group Example</title>
    </head>
    <body>
        <select>
            <optgroup label="European Cars">
                <option value="volvo">Volvo</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
            </optgroup>
            <optgroup label="Asian Cars">
                <option value="toyota">Toyota</option>
                <option value="honda">Honda</option>
                <option value="nissan">Nissan</option>
            </optgroup>
        </select>
    </body>
</html>

OUTPUT:

The <output> tag represents the result of a calculation or user action.

PROGRAM (output tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Output Example</title>
    </head>
    <body>
        <form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
            <input type="number" id="a" value="0"> +
            <input type="number" id="b" value="0"> =
            <output name="result" for="a b">0</output>
        </form>
    </body>
</html>

OUTPUT:

+ = 0

The <p> tag defines a paragraph.

PROGRAM (p tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Paragraph Example</title>
        <style>
            .highlight { background-color: yellow; }
        </style>
    </head>
    <body>
        <p>This is a simple paragraph.</p>
        <p class="highlight">
            This is a highlighted paragraph with some 
            important information.
        </p>
        <p>
            Paragraphs can contain multiple lines
            and they maintain proper spacing.
        </p>
    </body>
</html>

OUTPUT:

This is a simple paragraph.

This is a highlighted paragraph with some important information.

Paragraphs can contain multiple lines
and they maintain proper spacing.

The <param> tag defines parameters for plugins embedded with an object element.

PROGRAM (param tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Parameter Example</title>
    </head>
    <body>
        <object data="movie.swf">
            <param name="autoplay" value="true">
            <param name="loop" value="false">
            <param name="quality" value="high">
            Your browser doesn't support this object.
        </object>
        
        <object data="video.mp4">
            <param name="controller" value="true">
            <param name="autostart" value="false">
            Alternative content
        </object>
    </body>
</html>

OUTPUT:

[Object with parameters would appear here]
[Video object with parameters would appear here]

The <picture> tag gives web developers more flexibility in specifying image resources.

PROGRAM (picture tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Picture Example</title>
    </head>
    <body>
        <picture>
            <source media="(min-width: 650px)" 
                    srcset="img_large.jpg">
            <source media="(min-width: 465px)" 
                    srcset="img_small.jpg">
            <img src="img_default.jpg" 
                 alt="Default Image" 
                 style="width:auto;">
        </picture>
    </body>
</html>

OUTPUT:

[Responsive Image Would Display Here]

The <pre> tag defines preformatted text.

PROGRAM (pre tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Pre Example</title>
    </head>
    <body>
        <pre>
    This text
        maintains its
            formatting
                and spaces.

    function example() {
        console.log("Hello");
    }
        </pre>
    </body>
</html>

OUTPUT:

    This text
        maintains its
            formatting
                and spaces.

    function example() {
        console.log("Hello");
    }

The <progress> tag represents the progress of a task.

PROGRAM (progress tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Progress Example</title>
    </head>
    <body>
        <label for="task">Task progress:</label>
        <progress id="task" value="70" max="100">
            70%
        </progress>
        
        <br><br>
        
        <label for="download">Download progress:</label>
        <progress id="download" value="0.3">
            30%
        </progress>
    </body>
</html>

OUTPUT:

70%
30%

The <q> tag defines a short quotation.

PROGRAM (q tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Quote Example</title>
    </head>
    <body>
        <p>The professor said: 
           <q>Learning HTML is fun!</q></p>
        <p>According to Mozilla: 
           <q cite="https://www.mozilla.org/">
           The Web is amazing!</q>
        </p>
    </body>
</html>

OUTPUT:

The professor said: Learning HTML is fun!

According to Mozilla: The Web is amazing!

The <ruby> tag specifies a ruby annotation (for East Asian typography).

PROGRAM (ruby tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Ruby Example</title>
    </head>
    <body>
        <ruby>
            漢 <rt>かん</rt>
            字 <rt>じ</rt>
        </ruby>
        
        <ruby>
            明日 <rt>あした</rt>
        </ruby>
    </body>
</html>

OUTPUT:

漢 かん 字 じ
明日 あした

The <samp> tag defines sample output from a computer program.

PROGRAM (samp tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Sample Output Example</title>
    </head>
    <body>
        <p>Message from computer:</p>
        <samp>
            File not found.<br>
            Press F1 to continue<br>
            Press CTRL+ALT+DEL to restart
        </samp>
    </body>
</html>

OUTPUT:

Message from computer:

File not found.
Press F1 to continue
Press CTRL+ALT+DEL to restart

The <script> tag is used to embed a client-side script (JavaScript).

PROGRAM (script tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Script Example</title>
    </head>
    <body>
        <button onclick="showMessage()">Click me</button>
        
        <script>
            function showMessage() {
                alert("Hello, World!");
            }
        </script>
        
        <!-- External Script -->
        <script src="external.js"></script>
    </body>
</html>

OUTPUT:

The <section> tag defines a section in a document.

PROGRAM (section tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Section Example</title>
    </head>
    <body>
        <section>
            <h2>Introduction</h2>
            <p>This is the introduction section.</p>
        </section>
        
        <section>
            <h2>Main Content</h2>
            <p>This is the main content section.</p>
        </section>
    </body>
</html>

OUTPUT:

Introduction

This is the introduction section.

Main Content

This is the main content section.

The <select> tag creates a drop-down list.

PROGRAM (select tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Select Example</title>
    </head>
    <body>
        <label for="cars">Choose a car:</label>
        <select id="cars" name="cars">
            <option value="volvo">Volvo</option>
            <option value="saab">Saab</option>
            <option value="mercedes">Mercedes</option>
            <option value="audi">Audi</option>
        </select>
        
        <br><br>
        
        <label for="colors">Choose colors (multiple):</label>
        <select id="colors" name="colors" multiple>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </body>
</html>

OUTPUT:

The <small> tag defines smaller text.

PROGRAM (small tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Small Text Example</title>
    </head>
    <body>
        <p>This is normal text.</p>
        <p><small>This is smaller text.</small></p>
        <p>Copyright <small>© 2024</small></p>
    </body>
</html>

OUTPUT:

This is normal text.

This is smaller text.

Copyright © 2024

The <source> tag specifies multiple media resources for media elements.

PROGRAM (source tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Source Example</title>
    </head>
    <body>
        <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        
        <audio controls>
            <source src="audio.mp3" type="audio/mpeg">
            <source src="audio.ogg" type="audio/ogg">
            Your browser does not support the audio tag.
        </audio>
    </body>
</html>

OUTPUT:

[Video Player Would Appear Here]
[Audio Player Would Appear Here]

The <span> tag is an inline container for text.

PROGRAM (span tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Span Example</title>
        <style>
            .highlight { color: red; }
            .bold { font-weight: bold; }
            .italic { font-style: italic; }
        </style>
    </head>
    <body>
        <p>This is a paragraph with 
           <span class="highlight">highlighted</span> text.</p>
        <p>Here's <span class="bold">bold</span> and 
           <span class="italic">italic</span> text.</p>
    </body>
</html>

OUTPUT:

This is a paragraph with highlighted text.

Here's bold and italic text.

The <strong> tag defines text with strong importance.

PROGRAM (strong tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Strong Example</title>
    </head>
    <body>
        <p>This is <strong>very important</strong> text.</p>
        <p><strong>Warning:</strong> High voltage area.</p>
    </body>
</html>

OUTPUT:

This is very important text.

Warning: High voltage area.

The <style> tag defines style information for a document.

PROGRAM (style tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Style Example</title>
        <style>
            .custom-text {
                color: blue;
                font-size: 20px;
                margin: 10px;
            }
            .box {
                border: 2px solid red;
                padding: 15px;
                background-color: #f0f0f0;
            }
        </style>
    </head>
    <body>
        <p class="custom-text">This text is styled.</p>
        <div class="box">This is a styled box.</div>
    </body>
</html>

OUTPUT:

This text is styled.

This is a styled box.

The <sub> tag defines subscript text.

PROGRAM (sub tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Subscript Example</title>
    </head>
    <body>
        <p>H<sub>2</sub>O is the chemical formula for water.</p>
        <p>CO<sub>2</sub> is carbon dioxide.</p>
        <p>The value of X<sub>n</sub> is 5.</p>
    </body>
</html>

OUTPUT:

H2O is the chemical formula for water.

CO2 is carbon dioxide.

The value of Xn is 5.

The <summary> tag defines a visible heading for the <details> element.

PROGRAM (summary tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Summary Example</title>
    </head>
    <body>
        <details>
            <summary>Click to show/hide details</summary>
            <p>This is the hidden content that can be 
               shown or hidden.</p>
        </details>
        
        <details>
            <summary>FAQ Question 1</summary>
            <p>Here is the answer to FAQ Question 1.</p>
        </details>
    </body>
</html>

OUTPUT:

Click to show/hide details

This is the hidden content that can be shown or hidden.

FAQ Question 1

Here is the answer to FAQ Question 1.

The <sup> tag defines superscript text.

PROGRAM (sup tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Superscript Example</title>
    </head>
    <body>
        <p>2<sup>3</sup> equals 8.</p>
        <p>The 1<sup>st</sup> place winner.</p>
        <p>E = mc<sup>2</sup></p>
    </body>
</html>

OUTPUT:

23 equals 8.

The 1st place winner.

E = mc2

The <table> tag defines an HTML table.

PROGRAM (table tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Example</title>
    </head>
    <body>
        <table border="1">
            <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Row 1, Cell 1</td>
                    <td>Row 1, Cell 2</td>
                </tr>
                <tr>
                    <td>Row 2, Cell 1</td>
                    <td>Row 2, Cell 2</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

OUTPUT:

Header 1 Header 2
Row 1, Cell 1 Row 1, Cell 2
Row 2, Cell 1 Row 2, Cell 2

The <template> tag holds content that will be hidden when the page loads.

PROGRAM (template tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Template Example</title>
    </head>
    <body>
        <button onclick="showContent()">Show Content</button>

        <template id="myTemplate">
            <h2>Hidden Content</h2>
            <p>This content is initially hidden.</p>
            <img src="example.jpg" alt="Example Image">
        </template>

        <script>
            function showContent() {
                let temp = document.getElementById("myTemplate");
                let clon = temp.content.cloneNode(true);
                document.body.appendChild(clon);
            }
        </script>
    </body>
</html>

OUTPUT:

The <tbody> tag groups the body content in an HTML table.

PROGRAM (tbody tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Body Example</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 5px;
            }
            thead { background-color: #f0f0f0; }
            tbody { background-color: #ffffff; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Savings</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>January</td>
                    <td>USD 100</td>
                </tr>
                <tr>
                    <td>February</td>
                    <td>USD 150</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

OUTPUT:

Month Savings
January USD 100
February USD 150

The <td> tag defines a standard data cell in an HTML table.

PROGRAM (td tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Data Example</title>
        <style>
            table, th, td {
                border: 1px solid black;
                padding: 8px;
                text-align: center;
            }
            .highlight {
                background-color: #ffeb3b;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>Regular cell</td>
                <td class="highlight">Highlighted cell</td>
            </tr>
            <tr>
                <td colspan="2">Cell spanning two columns</td>
            </tr>
            <tr>
                <td rowspan="2">Cell spanning two rows</td>
                <td>Regular cell</td>
            </tr>
            <tr>
                <td>Last cell</td>
            </tr>
        </table>
    </body>
</html>

OUTPUT:

Regular cell Highlighted cell
Cell spanning two columns
Cell spanning two rows Regular cell
Last cell

The <textarea> tag defines a multi-line text input control.

PROGRAM (textarea tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Textarea Example</title>
    </head>
    <body>
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" 
                  rows="4" cols="50" 
                  placeholder="Enter your message here...">
        </textarea>
        
        <br><br>
        
        <label for="readonly">Read-only text:</label><br>
        <textarea id="readonly" name="readonly" 
                  rows="2" cols="50" readonly>
            This text cannot be modified.
        </textarea>
    </body>
</html>

OUTPUT:



The <tfoot> tag defines a footer content in an HTML table.

PROGRAM (tfoot tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Footer Example</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 5px;
            }
            thead { background-color: #e0e0e0; }
            tfoot { background-color: #f5f5f5; }
        </style>
    </head>
    <body>
        <table>
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Cost</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Item 1</td>
                    <td>USD 100</td>
                </tr>
                <tr>
                    <td>Item 2</td>
                    <td>USD 150</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td><strong>Total</strong></td>
                    <td><strong>USD 250</strong></td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>

OUTPUT:

Item Cost
Item 1 USD 100
Item 2 USD 150
Total USD 250

The <th> tag defines a header cell in an HTML table.

PROGRAM (th tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Header Example</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 8px;
            }
            th {
                background-color: #4CAF50;
                color: white;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Age</th>
                <th scope="col">City</th>
            </tr>
            <tr>
                <th scope="row">John</th>
                <td>25</td>
                <td>New York</td>
            </tr>
            <tr>
                <th scope="row">Jane</th>
                <td>30</td>
                <td>London</td>
            </tr>
        </table>
    </body>
</html>

OUTPUT:

Name Age City
John 25 New York
Jane 30 London

The <time> tag defines a specific time or datetime.

PROGRAM (time tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Time Example</title>
    </head>
    <body>
        <p>The meeting is scheduled for 
           <time datetime="2024-12-28 22:54:24">
           December 28, 2024 at 10:54 PM
           </time>
        </p>
        
        <p>Open hours: 
           <time>10:00</time> to <time>21:00</time>
        </p>
        
        <p>Concert Date: 
           <time datetime="2024-12-31">New Year's Eve</time>
        </p>
    </body>
</html>

OUTPUT:

The meeting is scheduled for

Open hours: to

Concert Date:

The <title> tag defines the title of the HTML document.

PROGRAM (title tag):

<!DOCTYPE html>
<html>
    <head>
        <title>My First Webpage | Home</title>
        <style>
            .browser-tab {
                border: 1px solid #ccc;
                padding: 5px 15px;
                border-radius: 5px 5px 0 0;
                background-color: #f8f9fa;
                display: inline-block;
            }
        </style>
    </head>
    <body>
        <p>The title appears in:</p>
        <ul>
            <li>Browser tab</li>
            <li>Bookmarks</li>
            <li>Search engine results</li>
        </ul>
    </body>
</html>

OUTPUT:

My First Webpage | Home

The title appears in:

  • Browser tab
  • Bookmarks
  • Search engine results

The <tr> tag defines a row in an HTML table.

PROGRAM (tr tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Table Row Example</title>
        <style>
            table, th, td {
                border: 1px solid black;
                border-collapse: collapse;
                padding: 8px;
            }
            tr:nth-child(even) {
                background-color: #f2f2f2;
            }
            tr:hover {
                background-color: #ddd;
            }
        </style>
    </head>
    <body>
        <table>
            <tr>
                <th>Product</th>
                <th>Price</th>
            </tr>
            <tr>
                <td>Apple</td>
                <td>USD 1.00</td>
            </tr>
            <tr>
                <td>Orange</td>
                <td>USD 0.80</td>
            </tr>
            <tr>
                <td>Banana</td>
                <td>USD 0.75</td>
            </tr>
        </table>
    </body>
</html>

OUTPUT:

Product Price
Apple USD 1.00
Orange USD 0.80
Banana USD 0.75

The <track> tag specifies text tracks for media elements.

PROGRAM (track tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Track Example</title>
    </head>
    <body>
        <video width="320" height="240" controls>
            <source src="movie.mp4" type="video/mp4">
            <track src="subtitles_en.vtt" 
                   kind="subtitles" 
                   srclang="en" 
                   label="English">
            <track src="subtitles_es.vtt" 
                   kind="subtitles" 
                   srclang="es" 
                   label="Spanish">
        </video>
    </body>
</html>

OUTPUT:

[Video with Subtitles Would Appear Here]

The <u> tag represents text that should be stylistically different from normal text.

PROGRAM (u tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Underline Example</title>
    </head>
    <body>
        <p>This is <u>underlined</u> text.</p>
        <p>The word <u>misspelled</u> might be incorrect.</p>
        <p>This is a <u class="proper-name">proper name</u>.</p>
    </body>
</html>

OUTPUT:

This is underlined text.

The word misspelled might be incorrect.

This is a proper name.

The <ul> tag defines an unordered (bulleted) list.

PROGRAM (ul tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Unordered List Example</title>
        <style>
            .custom-list {
                list-style-type: square;
            }
            .nested-list {
                list-style-type: circle;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>Coffee</li>
            <li>Tea</li>
            <li>Milk</li>
        </ul>
        
        <ul class="custom-list">
            <li>First Item</li>
            <li>Second Item
                <ul class="nested-list">
                    <li>Sub-item 1</li>
                    <li>Sub-item 2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

OUTPUT:

  • Coffee
  • Tea
  • Milk
  • First Item
  • Second Item
    • Sub-item 1
    • Sub-item 2

The <var> tag defines a variable in programming or a mathematical expression.

PROGRAM (var tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Variable Example</title>
    </head>
    <body>
        <p>The area of a triangle is: 
           <var>b</var> × <var>h</var> / 2</p>
        
        <p>In the equation <var>E</var> = 
           <var>m</var><var>c</var><sup>2</sup>, 
           <var>c</var> represents the speed of light.</p>
    </body>
</html>

OUTPUT:

The area of a triangle is: b × h / 2

In the equation E = mc2, c represents the speed of light.

The <video> tag embeds video content in a document.

PROGRAM (video tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Video Example</title>
    </head>
    <body>
        <video width="320" height="240" controls autoplay muted>
            <source src="movie.mp4" type="video/mp4">
            <source src="movie.ogg" type="video/ogg">
            Your browser does not support the video tag.
        </video>
        
        <video width="320" height="240" 
               poster="thumbnail.jpg" controls>
            <source src="video.webm" type="video/webm">
            <source src="video.mp4" type="video/mp4">
            <track src="subtitles.vtt" kind="subtitles" 
                   srclang="en" label="English">
            Your browser does not support the video tag.
        </video>
    </body>
</html>

OUTPUT:

[Video Player 1 Would Appear Here]
[Video Player 2 Would Appear Here]

The <wbr> tag defines a possible line-break point.

PROGRAM (wbr tag):

<!DOCTYPE html>
<html>
    <head>
        <title>Word Break Example</title>
        <style>
            .narrow { width: 200px; border: 1px solid #000; }
        </style>
    </head>
    <body>
        <div class="narrow">
            <p>This is a very long word: 
               super<wbr>cali<wbr>fragil<wbr>istic<wbr>
               expiali<wbr>docious</p>
            
            <p>A long URL: 
               https://<wbr>really<wbr>long<wbr>
               domain<wbr>name.com</p>
        </div>
    </body>
</html>

OUTPUT:

This is a very long word: supercalifragilisticexpialidocious

A long URL: https://reallylongdomainname.com