HTML5 Fundamentals

1. Semantic Elements

Semantic elements in HTML5 provide meaning to the structure of web content. They help both developers and browsers understand the purpose of different parts of a webpage. For example, <header>, <nav>, <article>, and <footer> are semantic elements that clearly define their roles within the document.

Example:

        <header>
            <h1>Welcome to My Website</h1>
        </header>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
            </ul>
        </nav>
        <article>
            <h2>Article Title</h2>
            <p>This is the content of the article.</p>
        </article>
        <footer>
            <p>© 2023 My Website</p>
        </footer>
    

2. Multimedia Support

HTML5 introduced native support for multimedia elements like <audio> and <video>. These elements allow embedding audio and video content directly into web pages without the need for third-party plugins like Flash. This enhances user experience and ensures better compatibility across different devices and browsers.

Example:

        <video controls>
            <source src="video.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        
        <audio controls>
            <source src="audio.mp3" type="audio/mpeg">
            Your browser does not support the audio tag.
        </audio>
    

By using semantic elements and native multimedia support, HTML5 enables developers to create more accessible, maintainable, and user-friendly web content.