The HTML Tags They NEVER Taught You

Introduction

In this tutorial, we will explore some unique HTML tags that are often overlooked but can enhance your web development projects. These tags serve specific purposes and can improve the semantic structure of your HTML documents. Understanding these tags will empower you to create more accessible and functional web pages.

Step 1: Using the abbr Tag

The abbr tag is used to define abbreviations or acronyms. It helps improve accessibility by providing additional context to screen readers.

• How to use it:

  <abbr title="Hypertext Markup Language">HTML</abbr>
  

• Practical Tip: Always use the title attribute to provide the full form of the abbreviation.

Step 2: Implementing the code Tag

The code tag is used to display code snippets in a way that distinguishes them from regular text. It typically renders in a monospace font.

• How to use it:

  <p>To declare a variable in JavaScript, use <code>let variableName = value;</code></p>
  

Step 3: Utilizing the kbd Tag

The kbd tag represents user input, such as keyboard input. This tag is helpful in documentation to indicate commands that users can type.

• How to use it:

  <p>To save your work, press <kbd>Ctrl</kbd> + <kbd>S</kbd>.</p>
  

Step 4: Adding Datalist and Option

The datalist tag provides an easy way to create a dropdown list of options for an input field. It enhances user experience by suggesting values.

• How to use it:

  <input list="browsers" name="browser" id="browser">
  <datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
  </datalist>
  

Step 5: Creating Dialogs with the dialog Tag

The dialog tag is used to create dialog boxes or modal windows. This tag helps in displaying important information or prompts without navigating away from the page.

• How to use it:

  <dialog open>
    <p>This is a dialog box.</p>
    <button onclick="this.closest('dialog').close()">Close</button>
  </dialog>
  

Step 6: Marking Time with the time Tag

The time tag represents a specific period in time, which can be useful for events, dates, or timestamps.

• How to use it:

  <time datetime="2023-10-01">October 1, 2023</time>
  

Step 7: Understanding Ruby Text with ruby, rt, and rp

The ruby tag is used for East Asian typography, allowing you to add annotations to text. The rt tag specifies the pronunciation, while rp provides fallback parentheses.

• How to use it:

  <ruby>
    漢<rt>かん</rt>
    字<rt>じ</rt>
  </ruby>
  

Step 8: Displaying Progress with the progress Tag

The progress tag represents the completion progress of a task. It is useful for showing loading states or progress bars.

• How to use it:

  <progress value="70" max="100">70%</progress>
  

Step 9: Measuring Values with the meter Tag

The meter tag is used to represent a scalar measurement within a known range, such as disk usage or a survey rating.

• How to use it:

  <meter value="0.6">60%</meter>
  

Step 10: Grouping Form Elements with fieldset and legend

The fieldset tag is used to group related form elements, while the legend tag provides a caption for the fieldset.

• How to use it:

  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name">
  </fieldset>
  

Conclusion

By incorporating these unique HTML tags into your web development projects, you can enhance accessibility, improve user experience, and create more semantically meaningful content. Experiment with these tags to see how they can fit into your work, and continue exploring other HTML features to expand your skills.