DEV Community

Cover image for Know these HTML Tags and Unlock the True Potential of Web Development
Glos Code
Glos Code

Posted on • Updated on

Know these HTML Tags and Unlock the True Potential of Web Development

HTML (Hypertext Markup Language) is the foundation of every web page on the internet. As a web developer, it's crucial to have a strong understanding of HTML and its tags. While most developers are familiar with common HTML tags like <div>, <p>, and <img>, there are several lesser-known tags that can greatly enhance your web development skills. In this article, we will explore some of these hidden gems that can unlock the true potential of web development.

1. <datalist>

The <datalist> tag is a powerful tool for creating interactive forms. It provides a list of predefined options that users can choose from when filling out a form field. By associating the <datalist> tag with an <input> field, you can offer suggestions to users as they type, improving the user experience. Here's an example:

<label for="fruit">Choose a fruit:</label>
<input type="text" list="fruits" id="fruit">
<datalist id="fruits">
  <option value="Apple">
  <option value="Banana">
  <option value="Orange">
  <option value="Strawberry">
  <option value="Watermelon">
</datalist>
Enter fullscreen mode Exit fullscreen mode

Output

Datalist Tag Output

2. <figure> and <figcaption>

When it comes to displaying images and captions, the combination of the <figure> and <figcaption> tags can be immensely useful. The <figure> tag represents self-contained content, such as an image, diagram, or code snippet. The <figcaption> tag, when used within a <figure> element, provides a caption or description for the content. This allows you to create visually appealing and accessible image captions. Here's an example:

<figure>
  <img src="image.jpg" alt="A beautiful landscape">
  <figcaption>This is a beautiful landscape.</figcaption>
</figure>
Enter fullscreen mode Exit fullscreen mode

Output

Figure and Figcaption Tag Output

3. <mark>

The <mark> tag is used to highlight or mark a specific portion of text within a larger document. It is particularly handy when you want to draw attention to specific keywords, search results, or important sections of text. Browsers typically render the marked text with a yellow background. Here's an example:

<p>
  Lorem ipsum dolor sit amet, <mark>consectetur adipiscing</mark> elit.
</p>
Enter fullscreen mode Exit fullscreen mode

Output

Mark Tag Output

4. <bdo>

The <bdo> (Bi-Directional Override) tag allows you to override the default text directionality of the document. It can be useful when you need to display text in a different direction, such as right-to-left. By default, HTML text is rendered left-to-right, but with <bdo>, you can change the directionality as needed. Here's an example:

<bdo dir="rtl">This text will be displayed right-to-left.</bdo>
Enter fullscreen mode Exit fullscreen mode

Output

BDO Tag Output

5. <template>

The <template> tag serves as a container for holding HTML content that will not be rendered when the page loads. It provides a way to define reusable HTML fragments that can be cloned and inserted into the document dynamically using JavaScript. This is particularly useful for creating dynamic web applications or generating repetitive content. Here's an example:

<template id="greeting">
  <p>Hello, <span class="name"></span>!</p>
</template>

<script>
  const greeting = document.getElementById('greeting');
  const clone = greeting.content.cloneNode(true);
  clone.querySelector('.name').textContent = 'John';
  document.body.appendChild(clone);
</script>
Enter fullscreen mode Exit fullscreen mode

Output

Template Tag Output

Conclusion

Expanding your knowledge of HTML tags beyond the basics can greatly enhance your web development skills. The lesser-known tags discussed in this article, such as <datalist>, <figure>, <figcaption>, <mark>, <bdo>, and <template>, offer unique functionalities that can make your web pages more interactive, accessible, and visually appealing. By exploring these tags and incorporating them into your projects, you can unlock the true potential of web development and take your skills to the next level. Happy coding!

Top comments (5)

Collapse
 
ant_f_dev profile image
Anthony Fung

MDN page links where examples are available:

datalist
figure, figcaption
mark
bdo
template

Collapse
 
desoga profile image
deji adesoga

It would be nice to see the visuals of some of the code snippets. A screenshot would be nice.

Collapse
 
gloscode profile image
Glos Code

Thanks for your feedback! I will make sure to edit this post soon.

Collapse
 
artydev profile image
artydev

Thank you 🙂

Collapse
 
fruntend profile image
fruntend

Сongratulations 🥳! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up 👍