21 HTML Tips You Must Know About
Tags: webdev, beginners, html, coding
Published: 2024-07-08 12:02:57

In this post, I’ll share 21 HTML Tips with code snippets that can boost your coding skills.

Let’s jump right into it.

**Creating Contact Links**

Create clickable email, phone call, and SMS links using HTML:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/671y73vlhf29knj6mlin.jpeg)
**Creating Collapsible Content**

You can use the `<details>` and `<summary>` tags, when you want to include collapsible content on your web page.

The `<details>` tag creates a container for hidden content, while the `<summary>` tag provides a clickable label to toggle the visibility of that content.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4tnblmg1slwz90n6iqq.jpeg)


**Utilizing Semantic Elements**

Choose semantic elements over non-semantic elements for your websites. They make your code meaningful and improve structure, accessibility, and SEO.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds0dcd7pfik9q1dno17t.jpeg)

**Grouping Form Elements**

Use the `<fieldset>` tag to group related elements in a form and the `<legend>` tag with `<fieldset>` to define a title for the `<fieldset>` tag.

This is useful for creating more efficient and accessible forms.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkkzx35rvvynl54vrs27.jpeg)

**Enhancing Dropdown Menus**

You can use the `<optgroup>` tag to group related options in a `<select>` HTML tag. This can be used when you are working with large dropdown menus or a long list of options.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o31oqy01wpg4eochdjqu.jpeg)

**Improving Video Presentation**

The poster attribute can be used with the `<video>` element to display an image until the user plays the video.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdxtbe3krjw7hjsanhre.jpeg)

**Supporting Multiple Selections**

You can use the multiple attribute with the `<input>` and `<select>` elements to allow users to select/enter multiple values at once.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6of9ov80augi0tuyq3ck.jpeg)

**Display Text as Subscript and Superscript**

The `<sub>` and `<sup>` elements can be used to display the text as subscript and superscript respectively.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xf0yhjhhg6vv1o1au336.jpeg)

**Creating Download Links**

You can use the download attribute with the `<a>` element to specify that when a user clicks the link, the linked resource should be downloaded rather than navigated to.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s20a0thir11zarijp2j1.jpeg)

**Defining Base URL for Relative Links**

You can use the `<base>` tag to define the base URL for all relative URLs in a web page.
This is handy when you want to create a shared starting point for all relative URLs on a web page, making it easier to navigate and load resources.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6mv8bfwavl5scs6a394.jpeg)

**Control Image Loading**

The loading attribute with the `<img>` element can be used to control how the browser loads the image. It has three values: “eager”, “lazy”, and “auto”.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/osg3t6x058g1j4ulmdv0.jpeg)

**Managing Translation Features**

You can use the translate attribute to specify whether the content of an element should be translated by the browser’s translation features.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4aiw160f2p9shy4arx4.jpeg)

**Setting Maximum Input Length**

By using the maxlength attribute, you can set the maximum number of characters entered by the user in an input field.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wq5mx7otm9ngtqy3hwgp.jpeg)

**Setting Minimum Input Length**

By using the minlength attribute, you can set the minimum number of characters entered by the user in an input field.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7an9qfkab9o517fzig3.jpeg)

**Enabling Content Editing**

Use the contenteditable attribute to specify whether the element’s content is editable or not.

It allows users to modify the content within the element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nhmj9s5evu4ekkbs0dj.jpeg)

**Controlling Spell Checking**

You can use the spellcheck attribute with `<input>` elements, content-editable elements, and `<textarea>` elements to enable or disable spell-checking by the browser.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tml5h2s4elabhrlg4bfq.jpeg)

**Ensuring Accessibility**

The alt attribute specifies an alternate text for an image if the image cannot be displayed.

Always include descriptive alt attributes for images to improve accessibility and SEO.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anqhca412w6i8y03djnq.jpeg)

**Defining Target Behavior for Links**

<u>`You can use the target attribute to specify where a linked resource will be displayed when clicked.`</u>

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqtvp8eufa9rn412p9jt.jpeg)

**Providing Additional Information**

The title attribute can be used to provide additional information about an element when a user hovers over it.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwn6m21hrh1xqn4rjsnw.jpeg)

**Accepting Specific File Types**

You can use the accept attribute to specify the types of files accepted by the server (only for file type). This is used with the `<input>` element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mgdwty0z5b29po44incw.jpeg)

**Optimizing Video Loading**

You can make video files load faster for smoother playback by using the preload attribute with `<video>` element.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o0coh3c4vqbpzgd22fs.jpeg)

That's all for today.

I hope it was helpful.

Thanks for reading.

Keep Coding!!