Writing HTML by hand
simblob.blogspot.com
Writing HTML by hand
1–10 of 76 posts
Re: Writing HTML by hand
#2I write HTML by hand and one thing that's come in handy is HTML's built-in functionality for author-defined custom elements. We use ICON-LIST which wraps a UL and optionally an SVG if you don't want to use the default checkmark, and STAR-RATING which displays a rating out of 5 SVG stars. They aren't my most-used, that's probably P or A or LI or DIV or SPAN by number, but they're some of the most important I use frequently!
Re: Writing HTML by hand
#3 is interesting there: it’s an SVG element. SVG and MathML are fun in HTML syntax, because it becomes a little more XMLly when parsing them: XML-style self-closing tags () actually work, and there’s no such thing as a void element (e.g.
which has no closing tag because it has no contents). This can lead to fun problems in overly-simplistic filtering, e.g. alert() is a syntax error in SVG or in XML-syntax HTML, is swallowed and does nothing inside SVG-in-HTML (it’s an empty script tag followed by a text node and an extraneous end tag), and alerts inside HTML (the trailing slash in the start tag reports a syntax error but they don’t do anything). This is ripe for security issues from smuggling stuff. There’s also fun like whether alert("<") alerts “In the rest of HTML syntax, adding a trailing slash does exactly nothing—it’s just ignored by the parser¹. For my part, I firmly recommend against writing it if you’re using HTML syntax, because it gives the false impression that it does something; rather, there’s a hard-coded list of elements that have no contents and thus no closing tag. It’s not uncommon to find people writing their />, but it’s practically never consistently applied, e.g.:
which has no closing tag because it has no contents). This can lead to fun problems in overly-simplistic filtering, e.g. alert() is a syntax error in SVG or in XML-syntax HTML, is swallowed and does nothing inside SVG-in-HTML (it’s an empty script tag followed by a text node and an extraneous end tag), and alerts inside HTML (the trailing slash in the start tag reports a syntax error but they don’t do anything). This is ripe for security issues from smuggling stuff. There’s also fun like whether alert("<") alerts “In the rest of HTML syntax, adding a trailing slash does exactly nothing—it’s just ignored by the parser¹. For my part, I firmly recommend against writing it if you’re using HTML syntax, because it gives the false impression that it does something; rather, there’s a hard-coded list of elements that have no contents and thus no closing tag. It’s not uncommon to find people writing their />, but it’s practically never consistently applied, e.g.:
← ²
← Where’s my /, hmm?
HTML/XML polyglot is a surprisingly thorny issue, and my experience is that a lot of JavaScript libraries make assumptions that don’t hold in XML-syntax documents and thus won’t work properly. In practice, almost no one uses XML syntax for anything new, and foreign content (SVG/MathML) is the last remnant of widely-used XML in HTML.
—⁂—
¹ This is a very slight simplification. Look into the self-closing flag in the spec if you’re interested in the details.
² I think that wrong capitalisation of charSet comes from Next.js, because every time I’ve seen it, Next.js has been present. It has irritated me for years, but never quite enough to dig in and find the source and beg them to fix it. No idea if Next.js supports using XML-syntax HTML, but if it does, that meta charSet will be invalid, because XML syntax is case-sensitive and it’s supposed to be charset—though I think it will still work in practice because of the charset detection algorithm actually working on the bytes, not the XML/HTML syntax, and being case-insensitive. And if Next.js doesn’t support using XML syntax, I wish they’d stop generating trailing slashes, too, because they’re just a waste of time.
Re: Writing HTML by hand
#4My most used tag is DIV, because I write more games/apps than docs. By hand using Vanilla JS and HTML.
Re: Writing HTML by hand
#5I do all the https://wordsandbuttons.online/ by hand, and this is my top 10:
2527 p
2047 a
1318 span
1078 td
918 b
537 tr
531 sub
499 br
401 i
393 tableRe: Writing HTML by hand
#6For many purposes it is needlessly verbose to write html by hand. Thats why markdown became popular.
But if more people do it and report their usage patterns one could maybe create a "super-markdown", i.e., the closest you could get to mapping html flexibility without the annoying XML verbosity.
Re: Writing HTML by hand
#7For many purposes it is needlessly verbose to write html by hand. Thats why markdown became popular. But if more people do it and report their usage patterns one could maybe create a "super-markdown", i.e., the closest you could get to mapping html flexibility without the annoying XML verbosity.
> the closest you could get to mapping html flexibility without the annoying XML verbosity
Aka SGML.
Though while you can hide those away in an external DTD, SGML of course needs lots of markup declaration ([1]) for HTML "void" (empty) elements, tag inference, and enumerated attribute short forms, and then still more for markdown short references.
Re: Writing HTML by hand
#8is interesting there: it’s an SVG element. SVG and MathML are fun in HTML syntax, because it becomes a little more XMLly when parsing them: XML-style self-closing tags ( ) actually work , and there’s no such thing as a void element (e.g. which has no closing tag because it has no contents). This can lead to fun problems in overly-simplistic filtering, e.g. alert() is a syntax error in SVG or in XML-syntax HTML, is sw…
Yeah the trailing slash cargo cult just goes to show the author has no idea what he/she is doing. Even more pointless is a pretentious space before the slash. It appears many extant uses of the bogus slash result from WordPress filters and their fragile nature (never change a running WP system aka WP trainwrecks) rather than manual insertion.
Re: Writing HTML by hand
#9I write HTML by hand and one thing that's come in handy is HTML's built-in functionality for author-defined custom elements. We use ICON-LIST which wraps a UL and optionally an SVG if you don't want to use the default checkmark, and STAR-RATING which displays a rating out of 5 SVG stars. They aren't my most-used, that's probably P or A or LI or DIV or SPAN by number, but they're some of the most important I use frequ…
Are you talking about web components?
Re: Writing HTML by hand
#10I do all the https://wordsandbuttons.online/ by hand, and this is my top 10: 2527 p 2047 a 1318 span 1078 td 918 b 537 tr 531 sub 499 br 401 i 393 table
Do you use a particular JS library for the visualizations? They look great!