# Some HTML elements that are often overlooked or underrated 😎

### <pre>

Content within a <pre> element appears in a fixed-width font, commonly Courier, and maintains both spaces and line breaks.

```xml
<!-- example -->

<pre>
    El niño jugó con su perro 

    El niño jugó con su perro
</pre>

<!-- comparision with p tag-->

<p>
    El niño jugó con su perro 

    El niño jugó con su perro
</p>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712573757810/4f8c161a-c5e9-40c0-986d-4be790ab9c68.png align="center")

### &lt;mark&gt;

The HTML tag identifies text that is meant to be highlighted or marked.

```xml
<!-- example -->

<mark>
        El niño jugó con su perro
</mark>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712573945225/e09754c1-4da9-4d11-aed8-12b06f27a990.png align="center")

### &lt;del&gt;

The HTML tag specifies text that has been removed from a document. Typically, web browsers will display deleted text with a strikethrough.

```xml
<!-- example -->

<del>    
    El niño jugó con su perro
</del>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712574117520/e0ad8ace-d8da-4cc4-b0d4-25ddcec4eed0.png align="center")

### &lt;sub&gt;

The HTML &lt;sub&gt; tag specifies subscripted text. Subscripted text is positioned slightly below the normal line and may be displayed in a reduced font size. It's commonly used for mathematical expressions

```xml
<!-- example -->

 x<sub>1</sub> + y<sub>2</sub> = z<sub>3</sub>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712574355702/da577d52-cfa8-4f3f-8d00-628134307da7.png align="center")

### &lt;sup&gt;

The HTML &lt;sup&gt; element defines superscript text. Superscript text appears slightly above the normal line and is sometimes rendered in a smaller font. Superscript text can be used for mathematical expressions, such as E = mc&lt;sup&gt;2&lt;/sup&gt;.

```xml
<!-- example -->
<pre>
    E = mc<sup>2</sup>.
</pre>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712574585175/68dd049d-cfe2-484d-9d2d-995e461d11b0.png align="center")

## &lt;q&gt;

The HTML element signifies a brief quotation.

```xml
<p>The author's stance on success is succinctly captured in the quote: <q>Success is not final, failure is not fatal: It is the courage to continue that counts.</q></p>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712574975387/9bb1eecd-6f11-4014-8782-3d7de232ec92.png align="center")

### &lt;map&gt; and &lt;area&gt;

The HTML element specifies an image map, which is an image containing clickable regions. These regions are defined using one or more tags.

```xml
  <h1>Clickable Image Map</h1>
  <img src="map-image.jpg" alt="Map Image" usemap="#map">
  
  <map name="map">
        <area shape="circle" coords="100,100,50" href="location1.html" alt="Location 1">
        <area shape="rect" coords="200,200,300,300" href="location2.html" alt="Location 2">
        <area shape="polygon" coords="400,400,500,500,400,600" href="location3.html" alt="Location 3">
  </map>
```

### &lt;picture&gt;

The &lt;picture&gt; element encompasses one or more &lt;source&gt; elements, with each pointing to different images via the srcset attribute. This approach enables the browser to select the most suitable image based on the current view and/or device. Really cool stuff 😎

```xml
<!-- example -->
<picture>
  <source media="(min-width: 650px)" srcset="https://images.pexels.com/photos/326900/pexels-photo-326900.jpeg?cs=srgb&dl=pexels-pixabay-326900.jpg&fm=jpg">
  <source media="(min-width: 465px)" srcset="https://t3.ftcdn.net/jpg/05/63/70/98/360_F_563709848_OdMVkfRpOZbSsy6bFBkthhJzleFxM7Cn.jpg">
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNtgIY3GkAClz6dGqliemaTi8enqhFRRxbWhDYtOQxsGA8LMjUEqmdnfax3WNHg0Hc3DM&usqp=CAU" style="width:auto;">
</picture>
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712577650861/48136b56-f71f-4686-a0f2-33c9fd27bced.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712577668612/73f2782b-0581-40eb-b96a-1bae76cb4b64.png align="center")

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1712577684364/bedfabef-6a80-4402-b1cf-2ed67824bb9f.png align="center")

## Conclusion :

  
Finally, I'd like to emphasize that HTML offers a variety of tags, each with its own significance. It's a best practice to use tags according to their intended purpose rather than solely relying on generic `<div>` elements throughout your code. If you find it satisfactory, please consider giving it a like. [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)