Html codes

📚 Advanced HTML in 5 Minutes

🔖 1. Semantic HTML
Using semantic HTML tags improves SEO and accessibility, as search engines and assistive technologies can better understand the content structure of your page.

⦁ Tags to use:

  <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>

🔖 2. Meta Tags
Meta tags are crucial for SEO and help create responsive websites. They provide metadata about the HTML document.

⦁ Examples:

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="Page description">

🔖 3. Forms
HTML forms allow you to capture user input. HTML5 introduced new input types and attributes for better validation and user experience.

⦁ Example of an advanced form:

  <form>
      <input type="text" required placeholder="Name">
      <input type="email" placeholder="Email">
      <input type="date">
      <input type="range" min="0" max="100">
      <input type="submit" value="Submit">
  </form>

🔖 4. Multimedia
You can easily embed audio, video, and images in HTML, enhancing user experience.

⦁ Examples:

  <img src="image.jpg" alt="Description" loading="lazy">
  <video controls>
      <source src="video.mp4" type="video/mp4">
  </video>
  <audio controls>
      <source src="audio.mp3" type="audio/mpeg">
  </audio>

🔖 5. SVG
Using Scalable Vector Graphics (SVG) for icons and illustrations ensures that graphics remain sharp at any size.

⦁ Example:

  <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" fill="blue" />
  </svg>

🔖 6. Accessibility
Enhancing web accessibility using ARIA roles and attributes helps better guide users using assistive technologies.

⦁ Examples:

  <button aria-label="Close">X</button>
  <div role="navigation">...</div>

🔖 7. Custom Data Attributes
Custom data attributes help you attach additional information to HTML elements for JavaScript manipulation.

⦁ Example:

  <div data-user-id="123" data-role="admin">User Info</div>

🔖 8. HTML Entities
HTML entities allow you to display special characters that are reserved in HTML.

⦁ Examples:

  &copy; &amp; &lt; &gt;

🔖 9. Responsive Images
Using the srcset attribute in <img> allows browsers to select the appropriate image size for different screen resolutions.

⦁ Example:

  <img src="image.jpg" srcset="image-2x.jpg 2x, image-3x.jpg 3x" alt="Description">

🔖 10. HTML5 APIs
HTML5 provides powerful APIs such as Geolocation and Local Storage, enhancing the capabilities of web applications.

⦁ Example:

  <script>
      navigator.geolocation.getCurrentPosition((position) => {
          console.log(position.coords.latitude, position.coords.longitude);
      });
  </script>

📚 Example Document
Here’s a concise example of an HTML document utilizing advanced HTML features:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced HTML</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <article>
                <h2>Article Title</h2>
                <p>Content goes here.</p>
            </article>
        </section>
    </main>
    <footer>
        <p>&copy; 2025</p>
    </footer>
</body>
</html>

This is a quick, advanced overview of HTML features. For mastery, consider diving deeper into each topic!

79 viewsedited 14:04