Welcome folks!

Today I'm gonna give five tips for HTML and I hope you love these tips. Let's start!

---

Tip 1: Create a dropdown menu easily

<details>
  <summary>Click Me!</summary>
  <p>Hello! I am a looooooonnnnngggggg content</p>
</details>

You can create a dropdown menu with no need javascript. And you can see browser support below. Here is a demo for you :

Browser Support

Element	Chrome	Edge	Firefox	Safari	Opera
details	86-88	85	81-82	TP	85

Tip 2: Let's create a selectable input

<label for="countries">Choose your country from the list:</label>
<input list="countries" name="country" id="country">

<datalist id="countries">
  <option value="United States">
  <option value="Sweden">
  <option value="Canada">
  <option value="Turkey">
  <option value="Germany">
</datalist>

Here is a demo for you :

Browser Support

Element	Chrome	Edge	Firefox	Safari	Opera
datalist	86-88	85	81-82	TP	70

Tip 3: Figure Element

Normally, developers are creating img areas such that :

<img src="path/to/image" alt="About image" />
<p>Hi! I'm a text under the image. </p>

This is the wrong option we shouldn't use and google also doesn't like it in this way. That's why we need to use the figure element in these cases :

<figure>
    <img src="path/to/image" alt="About image" />
    <figcaption>
        <p>Hi! I'm a text under the image. </p>
    </figcaption>
</figure>

Here is a demo for you :

Browser Support

Element	Chrome	Edge	Firefox	Safari	Opera
figure	86-88	85	81-82	TP	70

Tip 4: Editable Paragraph

Thanks to this attribute, you can edit paragraphs;

<p contenteditable="true">You can edit me! Click me!</p>

Here is a demo for you :

Browser Support

Attribute	Chrome	Edge	Firefox	Safari	Opera
contenteditable	86-88	85	81-82	TP	70

Tip 5: Input Pattern

You can add 'regular expression' to your inputs for validation.

<form>
  <label for="username">
    Username
    <p> 
      (letters and numbers only, no punctuation or special characters)
    </p>
  </label>

  <br>

  <input name="username" id="username" placeholder="Type and press enter" pattern="[A-Za-z0-9]+">
</form>

Here is a demo for you :

Browser Support

Attribute	Chrome	Edge	Firefox	Safari	Opera
pattern	86-88	85	81-82	TP	70

Conclusion

Thanks for reading through these tips. Hope you enjoyed it. Have a nice day!