HTML is the foundation of web development. While most developers are familiar with the basic elements like
<div>, <p>, and <img&g...
For further actions, you may consider blocking this person and/or reporting abuse
Great article! Another cool feature to explore is the
<template>tag. It lets you define reusable HTML that you can add to the DOM later with JavaScript, without rendering it right away. Perfect for dynamic content.If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Dialogue elements are cool in theory, but I've always found them a bit inconvenient to style in practice. There's no way for the CSS to query how they're being shown, so without weird hacks, getting them to play nicely with both
show()andshowModal()is a bit of a pain.EDIT: After a bit more digging, I figured out that
:modalis a thing now, so that should (hopefully) make using dialogues a lot more doable than I remember. Now all it's missing is anopenevent.Just use a
MutationObserveron theopenattribute?That should just be a built-in feature though. It's not like we couldn't already build your own pop-over dialogues before
<dialog>, but the point is to provide that out of the box.Might want to proofread this 👍
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Sure Jon you can definitedly do that!! I'll be happy if you read my blog.
Well, all the tags you've added are invisible - making the post essentially unreadable
EDIT: I see you've fixed it 👍
Thank s for your feedback!
Jeez, HTML has some good features, but sometimes they can be ugly and difficult to style! Great piece regardless, thanks for this!
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Great to hear that! Do subscribe my YouTube Channel
Great job Mr Safdar👌
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Thanks Sanwal❤
I need some body who can teach me html, css +2439067658762
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that Ibrahim❤ do subscribe my YouTube Channel. I can do that you can share your details @ 00alisafdar@gmail.com. I can teach you that.
I have Just created an account and read this, It was my first reading 😂😂
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that❤. Do subscribe my YouTube Channel
This is useful.
esp. Details and Summary Elements.
Thanks.
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that❤ do subscribe my YouTube Channel
Amazing post, thanks!
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that❤ do subscribe my YouTube Channel
As frontend developer, I use picture tag when I have different images to display on across different screen sizes
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
also, the interface can be much cleaner now. You don't have to type some obscure mess like
document.getElementById('myDialog').showModal(), just write myDialog.showModal().also, dialog elements can be closed by simply set the inner form method to "dialog" by using the method or the form-element's formmethod prop. So you can do something like this:
<dialog id="mydialog">
<form method="dialog">
complex form here...
<button id="ok" >OK</button>
</form>
</dialog>
no boilerplate needed.
that dialouge feature was really helpful to give a popup when a user exits my website
Great to hear that! Do subscribe my YouTube Channel
Great article sir! 😀👍 Didn't know about these elements before!
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that Brandon❤ do subscribe my YouTube Channel
Thank you for the post <3
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Glad to hear that❤
I'm gonna use dialogue, data and output a lot. I knew picture element, details & summary though. Thanks for sharing 😊
If you found my content helpful or interesting, and you’d like to show your appreciation, why not buy me a coffee? It’s a small gesture that goes a long way in helping me keep creating more content for you.
Just click the button below to support:
Subscribe to my YouTube Channel if you find it helpful! Subscribing is free, and it will motivate me to stay active here. 😊
In my opinion, the
<data>element is pretty useless.It's poorly defined. It doesn't have any way of declaring what the
valuemeans in that context. So, web crawlers can't parse any useful information from them.It could be useful if you want someone to scrape data from your site, if you have documented somewhere what the value means. But, if you want to make your data available, just make an API; don't make people scrape your site.
There is a related tag, though, that's better defined and much more useful: the
<time>tag.The Output Element example can be further simplified by eliminating the use of
parseInt(input.value)in favor ofinput.valueAsNumber:You can do this with a single img tag using the sizes and srcset attributes. Picture is used when you also want to change the aspect ratio of the image.
Well, but there's much you can achieve with React JSX and some built in Next.js tags.
The most important thing here is also to emphasize how is important to use semantic HTML , make the code more readable
Did chatgpt write this?