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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
anmamun0 profile image
AN.Mamun

interesting HTML tags

Collapse
 
mahiamomo profile image
Mahia Momo

thanks

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay