HTML tips you won’t find in most tutorials
Escape the vendor-locked in edge-runtime!
Sevalla is the home to your web projects. Host and manage your applications, databases, and static sites in a single, intuitive platform.
HTML is just for building blocks on the web page. Right? Well, modern HTML is way more than that actually. In this article I will show some lesser-known, yet super useful HTML features.
Let’s get started!
1. The meter element.
You can use it to display quantities. No need for CSS or JavaScript. You need to define min and max attributes, which represent the boundaries of the element. Additionally, define the low/optimum/high attributes and the actual value for the element and you’re good to go. Let’s see how it looks:
2. The <optgroup> element
If your select list has become too long and messy, you can use these optgroup elements to add some structure. Check this out:
Much better, right?
3. Email, call, and SMS links
You probably know you can use links to open email and call clients, but did you know you can open the default SMS app on your phone with a simple HTML link?
Well, you can. Here’s how:
<a href="mailto:{email}?subject={subject}&body={content}">
Send us an email
</a>
<a href="tel:{phone}">
Call us
</a>
<a href="sms:{phone}?body={content}">
Send us a message
</a>
4. The datalist element
This feature feels like you need a JavaScript library and a bunch of custom code and some API endpoint, but you can achieve it with just one HTML element. Let’s take a look:
5. The details element
Last, but definitely not the least. The details element is one of the most useful elements. Especially in situations when we don’t have access to CSS and JavaScript.
In GitHub repositories, for example. It is works almost like an accordion. Let me show you the code, and how it looks.
Here’s an example of code:
<details>
<summary>
Click me to see more details
</summary>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut eum perferendis eius. Adipisci velit et similique earum quas illo odio rerum optio, quis, expedita assumenda enim dicta aliquam porro maxime minima sed a ullam, aspernatur corporis.
</p>
</details>
Here’s how it looks when closed:
This is how it looks after clicking on it:
Your input needed!
I’ve been planning out the next batch of posts, and I’d love to get your input.
What topics, tutorials, or deep dives would you like to see more of? Send me a DM to let me know!
Thanks for reading!
See you next Saturday.