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
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.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.Might want to proofread this 👍
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!
Great to hear that! Do subscribe my YouTube Channel
Great job Mr Safdar👌
Thanks Sanwal❤
I have Just created an account and read this, It was my first reading 😂😂
Glad to hear that❤. Do subscribe my YouTube Channel
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
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.
I need some body who can teach me html, css +2439067658762
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.
This is useful.
esp. Details and Summary Elements.
Thanks.
Glad to hear that❤ do subscribe my YouTube Channel
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.Great article sir! 😀👍 Didn't know about these elements before!
Glad to hear that Brandon❤ do subscribe my YouTube Channel
Thank you for the post <3
Glad to hear that❤
Amazing post, thanks!
Glad to hear that❤ do subscribe my YouTube Channel
Subscribe to my YouTube Channel if you find it helpful! Subscribing is free, and it will motivate me to stay active here. 😊
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.
The Output Element example can be further simplified by eliminating the use of
parseInt(input.value)in favor ofinput.valueAsNumber:The most important thing here is also to emphasize how is important to use semantic HTML , make the code more readable
Well, but there's much you can achieve with React JSX and some built in Next.js tags.
As frontend developer, I use picture tag when I have different images to display on across different screen sizes
I'm gonna use dialogue, data and output a lot. I knew picture element, details & summary though. Thanks for sharing 😊
Did chatgpt write this?