21 HTML Tips You Must Know About

1. Creating Contact Links

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

<!-- Email link -->
<a href="mailto:name@example.com"> Send Email </a>

<!-- Phone call link -->
<a href="tel:+1234567890"> Call Us </a>

<!-- SMS link -->
<a href="sms:+1234567890"> Send SMS </a>

2. Creating Collapsible Content

Use <details> and <summary> tags to include collapsible content:

<details>
  <summary>Click to expand</summary>
  <p>This content can be expanded or collapsed.</p>
</details>

3. Utilizing Semantic Elements

Choose semantic elements to improve structure, accessibility, and SEO.

4. Grouping Form Elements

Use <fieldset> and <legend> to group related elements in a form:

<form>
  <fieldset>
    <legend>Personal details</legend>
    <label for="firstname">First name:</label>
    <input type="text" id="firstname" name="firstname" />
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" />
    <label for="contact">Contact:</label>
    <input type="text" id="contact" name="contact" />
    <input type="button" value="Submit" />
  </fieldset>
</form>

Use the <optgroup> tag to group related options:

<select>
  <optgroup label="Fruits">
    <option>Apple</option>
    <option>Banana</option>
    <option>Mango</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option>Tomato</option>
    <option>Broccoli</option>
    <option>Carrot</option>
  </optgroup>
</select>

6. Improving Video Presentation

Use the poster attribute to display an image until the video plays:

<video controls poster="image.png" width="500">
  <source src="video.mp4" type="video/mp4" />
</video>

7. Supporting Multiple Selections

Allow multiple values with the multiple attribute:

<input type="file" multiple />
<select multiple>
  <option value="java">Java</option>
  <option value="javascript">JavaScript</option>
  <option value="typescript">TypeScript</option>
  <option value="rust">Rust</option>
</select>

8. Display Text as Subscript and Superscript

Use <sub> and <sup> to display text as subscript and superscript.

9. Creating Download Links

Use the download attribute for download links:

<a href="document.pdf" download="document.pdf"> Download PDF </a>

10. Defining Base URL for Relative Links

Use the <base> tag to define the base URL:

<head>
  <base href="https://shefali.dev" target="_blank" />
</head>
<body>
  <a href="/blog">Blogs</a>
  <a href="/get-in-touch">Contact</a>
</body>

11. Control Image Loading

Use the loading attribute to control image loading:

<img src="picture.jpg" loading="lazy">

12. Managing Translation Features

Use the translate attribute to specify if content should be translated:

<p translate="no">This text should not be translated.</p>

13. Setting Maximum Input Length

Use the maxlength attribute to set the maximum characters:

<input type="text" maxlength="4">

14. Setting Minimum Input Length

Use the minlength attribute to set the minimum characters:

<input type="text" minlength="3">

15. Enabling Content Editing

Use the contenteditable attribute to allow content editing:

<div contenteditable="true">You can edit this content.</div>

16. Controlling Spell Checking

Use the spellcheck attribute to enable or disable spell-checking:

<input type="text" spellcheck="true"/>

17. Ensuring Accessibility

Always include descriptive alt attributes for images:

<img src="picture.jpg" alt="Description for the image">

18. Defining Target Behavior for Links

Use the target attribute to specify link behavior:

<!-- Opens in the same frame -->
<a href="https://shefali.dev" target="_self">Open</a>

<!-- Opens in a new window or tab -->
<a href="https://shefali.dev" target="_blank">Open</a>

<!-- Opens in the parent frame -->
<a href="https://shefali.dev" target="_parent">Open</a>

<!-- Opens in the full body of the window -->
<a href="https://shefali.dev" target="_top">Open</a>

<!-- Opens in the named frame -->
<a href="https://shefali.dev" target="framename">Open</a>

19. Providing Additional Information

Use the title attribute to provide extra information:

<p title="World Health Organization">WHO</p>

20. Accepting Specific File Types

Use the accept attribute to specify accepted file types:

<input type="file" accept="image/png, image/jpeg" />

21. Optimizing Video Loading

Use the preload attribute to optimize video loading:

<video src="video.mp4" preload="auto">
  Your browser does not support the video tag.
</video>

Ref: devShefali - Medium