HTML Tags you rarely use but should.

August 30, 2021 - 2 min read

1. The Address Tag

Are you using div's for enclosing contact info?

The <address> HTML element indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

The contact information provided by an <address> element's contents can take whatever form is appropriate for the context, and may include any type of contact information that is needed, such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth.

For more information visit here

2. optgroup Tag

<optgroup> tag is used when you need to group the options into categories. This makes selecting an option from a very large list of options easy! User can look into the relevant category and select an option in that particular category.

<label for="Superheroes">Select Superhero</label>
<select  name="heroes" id="heroes">
  <optgroup label="DC">
    <option value="Batman">Batman</option>
    <option value="Superman">Superman</option>
    <option value="Aquaman">Aquaman</option>
  </optgroup>
  <optgroup label="Marvel">
    <option value="Ironman">Ironman</option>
    <option value="Spiderman">Spiderman</option>
    <option value="Hulk">Hulk</option>
  </optgroup>
</select>

3. Capture Attribute for Input Element

Lastly, we are going to see about capture attribute for the input elements. capture added as an attribute to an input element opens the camera for taking shots of the user(front camera) or the scene(rear camera). This tag only works on mobile, and it simply falls back to a file picker in Desktop. capture attribute has two values,

  • user --> Opens User facing Camera (Front)
  • environment --> Opens Environment (Rear)
<div>
<h2>Opens Front Camera</h2>
<label for="picture">Upload a photo of yourself:</label>
	<input type="file" id="picture" capture="user" accept="image/*">
</div>

<div id="BackCamera">
<h2>Opens Back Camera</h2>
<label for="picture">Upload a photo of yourself:</label>
	<input type="file" id="picture" capture="environment" accept="image/*">
</div>

One thing to note is on desktop it will work as normal allowing you to choose a file from your computer.