HTML Syntax: Basic and Advanced

Basic HTML Syntax

Let's start with fundamental HTML syntax:

1. Document Structure


        <!DOCTYPE html>

        <html>

        <head>

        <title>Page Title</title>

        </head>

        <body>

        <h1>This is a Heading</h1>

        <p>This is a paragraph.</p>

        </body>

        </html>

2. Basic Elements


        <p>This is a paragraph.</p>

        <h2>This is a heading level 2</h2>

        <a href="https://www.example.com">Visit our website</a>

        <img src="image.jpg" alt="Description of the image">

3. Lists and Tables


        <ul>

        <li>Item 1</li>

        <li>Item 2</li>

        </ul>

        <ol>

        <li>First</li>

        <li>Second</li>

        </ol>

        <table>

        <tr><td>Row 1, Cell 1</td><td>Row 1, Cell 2</td></tr>

        </table>

Advanced HTML Syntax

Now, let's explore some advanced HTML concepts:

1. Forms and Input Elements


        <form action="/submit" method="post">

        <label for="username">Username:</label>

        <input type="text" id="username" name="username">

        <input type="submit" value="Submit">

        </form>

2. Multimedia Elements


        <audio controls>

        <source src="audio.mp3" type="audio/mp3">

        Your browser does not support the audio element.

        </audio>

        <video width="320" height="240" controls>

        <source src="video.mp4" type="video/mp4">

        Your browser does not support the video tag.

        </video>

3. Semantic Elements


        <article>

        <h2>Article Title</h2>

        <p>Content of the article.</p>

        </article>

        <footer>Copyright © 2023 My Website</footer>

4. HTML5 Canvas


        <canvas id="myCanvas" width="200" height="100"></canvas>

        <script>

        var canvas = document.getElementById('myCanvas');

        var context = canvas.getContext('2d');

        context.fillStyle = 'red';

        context.fillRect(10, 10, 50, 50);

        </script>

This is a brief overview; HTML is a versatile language used for structuring web content. Explore additional HTML elements, attributes, and best practices to create well-organized and accessible web pages.