7 cases where we can use HTML instead of CSS

Jyotishman Saikia - Aug 11 '21 - - Dev Community

1 Hide an element

Yes! you read it right. We can hide an element using HTML. Using the hidden attribute we can hide an element.
Example-

<p hidden> Hello! I am a hidden paragraph </p>
Enter fullscreen mode Exit fullscreen mode

2 Word Break

We can break a word at any position we want by using the <br> or <wbr> tag according to our usecase.
Example-

<p> Hello! I am a <br> broken text </br> </p>

Enter fullscreen mode Exit fullscreen mode

3 Accordion

We can create an accordion without writing a line of css or javascript. Using the HTML <details> and <summary> tag we can create an accordion.

Example-

<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>

Enter fullscreen mode Exit fullscreen mode

4 Progress Bar

Using the HTML <progress> tag we can show a progress without css or javascript

Example-

<progress id="file" value="32" max="100"> 32% </progress>

Enter fullscreen mode Exit fullscreen mode

5 Color Picker

Using the HTML <input type="color"> tag we can show a color picker and get its value.

Example-

  <input type="color" value="#ff0000">

Enter fullscreen mode Exit fullscreen mode

6 Delete/Underline Text

Using the HTML <del> & <ins> tag we can strike text and underline text.

Example-

<p>My name is <del>jyotish</del> <ins>jyotishman/ins>!</p>

Enter fullscreen mode Exit fullscreen mode

7 Center text

We can center a text without using CSS. Using the HTML align attribute we can give values like- left, center or right.

Example-

<p align="center">Hello! I am a center text </p>
Enter fullscreen mode Exit fullscreen mode

If you liked my content you can follow me on twitter for more such content-

https://twitter.com/frontend_jsx

. . . . . . . . . . . . . . . . . . . . .