4 ms·
I love writing modern HTML, and using all the cool new tags and attributes to write content that is semantically correct. For eg, I found out recently about the
by captn3m0 6y ago
I love writing modern HTML, and using all the cool new tags and attributes to write content that is semantically correct. For eg, I found out recently about the <aside> tag, which works great alongside the click-to-open nature of the <summary/details> tags resulting in a semantically accurate aside tag that my readers can click-to-read. Works great as a in-content footnote of sort. Demo on my site[0].
What I've realized recently is that there are fewer people left with the ability to write raw HTML these days. Most content platforms these days either hide away raw HTML, or disallow it (like Medium) - resulting in users that can't use these features.
While writing in markdown is great, it only covers the lowest-common-denominator of HTML, and we need modern editors to embrace these new HTML features somehow.
[0]: https://captnemo.in/monopoly-deal/ https://captnemo.in/monopoly-deal/
- lxe 6y ago<aside> is from the era from about a decade ago when semantic HTML was all the rage along with <article>, <main>, <footer>, <header>, <figure>, etc... Nowadays I've noticed the focus has greatly shifted onto parts of HTML that are relevant to web application development.
- etripe 6y agoDamn, you just made me realise HTML5 is indeed that old.
- uryga 6y agousing <details> for popup-footnotes is a great idea! for anyone interested, here's a simple implementation (pure html+css): <style> details.footnote { display: inline; position: relative; } /* hide details arrow */ details.footnote > summary { list-style: none; } /* firefox */ details.footnote > summary::-webkit-details-marker { display: none; } /* webkit */ details.footnote > summary { color: blue; cursor: pointer; } details.footnote > .footnote-content { position: absolute; background: white; border: 1px solid lightgray; padding: 1em; min-width: 40ch; } </style> Lorem ipsum dolor sit amet <details class="footnote"> <summary>[1]</summary> <div class="footnote-content">This was once revealed to me in a dream.</div> </details> consectetur adipiscing elit, sed do<br> eiusmod tempor. Ut enim ad minim veniam, quis nostrud exercitation<br> ullamco laboris nisi ut aliquip ex ea commodo consequat. edit: added webkit hack; thanks @timvdalen!
- timvdalen 6y agoHah, that's a nice application. You're missing a: details.footnote > summary::-webkit-details-marker { display:none; } For webkit, though!