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: 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

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

Top comments (2)

Collapse
 
anmamun0 profile image
AN.Mamun

interesting HTML tags

Collapse
 
mahiamomo profile image
Mahia Momo

thanks

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay