In this blog, we’ll explore 10 powerful tags and attributes.
<details> and <summary> for collapsible content sections.
<mark> for highlighting important text.
<base> for managing global link behavior.
Direct contact links (mailto:, tel:, sms:) for user interaction.
download attribute to enable direct file downloads.
rel="noopener noreferrer" for boosting security in external links.
<datalist> for auto-suggestions in input fields.
<output> for dynamic calculation results.
poster attribute for video thumbnails.
loading="lazy" for optimizing images and iframes.
1.<mark> Tag – Highlight Important Text
If you want to highlight a specific portion of text within your HTML document, wrap the text you want to highlight with the <mark> tag.
<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>The quick brown fox jumps over the lazy dog.
It helps to highlight search terms, Indicating Matches in Filtered Results, editorial comments and notes etc…
2. Create collapsible sections of content with <details> element
Without the need for JavaScript you can hide and show content dynamically with the help of <details> and <summary> element. <details> element acts as the container, while the <summary> element represents the clickable header.
<details>
<summary>Shipping Policy</summary>
<p>Free shipping is available on orders over $50.</p>
</details>Shipping Policy
Free shipping is available on orders over $50.
Great for FAQs, additional information, or optional details that don’t need to be visible by default.
3. Enable lazy loading for <img> and <iframe>
loading attribute on an <img> or on an <iframe> element, tells the browser to defer loading of images/iframes that are not visible until the user scrolls near them. This allows off-screen (non-critical) resources to load only if needed, helps to improve page load times and reduces the initial page loads, especially for pages with lots of media content.
<img src="image.jpg" alt="Lazy loading example" loading="lazy">
<iframe src="https://example.com" loading="lazy"></iframe>Lazy loading is beneficial for e-commerce websites to delay the loading of product images and reviews, for media-rich sites like blogs and portfolios to handle heavy visuals efficiently, and for social media feeds to dynamically load posts as users scroll.
4. Provide Auto-Suggestions for Input Fields by <datalist>
The <datalist> element helps to improve the process of form input fields by allowing the users to either select an option from a dropdown list or type their own value.
<label for="browsers">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>In this example, as the user starts typing in the input field, they’ll see the suggested options that match their input.
5. <output>Element for Displaying Calculation Results
You can add translate=”no” or translate=”yes” to any HTML element to control whether its content should be translated.
<form oninput="result.value=Number(a.value)+Number(b.value)">
<input type="range" id="a" value="50" /> +
<input type="number" id="b" value="25" /> =
<output name="result" for="a b">75</output>
</form>As users adjust the slider or type a new number, the calculation result is updated immediately.
6. Show Video Thumbnails Using the poster Attribute
You can add thumbnail for embedded videos in your web page using poster attribute.
<video controls poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>Specify the thumbnail image URL to poster attribute. The specified thumbnail.jpg will be shown until the video loads or starts playing.
7. <base> Element to Open Links in a
New Tab
If you have multiple links on your website that need to be opened in a new tab, you can simplify the process by using the <base> element. Instead of adding target=”_blank” to each individual link, set this attribute globally with the <base> element.
<head>
<base target="_blank">
</head>
<body>
<a href="https://example.com">Visit Example</a>
<a href="https://another.com">Visit Another</a>
</body>
This approach has some potential drawbacks. It can confuse users by opening too many tabs, difficult to track which tab they started in. Additionally, it may impact performance and accessibility, especially for users relying on keyboard navigation or screen readers.
8. Boost Security with rel=”noopener” and rel=”noreferrer”
To prevent security vulnerabilities while using target=”_blank” to open links in a new tab,it’s important to include the rel attribute with the values noopener and noreferrer.
The noopener attribute effectively blocks any malicious attempts to alter or control the original page by the newly opened tab by preventing access to the window.opener property of the original page.
The noreferrer attribute prevents the browser from sending the “Referer” header when navigating to the new page. This header usually contains the URL of the page where the user clicked the link. It ensures the linked page does not receive information about the original page.
<a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure Link</a>
Even though many modern browsers, such as Chrome and Firefox, now automatically apply noopener when using target=”_blank”, you still need to explicitly include noreferrer attribute if you want to block referrer information. Because noreferrer attribute is not applied automatically.
9. Direct Contact Links for Easy Communication
Best way to enhance user interaction on your website is by offering direct links for email, phone calls, and SMS. Using specific protocols in the <a> anchor tag’s href attribute, you can easily create links that allow users to contact you directly with just a click.
The three most commonly used protocols for this are:
sms: for text messages
mailto: for email
tel: for phone calls
<a href="mailto:contact@website.com?subject=Inquiry&body=Hello, I have a question about your services.">
Send an email
</a>
<a href="tel:+9876543210">
Make a call
</a>
<a href="sms:+9876543210?body=Hi, I’d like more information about your products.">
Send a text
</a>These protocols automatically open the user’s default email client, phone dialer, or messaging app, pre-filled with relevant information like your email address, phone number, or text content.
10. Use download attribute to Download files
By adding download attribute to your link you can allow the users to download the files directly, without navigating them to a file when a link is clicked.
<a href="path/to/file" download>Download</a>When the link is clicked, the file will be downloaded rather than opened in the browser.
Remember, the download attribute only works for files on the same website. If the file is from another site, the browser will ignore the download option and might open the file instead, depending on the file type and browser settings.