What You Don't Know About HTML: 40 Lesser-Known Useful Tips

In HTML development, there are some very practical tips that are not widely known. In this article, I will share 40 HTML tips that most people don’t know. These tips cover various HTML tags and attributes, and can help you improve webpage development efficiency and user experience.

1. Create Contact Links

Use the <a> tag with mailto:, tel:, and sms: to create clickable contact links.

1
<a href="mailto:name@example.com">Send Email</a>
2
<a href="tel:+1234567890">Call</a>
3
<a href="sms:+1234567890">Send SMS</a>

2. Create Download Links

The download attribute of the <a> tag allows users to download files directly instead of opening them.

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

3. Control Link Opening Behavior

The target attribute controls how links open, such as in a new tab, the same window, or a specified frame. Values include _blank, _self, _parent, and _top.

1
<a href="https://example.com" target="_blank">Open in New Tab</a>

4. Create Collapsible Content

Use the <details> and <summary> tags to create simple collapsible content areas.

1
<details>
2
  <summary>Click to Expand</summary>
3
  <p>This is a collapsible content.</p>
4
</details>

5. Use Semantic Tags

Using semantic tags like <article>, <section>, <header>, and <footer> can enhance code readability and accessibility, and also benefit SEO.

6. Improve Dropdown Menus with <optgroup>

The <optgroup> tag is used to group options in dropdown menus, making them more organized.

1
<select>
2
  <optgroup label="Fruits">
3
    <option>Apple</option>
4
    <option>Banana</option>
5
  </optgroup>
6
  <optgroup label="Vegetables">
7
    <option>Tomato</option>
8
    <option>Carrot</option>
9
  </optgroup>
10
</select>

7. Improve Video Display

The poster attribute of the <video> tag can display a thumbnail before the video loads.

1
<video controls poster="thumbnail.jpg">
2
  <source src="movie.mp4" type="video/mp4" />
3
</video>

8. Optimize Video Loading

The preload attribute can set the video preload behavior to optimize loading speed.

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

9. Support Multiple Selections

The multiple attribute allows for multiple selections in file inputs and dropdown menus.

1
<input type="file" multiple />
2
<select multiple>
3
  <option value="java">Java</option>
4
  <option value="javascript">JavaScript</option>
5
</select>

10. Control Image Loading

The loading attribute can set the image loading behavior to lazy or eager.

1
<img src="image.jpg" loading="lazy" />

11. Ensure Accessibility

The alt attribute provides a description for images, improving accessibility and SEO.

1
<img src="image.jpg" alt="Description of the image" />

12. Use the <picture> Element for Responsive Images

The <picture> element allows you to load different images based on the display conditions of the device.

1
<picture>
2
  <source media="(min-width: 650px)" srcset="img_large.jpg" />
3
  <source media="(min-width: 465px)" srcset="img_medium.jpg" />
4
  <img src="img_small.jpg" alt="Description of the image" />
5
</picture>

13. Set Maximum Input Length

The maxlength attribute limits the maximum number of characters a user can input in a text field.

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

14. Set Minimum Input Length

The minlength attribute restricts the minimum number of characters a user must input in a text field.

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

15. Control Spell Checking

The spellcheck attribute enables or disables the browser’s spell-checking feature.

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

16. Accept Specific File Types

The accept attribute specifies the types of files that the file input should accept.

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

17. Customize Sliders

Using <input> with type="range" creates a slider input, allowing users to select a value within a range.

1
<input type="range" min="1" max="100" value="50" />

18. Organize Forms with <form> and <fieldset>

The <fieldset> tag groups form elements and <legend> defines a title for the group.

1
<form>
2
  <fieldset>
3
    <legend>Personal Information</legend>
4
    <label for="name">Name:</label>
5
    <input type="text" id="name" name="name" />
6
  </fieldset>
7
</form>

19. Enhance Form Accessibility with <label>

The <label> tag provides a description for form controls, making forms easier to use.

1
<label for="username">Username:</label>
2
<input type="text" id="username" name="username" />

20. Provide Suggestions with <datalist>

The <datalist> tag provides a dropdown suggestion list for an <input> element.

1
<input list="browsers" />
2
<datalist id="browsers">
3
  <option value="Chrome"></option>
4
  <option value="Firefox"></option>
5
  <option value="Safari"></option>
6
  <option value="Edge"></option>
7
  <option value="Opera"></option>
8
</datalist>

21. Allow Content Editing

The contenteditable attribute makes the content of an element editable, allowing users to modify text directly.

1
<div contenteditable="true">This content is editable.</div>

22. Provide Additional Information

The title attribute provides extra information when the user hovers over an element.

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

23. Create Horizontal Rules

Use the <hr> tag to create horizontal rules for visual separation of content.

1
<hr />

24. Display Subscript and Superscript Text

The <sub> and <sup> elements are used to display text as subscript and superscript.

1
<p>H<sub>2</sub>O</p>
2
<p>E=mc<sup>2</sup></p>

25. Use <base> to Define a Base URL

The <base> tag is used to define a base URL for all relative URLs.

1
<head>
2
  <base href="https://example.com" target="_blank" />
3
</head>
4
<body>
5
  <a href="/page">Page</a>
6
</body>

26. Use <meta> to Set the Viewport

The viewport setting in the <meta> tag optimizes the display of web pages on mobile devices.

1
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

27. Use <wbr> to Control Line Breaks

The <wbr> tag adds optional line break points within long words.

1
<p>
2
  This is a long word: su<wbr />per<wbr />ca<wbr />li<wbr />fra<wbr />gi<wbr />li<wbr />sti<wbr />cex<wbr />pi<wbr />ali<wbr />do<wbr />cious.
3
</p>

28. Display Code Snippets with <code> and <pre>

The <code> tag is used for inline code, and combining <pre> with <code> displays multi-line code snippets while preserving formatting.

1
<pre><code>
2
function helloWorld() {
3
  console.log("Hello, World!");
4
}
5
</code></pre>

29. Use <bdi> to Ensure Text Direction is Correct

The <bdi> (Bidirectional Isolation) tag ensures that the direction of text does not affect surrounding content, often used in cases with mixed languages.

1
<p>Username: <bdi>username123</bdi></p>

30. Use <noscript> to Provide Information for Users Without JavaScript Support

1
<noscript
2
  >Your browser does not support JavaScript. Some features may not work
3
  correctly.</noscript
4
>

The <noscript> tag is used to provide content that displays when JavaScript is disabled.

31. Use <b> and <strong> to Bold Text

Both <b> and <strong> are used to bold text, with <strong> indicating emphasis.

1
<p><b>Bold</b> text</p>
2
<p><strong>Important</strong> text</p>

32. Use <i> and <em> for Italics and Emphasis

The <i> and <em> tags are used for italic text and emphasis, with <em> indicating emphasis.

1
<p><i>Italic</i> text</p>
2
<p><em>Emphasized</em> text</p>

33. Use <kbd> to Represent User Input

The <kbd> tag represents user input.

1
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p>

34. Use <time> to Represent Specific Times or Dates

The <time> tag is used to represent a specific time or date.

1
<p>
2
  The meeting will be held on <time datetime="2024-07-19">July 19, 2024</time>.
3
</p>

35. Use <cite> to Reference Work Titles

The <cite> tag is used to reference the title of a work.

1
<p>My favorite novel is <cite>Harry Potter</cite>.</p>

36. Use <meter> to Represent Scalar Measurements Within a Known Range

The <meter> tag represents a scalar measurement within a known range, such as ratings.

1
<meter value="2" min="0" max="10">2 out of 10</meter>

37. Use <progress> to Show Task Progress

The <progress> tag is used to show the progress of a task.

1
<progress value="70" max="100">70%</progress>

38. Use <abbr> to Show Full Forms of Abbreviations

The <abbr> tag can add full forms to abbreviations, displaying a tooltip when the user hovers over the abbreviation.

1
<p><abbr title="Hypertext Markup Language">HTML</abbr> is a markup language.</p>

39. Use <mark> to Highlight Text

The <mark> tag is used to highlight text.

1
<p>This is an <mark>important</mark> notice.</p>

40. Use <dialog> to Open a Modal Dialog

Refer to this article: How to Use the HTML5 <dialog> Tag

Summary

This article shared 40 useful HTML tips. Mastering these HTML techniques can significantly enhance your web development efficiency and improve user experience. These tips cover everything from basic tag usage to advanced features. Hope you find this information helpful!