In this article, we will learn about the top 12 unique HTML tags that many developers don't know about. By using these tags, you can create your website in a more optimized way.
So let's get started.
Top 12 Unique HTML Tags List
- Details tag
- Mark tag
- Output tag
- Datalist tag
- Video and Audio tags
- Progress tag
- Pre tag
- Marquee tag
- Blockquote tag
- Fieldset tag
- Del and Ins tag
- Area tag
1. Details tag
The <details> tag in HTML creates a widget that lets users open and close content by clicking on it. It's like a toggle button. By default, the content is closed. You can put any type of content inside it. Usually, it's used with <summary> to give a title or summary of the content.
<body>
<details>
<summary>Click here to see more Category</summary>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</details>
<br>
<details>
<summary>Click here to visit our site.</summary>
<a target="_blank" href="https://codemafias.com">Codemafias</a>
<img src="https://codemafias.com/img/post_imgs/1672495305758.png" width="40%" alt="codemafias-image">
</details>
</body>
The <details> tag works well in all modern browsers, but it's not compatible with Internet Explorer. If you want to support Internet Explorer, you'll need to use a JavaScript library or polyfill to make it work.
2. Mark tag
The <mark> tag highlights text with a default yellow background color, but you can customize its appearance using CSS to change colors, font, and more.
<body>
<p>Lorem ipsum, dolor sit amet <mark>Important item</mark> consectetur adipisicing elit.</p>
</body>
The <mark> tag highlights text with a default yellow background color but you can customize its appearance using CSS to change colors, font, and more.
mark {
background-color: black;
color: lime;
font-weight: bolder;
}
3. Output tag
The <output> tag in HTML is indeed used to display the result of a calculation or the output of a script. However, it's typically used in conjunction with JavaScript rather than directly in HTML markup. Here's an example:
<form onsubmit="return false">
<input type="number" id="a" value="0"> *
<input type="number" id="b" value="0"> =
<output id="result"></output>
<button type="submit" onclick="result.value=parseInt(a.value)*parseInt(b.value)">Calculate</button>
</form>
After entering values in both input boxes, clicking the "Calculate" button triggers a JavaScript function to perform the calculation and update the output element's value.
4. Datalist tag
The <datalist> tag helps create autocomplete suggestions for input fields. When users type, it shows a list of options matching their input. To use it, define options with <datalist>, then link it to an input using the list property. As users type, matching options appear for selection.
<body>
<label for="languages">Type your favorite Programming languages:</label>
<input list="Programming_languages" id="languages">
<datalist id="Programming_languages">
<option value="Python">
<option value="C++">
<option value="Swift">
<option value="Kotlin">
<option value="Java"></option>
</datalist>
</body>
5. Video and audio tags
Using the <video> and <audio> tags in HTML, you can play video and audio files right on your webpage without needing any players or plugins.
To use the <video> tag, you specify the video file's location with the src attribute and set its width and height. You can also add the Controls attribute to let users easily play, pause, and adjust the volume.
<body>
<video src="video.mp4" width="600" height="500" controls> </video>
</body>
To use the <audio> tag, specify the audio file's source with the src attribute. Also, include the controls property to show user controls like play/pause and volume adjustments.
<body>
<audio src="audio.mp3" controls></audio>
</body>
Both the <video> and <audio> tags come with extra options. You can set multiple media sources, add a poster image for the video start, include captions or subtitles, and more.
6. Progress tag
The HTML <progress> tag shows a progress bar to users, letting them see how far along a task is and what percentage is done.
To implement the progress element, define the current progress with the value attribute and set the maximum progress value with the max attribute. The value should range from 0 to the max value, reflecting the current progress, while the max attribute specifies the total steps or end goal of the task.
<body>
<label>Downloading progress: 80%</label>
<progress value="80" max="100"> 80% </progress>
</body>
In the example, the progress bar fills to 80% as the current progress value (80) is set relative to the maximum progress value (100).
You can display an indefinite progress bar by either removing the value and max attributes or setting the value property to null.
<body>
<progress>Waiting...</progress>
</body>
7. Pre tag
The <pre> tag is used to display pre-formatted text in HTML. Text within this tag is shown in a fixed-width font, maintaining the spacing and formatting exactly as it appears in the HTML source code.
<body>
<pre>This is pre tag Lorem
ipsum dolor sit amet
consectetur, adipisicing elit.
Doloribus, voluptatibus? Lorem </pre>
</body>
8. Marquee tag
The <marquee> tag in HTML is used to create a scrolling text effect. You can make text move horizontally or vertically across the screen by wrapping it inside the <marquee> tag. Use the direction attribute to specify the scroll direction ("left," "right," "up," or "down"), and set the scroll speed using the scrollamount attribute.
<body>
<marquee direction="right" scrollamount="10">This text will scroll from left to right.</marquee>
</body>
In the same way, you can create vertically scrolling text by setting the direction attribute of the marquee element to "up" and adjusting its height and width using CSS.
<body>
<marquee width="50%" direction="up" height="200px">
vertically scrolling effect
</marquee>
</body>
9. Blockquote tag
The <blockquote> tag in HTML is used to represent a longer quote from another source. It is commonly used to separate the quote from the rest of the text on the page and to highlight it.
<body>
<p>Lorem ipsum dolor sit amet.</p>
<blockquote>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil amet velit distinctio neque similique
repellat quaerat nemo illum. Quia molestias rerum libero aliquam iure assumenda dignissimos quidem
deserunt aperiam quis! Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident itaque qui nostrum,
repellat culpa esse quasi doloribus doloremque? Ex omnis corporis laudantium quaerat optio possimus
voluptatibus eos ipsum saepe? Voluptates! </blockquote>
</body>
You can also include an optional cite attribute to provide a reference or link to the source of the quotation.
<body>
<blockquote cite="https://codemafias.com/How-to-use-Your-Browser-as-a-Text-Editor">
Although there are so many such tricks these three are very simple and effective. The three methods
described below can be used to use the Chrome browser as a notepad.
</blockquote>
</body>
10. Fieldset tag
The <fieldset> tag in HTML groups related elements, often within a form. It's paired with <legend> to give a title to the group. This tag also draws a box around the grouped elements, visually separating them from other content.
<body>
<form>
<fieldset>
<legend>Personal Information:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="contact">Contact:</label>
<input type="contact" id="contact" name="contact"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
The <fieldset> tag puts a border around form parts, and <legend> acts as a title. This helps organize forms, making them clear and easy to fill out.
You can also group non-form items using <fieldset>, with <legend> acting as a caption. With CSS, you can style it to create appealing forms.
11. Del and Ins tag
The <del> tag is used to show text that has been deleted from a document and the <ins> tag highlights text that's been newly inserted into the document.
<body>
<del>This text has been deleted</del>
<ins>This text has been inserted</ins>
</body>
Both the <del> and <ins> tags can be used with the datetime attribute, which specifies the date and time at which the deletion or insertion was made.
<body>
<del datetime="2023-01-01T12:00:00">This text was deleted on January 1, 2023 at 12:00 AM</del>
<ins datetime="2023-01-01T12:00:00">This text was inserted on January 1, 2023 at 12:00 AM</ins>
</body>
Both of these tags are used to highlight changes in documents, especially in legal, technical, and collaborative writing contexts.
12. Area tag
The <area> tag in HTML is used to define clickable areas, called "hotspots," within an image map. An image map is an image with multiple clickable regions that link to other pages or perform actions when clicked.
Each <area> element specifies the shape, size, and location of a hotspot within the image map. It's always placed inside a <map> element, which defines the entire image map.
The <area> element includes multiple attributes that can be used to determine the shape, size, and location of the hotspot, as well as the link or script that should be executed when the hotspot is clicked. Some of the most commonly used attributes are:
shape: This attribute specifies the shape of the hotspot. Possible values include "rect" (rectangle), "circle" (circle), and "poly" (polygon).
coords: This attribute specifies the coordinates of the hotspot. The format of the coordinates depends on the shape of the hotspot. For a rectangle, the format is "x1,y1,x2,y2", where (x1,y1) is the top-left corner and (x2,y2) is the bottom-right corner. For a circle, the format is "x,y,r", where (x,y) is the center of the circle and r is the radius. For a polygon, the format is "x1,y1,x2,y2,x3,y3,...", where each (xi, yi) pair specifies a vertex of the polygon.
You can see the image's distance value by opening it in paint, the distance in the bottom left is extreme when you drag the mouse over the image from one corner to the other.
The first value is x, and the second value is y.
href: This attribute specifies the URL of the page or resource that should be loaded when the hotspot is clicked.
<body>
<img src="./image/Image.jpg" alt="office" usemap="#map" width="50%">
<map name="map">
<area shape="rect" coords="0,0,200,225" href="leptop.html" alt="Computer">
<area shape="rect" coords="245,0,355,170" href="mobile.html" alt="Phone">
<area shape="circle" coords="300,300,40" href="coffe.html" alt="Coffee">
</map>
</body>
In the above example, when we click on the area of the laptop in this image, the image of the laptop will appear because we have linked the HTML file of the image of the laptop, just like when we click on the phone, the image of the phone will open, and if we click on coffee, the image of coffee will open. In short, one file redirects to another file.
Conclusion
All the tags given above have their own merits, you can enhance your website by using them. As you practice, you will gain knowledge of all these tags. We are sure you would have liked this article.
If you have any questions about this article or anything related to web development, you can ask them using the question box given below.