"Powerful Tricks and Features About HTML You Should Know"
#html#attribute#web#webdev
Mahia Momo

Mahia Momo @mahiamomo

Joined:
Aug 2, 2024

"Powerful Tricks and Features About HTML You Should Know"

Publish Date: Dec 31 '24
1 2

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

Comments 2 total

Add comment