DEV Community

Sagar Kumar
Sagar Kumar

Posted on

20 HTML Tips You Must Know About

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:

<!-- 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>
Enter fullscreen mode Exit fullscreen mode

Creating Collapsible Content
You can use the and 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.

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

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

HTML semantic and non-semantic elements

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.

<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>
Enter fullscreen mode Exit fullscreen mode

Enhancing Dropdown Menus
You can use the tag to group related options in a HTML tag.

This can be used when you are working with large dropdown menus or a long list of 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>
Enter fullscreen mode Exit fullscreen mode

Improving Video Presentation
The poster attribute can be used with the 

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

Supporting Multiple Selections
You can use the multiple attribute with the and elements to allow users to select/enter multiple values at once.

<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>
Enter fullscreen mode Exit fullscreen mode

Next Post Continue....

Top comments (0)