10 Most Powerful HTML Elements & Attributes You Need To Know

1. Highlight Important Text with <mark> Element

If you want to highlight a specific text in any of the sentences, within your HTML document, then wrap that text with the <mark> tag. By default,

Texts that are encapsulated by the <mark> tags are rendered with the yellow background by HTML. However you can customize that yellow highlighter with the CSS.

<p>The <mark>quick brown fox</mark> jumps over the lazy dog.</p>

Result

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 

The <details> and <summary> elements in HTML5 are used together to create interactive content that can be shown or hidden by the user. You can achieve this content without the help of javascript

• The <details> element works as a container that holds some information, which can be opened or closed by clicking on it.
• The <summary> element is used inside the <details> to define a title or heading that the user can click on to open or close the hidden content.

For example, when the user clicks on the summary, the hidden details inside the <details> tag will appear. This makes it easy to hide extra information until it’s needed, helping to keep the page clean and organized.

<details>
  <summary>Shipping Policy</summary>
  <p>Free shipping is available on orders over $50.</p>
</details>

Result

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> Elements

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 helpful for websites like e-commerce platforms, where product images and reviews are loaded only when users scroll near them. Similarly, in social media feeds, posts are loaded as users scroll. It is also useful for media-rich sites like blogs and portfolios, where managing large visuals efficiently is important.

Lazy loading is beneficial for websites like e-commerce

4. Provide Auto-Suggestions for Input Fields by <datalist> Element

The <datalist> element makes form input fields more user-friendly. It gives users two options for entering data. Firstly, they can choose from a dropdown list of predefined options. Secondly, they can type their own value if none of the options fit. As a result, the form becomes more flexible and easier to use.

<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>

Result

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

The <output> element in HTML is used to display the results of a calculation or any value that is generated through user input or a script. In simple terms, it shows dynamic results directly on the webpage without needing to refresh or navigate to another page.

It Updates Dynamically: The content inside <output> can change automatically as the user interacts with the page. This means no page refresh is required.

It’s Usually Used with Forms: Often, the <output> element is paired with form elements like text fields, checkboxes, or sliders. As a result, it creates a smoother and more interactive user experience.

<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>

Result

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>

Result

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” attributes

To keep your website secure, use target attribute with the value “_blank” to open links in a new tab, it’s also important to include the rel attribute with the values noopener and noreferrer.

The noopener attribute helps to protect your website by stopping the new tab from changing or controlling the original page. It does this by blocking access to a property called window.opener that could let the new tab interact with 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

The best way to improve how users interact with your website is by adding links they can use to email, call, or text you. By using special protocols in the <a> tag’s href attribute, you can create clickable links that let users contact you quickly and easily.

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.

However, 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.