DEV Community

Cover image for "Powerful Tricks and Features About HTML You Should Know"
Mahia Momo
Mahia Momo

Posted on

"Powerful Tricks and Features About HTML You Should Know"

#html #attribute #web #webdev

HTML: The Backbone of the Web

HTML is the king of web development. No matter which technology you use, everything ultimately converts into HTML for the browser. The code displayed in the browser is always HTML, making it the foundation of the web.With its simplicity and versatility, HTML allows you to build, modify, and present web content effortlessly. Understanding and utilizing its core features can unlock a world of possibilities for your web projects.

Here are some amazing HTML tricks and features :

1.Start Attribute:

Code: 
 <html lang="en">
    <head>
    </head>
    <body style="font-family:'Inter',sans-serif">
        <!---- start attribute -->
        <ol start="7">
            <li>Javascript 🔥</li>
            <li>Python 🤩</li>
            <li>PHP❤️</li>
        </ol>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

2.Contenteditable Attribute:

Code: 
        <!-- 'contenteditable' attribute -->

        <div contenteditable="true">HTML can hack NASA !</div>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

3.Mark Element:

Code: 
<!-- 'mark element'-->
         <p>HTML can hack <mark>NASA</mark> !</p>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

4.Details & Summary Element:

Code: 
<!-- 'details' and 'summary' element -->
         <details>
            <summary>You can Support Mahia Momo</summary>
            <p>Follow me on Linkedin</p>
            <p>Follow me on Github</p>
         </details>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

5.Accept Attribute:

Code: 
         <!-- 'accept' attribute -->
          <input type="file" accept=".pdf"/>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

6.Poster Attribute:

Code: 
<!-- 'poster' attribute -->

        <video src="https://youtu.be/7lmoLxbUENM?si=SzrFXlw5KaEdB8m6" style="width: 150px" poster="https://i.pinimg.com/736x/65/69/b8/6569b84671e254fb3531076d4fdcb84b.jpg">
         Video
        </video>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

7.KBD Element:

Code: 
 <!-- 'kbd' element -->
         <div>Press<kbd>ctrl</kbd> & <kbd>tab</kbd> to change browser tab </div>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

8.ABBR Element:

Code: 
        <!-- 'abbr' element -->
         <abbr title="I am Mahia Momo">I am Mahia Momo🚀</abbr>
Enter fullscreen mode Exit fullscreen mode
Output:

Image description

Top comments (2)

Collapse
 
anmamun0 profile image
AN.Mamun •

interesting HTML tags

Collapse
 
mahiamomo profile image
Mahia Momo •

thanks

Read next

devmercy profile image

What were your 2024 goals and resolutions?

Mercy -

hamzakhan profile image

🌐 Top Backend Programming Languages to Learn in 2025 🚀

Hamza Khan -

abtosoftware profile image

.NET Development and Localization for JustAnswer – case study

Abto Software -

_8209193a4901fb1d7cb53 profile image

VTable-Gantt：Powerful and high-performance open-source Gantt chart component

刘方方 -