HTML is the markup language on which web pages are created, it consists of elements that tell the web browser what to render.

Beyond the common tags and attributes you know and use, several others are useful but less deployed when coding due to their unpopularity. In this article, I will introduce some of them to you.

The 'mark' tag is used to highlight text. The word "Elegant" below is highlighted.
```
         <p> She is such an <mark>Elegant<mark> lady<p>
```
The 'loading=lazy' attribute stops off-screen images from loading until a user scrolls down to it. The image below will defer loading until a user scrolls down to it.
```
           <img src="/image.png" alt="London" style="width:100%" loading="lazy">
```

The 'start' attribute specifies a particular number you want your list to begin from in an ordered list. The list of items below will begin from 8 and end in 12.

           <ol start= "8">
               <li>Orange</li>
               <li>Banana</li>
               <li>Pineapple</li>
               <li>Grape</li>
               <li>Carrot</li>
           </ol>

Screenshot (4).png

The ' base' tag helps to open links in new tabs. One base tag is enough for a document. The link in the code below opens externally.

          <head>
            <base  target="_blank">
          </head>

          <body>
          <img src="image.png" width="24" height="39" alt="Stickman">
          <a href="https://www.w3schools.com/tags/tag_base.asp">HTML base Tag</a>
          </body>

Screenshot (6).png

The 'translate=no' attribute is used when you don't want an element translated along with other content on your web page. In the code below the 'Brand name' will not be translated when other contents get translated.
```
   <footer>
     <p translate= "no"> Brand name</p>
    <footer>
```

The 'datalist' tag is used to add an autocomplete feature in an input element such as a search box. N/B the list attribute in the input element has to be the same as the id of the datalist tag. This binds them together.

  <div class= 'wrapper'>
  <input list="menu" >
      <placeholder>Food Items</placeholder>
      <datalist id="menu">
          <option value="vegetable">
          <option value="burger">
          <option value="bread">
          <option value="coffee">
          <option value="soda">
     </datalist>
  </div>

Screenshot (8).png

The ' spellcheck' attribute defines if an element is to be checked for spelling errors or not. the id is either set to true or false. The contenteditable attribute helps to make an on-screen spelling correction once the spelling error is highlighted.
```
   <p contenteditable="true" spellcheck="true"> This is my wall bt I don't like it</p>
```

The ' poster' attribute is used to set the video thumbnail. It specifies the image to be shown while a video is being downloaded.

<video controls poster="/image/goal.png">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Videos with a poster image
</video>

The 'datetime' attribute can be used to determine when an element was deleted or inserted.

   <p>
  <del datetime="2022-09-15T22:55:03Z">This area was deleted</del>
  </p>
  <p>
   <ins datetime="2022-09-15T22:55:03Z">This area was inserted</ins>
 </p>

The 'download' attribute helps to download a file by clicking the link instead of navigating to the file. A new file name can also be added to the attribute.
```
  <a href="/images/myimage.png" download ="mynewfile" >
```
The 'disabled' attribute is used to render an element useless to the user until certain conditions are met.
```
    <button type="button" disabled> Disabled</button>
```

Screenshot (13).png

Conclusion

In this article, you have learned about uncommon HTML elements and attributes, also how they are used. There are numerous that are still out there that are very useful. This will hopefully spur you to discover them.

Happy reading. 😊

codepen.io/olatinted90/pen/OJOPJJY

w3schools.com/tags/ref_attributes.asp