Newly added HTML features

Here’s a list of some of the latest HTML features as documented by MDN Web Docs. These features enhance functionality, improve performance, and provide more flexibility for modern web development.

1. <dialog> Element

• Description: Represents a dialog box or other interactive component such as a modal.
• Features: Supports methods like .showModal() and .close().

• Example:

  
      <dialog id="myDialog">Hello, I am a dialog!</dialog>
      <button onclick="document.getElementById('myDialog').showModal()">Open Dialog</button>
  

2. <template> Element

• Description: Holds client-side content that is not to be rendered when the page loads but can be used later via JavaScript.
• Features: Ideal for reusable code blocks.

• Example:

  
      <template id="myTemplate">
        <p>Template content goes here.</p>
      </template>
      <script>
        const template = document.getElementById('myTemplate').content.cloneNode(true);
        document.body.appendChild(template);
      </script>
  

3. <picture> Element

• Description: Provides an easy way to offer alternative versions of an image for different device displays.
• Features: Works with srcset and media attributes for responsive images.

• Example:

  
      <picture>
        <source srcset="image.webp" type="image/webp">
        <source srcset="image.jpg" type="image/jpeg">
        <img src="image.jpg" alt="A descriptive text">
      </picture>
  

4. <input type="color"> Element

• Description: Allows users to select a color, offering a color picker interface.
• Features: Provides a default color input UI.

• Example:

  
      <label for="favcolor">Choose a color:</label>
      <input type="color" id="favcolor" name="favcolor" value="#ff0000">
  

5. <input type="date"> Element

• Description: Provides a date picker, allowing users to select a date.
• Features: No need for JavaScript libraries for basic date picking.

• Example:

  
      <label for="birthday">Select your birthday:</label>
      <input type="date" id="birthday" name="birthday">
  

6. <details> and <summary> Elements

• Description: Allows the creation of collapsible content.
• Features: <summary> defines the visible heading, while <details> contains the collapsible content.

• Example:

  
      <details>
        <summary>More info</summary>
        <p>Hidden content here.</p>
      </details>
  

7. <datalist> Element

• Description: Provides a list of pre-defined options for an <input> element.
• Features: Enhances user input with suggestions.

• Example:

  
      <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">
      </datalist>
  

8. <input type="range"> Element

• Description: Creates a slider control for numeric input.
• Features: Allows users to specify a numeric value within a given range.

• Example:

  
      <label for="volume">Volume:</label>
      <input type="range" id="volume" name="volume" min="0" max="100">
  

9. <output> Element

• Description: Represents the result of a calculation or user action.
• Features: Ideal for displaying calculated results.

• Example:

  
      <label for="a">Value A:</label>
      <input id="a" type="number" value="10">
      <label for="b">Value B:</label>
      <input id="b" type="number" value="20">
      <button onclick="document.querySelector('output').value = parseInt(a.value) + parseInt(b.value)">Calculate</button>
      <output></output>
  

10. <progress> Element

• Description: Represents the completion progress of a task.
• Features: Displays a progress bar.

• Example:

  
      <label for="file">Uploading file:</label>
      <progress id="file" value="32" max="100">32%</progress>
  

11. <meter> Element

• Description: Represents a scalar measurement within a known range, or a fractional value.
• Features: Displays a gauge.

• Example:

  
      <label for="diskUsage">Disk Usage:</label>
      <meter id="diskUsage" value="0.6" min="0" max="1">60%</meter>
  

12. <input type="email"> and <input type="url"> Elements

• Description: Validate email and URL input automatically.
• Features: Provides built-in validation.

• Examples:

  
      <label for="email">Email:</label>
      <input type="email" id="email" name="email">
  
      <label for="website">Website:</label>
      <input type="url" id="website" name="website">
  

13. <input type="file" multiple> Attribute

• Description: Allows the selection of multiple files.
• Features: Simplifies file uploads.

• Example:

  
      <label for="files">Select files:</label>
      <input type="file" id="files" name="files" multiple>
  

14. <input type="search"> Element

• Description: Provides a search input field with an optional clear button.
• Features: Enhances user experience for search inputs.

• Example:

  
      <label for="search">Search:</label>
      <input type="search" id="search" name="search">
  

15. <input type="number"> Element

• Description: Allows numeric input with optional min, max, and step attributes.
• Features: Provides a spinner control.

• Example:

  
      <label for="quantity">Quantity:</label>
      <input type="number" id="quantity" name="quantity" min="1" max="10" step="1">
  

16. <input type="tel"> Element

• Description: Provides an input field for telephone numbers.
• Features: Offers a specialized keyboard on mobile devices.

• Example:

  
      <label for="phone">Phone number:</label>
      <input type="tel" id="phone" name="phone">
  

17. <input type="datetime-local"> Element

• Description: Combines date and time input.
• Features: Provides a date-time picker UI.

• Example:

  
      <label for="appointment">Appointment:</label>
      <input type="datetime-local" id="appointment" name="appointment">
  

18. <input type="week"> Element

• Description: Allows the selection of a specific week.
• Features: Provides a week picker UI.

• Example:

  
      <label for="week">Select week:</label>
      <input type="week" id="week" name="week">
  

19. <input type="month"> Element

• Description: Allows the selection of a specific month and year.
• Features: Provides a month picker UI.

• Example:

  
      <label for="month">Select month:</label>
      <input type="month" id="month" name="month">
  

20. <input type="time"> Element

• Description: Allows the selection of a time without a date.
• Features: Provides a time picker UI.

• Example:

  
      <label for="time">Select time:</label>
      <input type="time" id="time" name="time">
  

21. <input type="file" accept="image/\*"> Attribute

• Description: Limits file selection to specific file types.
• Features: Offers file type filtering.

• Example:

  
      <label for="avatar">Select an image:</label>
      <input type="file" id="avatar" name="avatar" accept="image/*">
  

22. <input type="password" autocomplete="new-password"> Attribute

• Description: Improves security by preventing the browser from auto-filling passwords.
• Features: Encourages strong password practices.

• Example:

  
      <label for="password">Password:</label>
      <input type="password" id="password" name="password"  autocomplete="new-password">