[HN Gopher] HTML Tags Memory Test
___________________________________________________________________
HTML Tags Memory Test
Author : robin_reala
Score : 115 points
Date : 2024-07-15 15:06 UTC (7 hours ago)
(HTM) web link (codepen.io)
(TXT) w3m dump (codepen.io)
| lucasoshiro wrote:
| Nice!
|
| But it doesn't recognize marquee as a valid tag
| codingdave wrote:
| It isn't valid. It is deprecated. Just like <blink>. But to be
| fair, the page doesn't specify which HTML standard we're
| working with.
| wongarsu wrote:
| HTML5 says it "must not be used by authors", but it still
| describes it as a tag, and describes what an implementation
| must conform to. I guess it's open to interpretation what
| "valid" means. But it is an HTML tag described by the HTML
| standard (both HTML5[1] and the WhatWG HTML spec [2])
|
| [1]: https://www.w3.org/TR/2011/WD-
| html5-20110405/obsolete.html#t...
|
| [2]:
| https://html.spec.whatwg.org/multipage/rendering.html#the-
| ma...
| TonyTrapp wrote:
| To be clear: Neither blink nor marquee were valid tags under
| any HTML standard. They always were non-standard browser
| extensions.
| mynameisvlad wrote:
| It's a "non-conforming feature" but it's still a part of
| WhatWG's standard as obsolete, including what it should
| render as:
| https://html.spec.whatwg.org/multipage/rendering.html#the-
| ma... and
| https://html.spec.whatwg.org/multipage/obsolete.html#the-
| mar...
| astura wrote:
| Because it's deprecated.
| leftnode wrote:
| It's funny, I've been working with HTML since 1998, and I got 36
| (though I do think <font> should've been allowed). I thought I'd
| do a lot better, but I guess you can accomplish _a lot_ with only
| a few tags, CSS, and some minimal JavaScript.
| alberth wrote:
| I got to 41.
|
| What helped is remembering an entire "block" of tags
|
| e.g. H1 would also mean H2-H6
|
| (I'll be the first to admit I really struggled to get to 41 and
| I too have been writing HTML by hand since 90s)
| taeric wrote:
| I struggled to get to 44.
|
| Mildly curious on what all I'm not using.
| alberth wrote:
| https://eastmanreference.com/complete-list-of-html-tags
| taeric wrote:
| Apologies, I knew where and how to look them up. And,
| seeing the list, only a few I did not know. Some I
| couldn't remember the abbreviation used in the tag. I
| just didn't have enough curiosity to actually look them
| up. :D
| mediumsmart wrote:
| I got 40 without "div" and tried 4 invalid ones.
| breck wrote:
| Here's another good leet sheet:
| https://cheatsheets.zip/html
| block_dagger wrote:
| Easy to cheat on this one - the "pattern" attribute on the input
| lists them all in the source, unobfuscated.
| KMnO4 wrote:
| This isn't an exam. You can also cheat with Google.
| joeyhage wrote:
| TIL I cheat at my job every day when I use Google or AI code
| assistants
| echoangle wrote:
| Yeah, and you can cheat in Minesweeper by inspecting the memory
| content of the game.
| Waterluvian wrote:
| Wait, there's more than just `<div>` ?!
| robin_reala wrote:
| Span gets you to 2.
| wongarsu wrote:
| Ah, you mean <div style="display:inline"></div>?
| robin_reala wrote:
| Even that's pushing the boat out a bit:
| https://shkspr.mobi/blog/2022/12/you-dont-need-html/
| Waterluvian wrote:
| > <plaintext> is also a real HTML element. It was
| deprecated in HTML 2 back in the mid-1990s. What's
| particularly interesting is that the element cannot be
| closed.
|
| > what's particularly interesting is that the element
| cannot be closed
|
| > the element cannot be closed
|
| > cannot be closed
|
| _THE END IS NIGH! REPENT!_
| joshmanders wrote:
| Ew gross, inline styles, let me fix that.
| <div class="inline-block">click me</div>
| mjhagen wrote:
| Spot the javascript dev
| gushogg-blake wrote:
| 71. Damn, some of them are obvious when you see them as well.
| miiiiiike wrote:
| I got to 57 before running out of tags that I use at least once a
| year. Had an "Oh yeah" moment when I realized that I'd forgotten
| html, head, title, body, script, style, and meta.
| grose wrote:
| I wonder what the most "obscure" tag is. My vote goes to <base>.
| gushogg-blake wrote:
| I was at least vaguely aware of <base>. No idea what <samp>,
| <track>, <dfn> or <del> do. Also apparently <ruby> is not for
| embedding Ruby scripts: https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/ru...
| grose wrote:
| <samp>, <var>, <kbd> are definitely weird ones. Maybe <kbd>
| would be more useful with some better default styling. I
| think <output> has some accessibility wins but I've never
| seen someone use it. <dfn> is a good pick, <abbr> is also up
| there with questionable semantic tags. <del> and <ins> are
| basically tailor-made for rendering diffs. <ruby> is really
| useful for Japanese, doing that styling manually would be a
| huge pain, but niche for sure. I'm happily surprised <small>
| survived. I still miss <center>.
| j1mmie wrote:
| <dfn> - I was going insane trying to remember that one! I
| tried <def>, <definition>, <define>...
| mj4e wrote:
| samp and kbd are good for marking up terminal sessions e.g.
| https://j4e.name/articles/marking-up-terminal-in-html/
| xigoi wrote:
| <dfn> is important when writing mathematical texts. I use it
| all the time.
| xnx wrote:
| Maybe more obscure now. This tag was extremely common in early
| web development.
| duskwuff wrote:
| Lots of candidates, but my vote would go to <figcaption>.
|
| Its sole purpose is to attach a caption to an image in <figure>
| - which basically no one uses.
| smitelli wrote:
| I started scrolling the list at MDN, saw that there is <portal>
| now, then closed the tab.
|
| https://developer.mozilla.org/en-US/docs/Web/HTML/Element/po...
| spencerchubb wrote:
| I got 38, and I didn't remember div until I got to #35 lol. The
| obvious ones can be deceptively tricky
| eggfriedrice wrote:
| Today I learned about <hgroup>!
| TIPSIO wrote:
| In HS we were learning basic HTML and I did not care at all at
| the time.
|
| The teacher had us build a page with like 10 tags or something. I
| thought I was clever and quickly wrote out:
|
| h1 h2 h3 h4 h5 h6 h7 h8 h9 h10
|
| Needless to say he told me to figure out why I needed to redo it.
| TheRealPomax wrote:
| and you whipped out the whole "the browser doesn't care, as
| long as there's corresponding CSS that defines its page layout
| and styling"?
| xnx wrote:
| small but not big?
| jeffbee wrote:
| Neither marquee nor blink?
| xnx wrote:
| I swear Google has published a report from their crawl data about
| how in/frequently different tags and frameworks were used, in
| part to determine what they might need to support in Chrome. I'm
| not able to find this anymore. Does anyone know what I'm talking
| about?
| alberth wrote:
| Given that DIV seems to be the only tag frameworks use the last
| 10+ years, such a report is not surprising.
| phil-pickering wrote:
| This is the one that Hixie published back in 2006. It helped
| guide a lot of the early decision-making in the WHATWG when it
| came to proposing new tags for HTML5 in a bid to reduce the
| number of div's out there:
|
| https://web.archive.org/web/20060203035414/http://code.googl...
|
| The mantle has now been passed to the HTTP Archive, whose Web
| Almanac includes a section on the popularity of HTML elements:
|
| https://almanac.httparchive.org/en/2022/markup#elements
|
| BTW: I got 97, which is 96 more than the number of friends I
| have :)
| xnx wrote:
| That's it! Exactly what I was thinking of.
| andrei-akopian wrote:
| I couldn't find anything either, my searches quickly get
| flooded with SEO spam.
|
| But it shouldn't be to hard finding each of these individually.
|
| Here are some links I could find:
|
| https://www.advancedwebranking.com/seo/html-study
|
| https://w3techs.com/technologies/overview/javascript_library
| nox101 wrote:
| https://chromestatus.com/
|
| Click the stats on the left
| spankalee wrote:
| That's from live Chrome user metrics, so it's page-view
| weighted and doesn't include enterprises and other users that
| opt-out.
|
| HTTP Archive has similar data, but from the web crawler, so
| page views don't matter.
| jessegavin wrote:
| Don't right-click on the input and inspect element
| InsomniacL wrote:
| from the source: const elements = [
| "html", "body", "head", "link",
| "meta", "marquee", "script", "style",
| "blogroll", "constructionsign", "guestbook",
| "webring" ]; // The above array was a decoy. You
| weren't peeking at the array were you? // Now the real
| array with all elements via
| nhggfu wrote:
| fun, but meh @ including tags with only semantic purposes (nav,
| footer etc) that could just be a good ol' div!
| saurik wrote:
| (edit: Multiple people have interpreted this comment in a way
| which makes them think I'm complaining about the semantics and
| one even seems to think I am "advocating for" using the wrong
| semantic... I am merely complaining about the chosen tag name and
| how much longer the much-later-added tag we all are supposed to
| use is than the tag which is in some sense--not technically, but
| morally--deprecated, as it undermines being able to use HTML as a
| true markup rather than a rendering target. If you find yourself
| thinking I'm against using <strong> and are somehow pro-<b>,
| maybe re-read the comment or go read some of my other much-longer
| explanations I've been <strong>-armed ;P into providing down-
| thread. FWIW, I do at least see how my comment was a bit
| confusing.)
|
| Doing this reminded me how angry I am that I am supposed to use
| "<strong>...</strong>" instead of "<b>...</b>". The verbosity
| overhead in a normal document of markup littered with five-
| character tags for something as basic as a keyword is
| sufficiently worse than one-character tags that it drives me to
| want to use something like Markdown (but then I am angered that
| it went with *...* and **...** instead of /.../ and *...* and I
| just start to give up on other peoples' tooling entirely).
| catapart wrote:
| "bold" is a style, and perfectly fine to use for any word that
| you want to apply that style to.
|
| "strong" is an intention and allows other things to define what
| style(s) that intention should be represented with.
|
| It's not _often_ that you want to represent something as a
| "bold" style without representing it as having strong emphasis,
| but there are times. A header is a good example of a place
| where you might want the header to be styled bold, but strongly
| emphasize a single word in the header. Since <header> doesn't
| apply the styles that - say - h1 does, it would be perfectly
| reasonable to script your header as
|
| ``` <header><b>The <strong>Worst</strong> Case
| Scenario</b></header> ```
|
| ... especially if you didn't want all of your headers to have a
| bold style applied.
|
| Obviously there are a few other edge cases but I will admit
| that the vast majority of the times would naturally call for a
| strong tag, over a bold tag. And for those majority cases, I'm
| really glad that it's "strong" rather than bold, because
| "strong" is meaningful in different ways than "bold" and it
| always makes more sense, to me, reading it back as html telling
| me how I should interpret the word, rather than just how it
| should look.
| saurik wrote:
| I am not complaining that it is "strong" instead of "bold" or
| that we have two separate tags, and I'd be perfectly happy if
| bold had never existed: certainly, if I actually _wanted_ to
| use <b>, it isn't like anyone removed it from either the
| browser or the HTML standard... it is, in fact, that I agree
| with everything you wrote about the semantics of the
| situation which is why I even have a reason to be angry when
| I'm trying to read my hand-written markup.
|
| Instead, I am complaining that we got to allocate a one-
| character tag to bold and then when we realized that we
| screwed that up we allocated a FIVE-character tag to strong.
| Hell: we hadn't even run out of one-character tags!! Why not
| <e>...</e> and <s>...</s>?! If you really think we needed to
| preserve the one-character tags, that we were given a two-
| character abbreviation for <em> but are forced to use a five-
| character word for <strong> is just insulting :(.
| shiomiru wrote:
| <s>...</s> already exists and is the "text-decoration:
| line-through" tag.
|
| Incidentally, there's also "strike" and "del", which look
| the same in my UA style sheet. I think strike was
| "deprecated" at some point, but I probably added it because
| websites still use it.
| mk12 wrote:
| I spent a while trying to do all the semantic markup properly
| on my blog -- <em>, <i>, <dfn>, <cite>, <mark>, <strong>,
| <b>, etc. I eventually gave up and just used <i> and <b>
| everywhere. It was such a waste of energy reading MDN docs
| and trying to decide between tags when they render
| identically and 99.9% of users aren't going to view the
| source. I also encountered bugs like <cite> breaking Safari
| Reader View.
| catapart wrote:
| Oh, one quick note about your markdown from someone stupid
| enough to have tried to write his own markdown flavor: those
| slashes are a nightmare for handling urls/paths. Trying to
| programmatically distinguish between "my/path
| to/some/ridiculous folder/and/s/y/m/bol/s" and "/i want this
| italic/ but not this. and sometimes o/nl/y some letters in a
| word." was all too much for me. I quickly retreated from using
| slashes at all in the markdown design. But there are definitely
| better programmers than me with much better designs for text
| parsing, so don't let me imply it's impossible (or even that
| hard! I honestly don't know!). I was just reminded of the
| anecdote and thought I'd share.
| wfleming wrote:
| That used to be the advice, but the W3C eventually agreed with
| you. The spec describes <b> as "a span of text to which
| attention is being drawn"
| (https://html.spec.whatwg.org/multipage/text-level-
| semantics....) and no longer mentions boldface as what the tag
| "means", it's just how it's usually styled by default &
| convention.
| saurik wrote:
| _Huh_... the documentation there for i is actually even more
| interesting to me: it seems like I 'm actually actively "not
| supposed to be" (at least anymore, if ever) using em for
| almost every reason I've ever used it?!
| austin-cheney wrote:
| Typing a couple keys on a keyboard is a pretty weak complaint
| considering the unintended consequence of what you are
| advocating for results in discriminatory output against persons
| with access disabilities. This is the literal definition of
| narcissism, even if unintentional.
|
| https://en.wikipedia.org/wiki/Narcissism
| saurik wrote:
| But... I am, surely, not advocating for people using <b> now:
| I'm merely lamenting that we allocated a one-character tag
| for <b> and then resorted to a five-character tag for
| <strong>, as it affects the readability (I couldn't care less
| about how many characters it is to type) of the un-
| rendered/hand-written document.
|
| (Hell: it isn't even clear that I'm "advocating" for anything
| at all; at best it would be "don't bother with HTML/Markdown,
| as both ended up making poor choices for readability of your
| source document: instead, use a custom markup/markdown and
| then have code--on your server--to render it into the
| appropriate semantic HTML". Yet, while that _is_ how my blog
| used to work, I actually failed to reallocate the tag names.)
|
| I do, in fact, carefully use <strong> in my HTML documents
| (though I'm now starting to wonder if that's wrong, per the
| sister comment which linked us to the standard; it,
| surprisingly-to-me, _does_ seem like I 'm "supposed to be
| using" <i> in most, if not all, of the places I've been using
| <em>...), and I've been known to go to pretty extreme lengths
| to correctly support various accessibility technologies in my
| code, both on the web and native.
|
| It simply makes me a bit angry, every time I see it, that
| someone decided to make such a common element <strong>
| instead of, say, <s>, which I believe is a reasonable
| position and has nothing to do with accessibility, as we
| could have named the new tag <powerful> and it would have
| worked the same and yet clearly that would have been even
| worse than <strong> ;P. We should get to separately judge--
| and even potentially lament one of--these two decisions.
|
| (I'm thereby going to assert pretty directly that your
| decision to insult me by calling a narcissist is based on you
| not bothering to read what I wrote or pay attention to the
| actual thing I was complaining about--as I'd in fact have no
| reason to complain if I didn't care about the same thing you
| do: no one removed <b> from either the standard or the
| implementation--and just ran with a knee-jerk interpretation
| of some of the keywords I used.)
| TheRealPomax wrote:
| Note that times have changed, and what <b> used to be for
| back in the <font> and <center> days is not what it's still
| for. It's just a letter now, not short for "bold", with the
| following official definition:
|
| > The b element represents a span of text to which
| attention is being drawn for utilitarian purposes without
| conveying any extra importance and with no implication of
| an alternate voice or mood, such as key words in a document
| abstract, product names in a review, actionable words in
| interactive text-driven software, or an article lede.
|
| Same for <i>: that's not short for "italic" anymore, it's
| just a letter now, and is defined as:
|
| > The i element represents a span of text in an alternate
| voice or mood, or otherwise offset from the normal prose in
| a manner indicating a different quality of text, such as a
| taxonomic designation, a technical term, an idiomatic
| phrase from another language, transliteration, a thought,
| or a ship name in Western texts.
|
| So go nuts: don't use <strong> or <em> if you semantically
| just needed <b> or <i>.
| sircastor wrote:
| I managed to get 50 unassisted. Now looking at these comments I'm
| amused at some obvious ones that I missed. I've been writing html
| since ~1995 (I think) and I was surprised that <frame> didn't
| work. It was all the rage back in the day.
| spankalee wrote:
| I would love to see an "I give up button" that tells you what you
| missed.
|
| I got to 80, and I'm stumped on the last 34.
| saurik wrote:
| It counts <object> but not <param>?
| catapart wrote:
| None of the svg subtags, either. path/g/etc.
| velcrovan wrote:
| I got to 63, I think mainly because I've been working on an HTML5
| pretty-printer in Racket recently [1] (basically my own
| implementation of the formatting aspects of HTML Tidy).
|
| [1]: https://joeldueck.com/what-about/html-printer/
| ygra wrote:
| In hindsight I missed a few obvious ones (completely forgot
| lists), but would have expected HTML 4 tags to still be HTML tags
| (font, etc.). And I do wonder why SVG is on that list, which can
| be used inside HTML, but is pretty much not an HTML element, to
| my knowledge (same with math).
| Retr0id wrote:
| I somehow never knew that "h" goes all the way up to h6.
| netcraft wrote:
| I got 45 fairly easily, but ive been writing html for a long
| time. Would love to see the output reveal them in a list in order
| of commonality - would love to see if im missing some common ones
| - like if you guessed 1-20 but missed 9...
|
| edit: Case in point, I missed <img>...
| KaiMagnus wrote:
| Funny, the first ~15 are easy simply by spamming h1-h6, i, u, em,
| etc... but then it gets hard.
|
| Probably the only time I'll ever use menu, dfn or del/ins.
| scelerat wrote:
| oh noes! I viewed source and saw the answers
| Titan2189 wrote:
| And what else did you expect?
| tomjakubowski wrote:
| I was hoping to be yelled at for entering <ISINDEX>, but instead
| my entry was politely rejected.
| K0nserv wrote:
| Fun game, I got 76 and forget a bunch of common tags in the
| process: noscript, title, address, source(but I did get picture)
| ChilledTonic wrote:
| No love for <marquee> or <center> anymore. Remember, an html tag
| is only truly deprecated if you stop using it and let it leave
| your heart.
| Bilal_io wrote:
| I was about to say. Another thing is svg sub tags. I assumed
| they count since they're valid HTML.
|
| I was able to recall 48.
| merb wrote:
| blink is also missing
| phailhaus wrote:
| They say a tag dies twice. Once when it is deprecated by W3C
| and the second, a bit later on, when somebody uses it for the
| last time.
| TheRealPomax wrote:
| Who needs <marquee> when we have @keyframes? Now _everything_
| is marquee.
| breck wrote:
| removing <center> was a mistake
| russellbeattie wrote:
| I got to 65 left... So 49 correct. I wish it counted the correct
| ones. And I want to see a list of what I forgot once I give up!
| (I cloned the Pen to see...)
|
| I'm sort of ashamed I couldn't remember more off the top of my
| head.
|
| You know you've been doing HTML for a long time if you remembered
| 'base'.
| elicash wrote:
| It looks like the comment tag isn't included. (Not sure whether
| it should be. Not even sure the proper way to identify it, I
| suppose a single "!")
| lucb1e wrote:
| I would have said !-- is the tag name of that, though with the
| closing part requiring a double dash as well, it's rather
| unique and maybe not a proper tag... could have included it in
| a bonus list though, not counting it towards the total but
| showing it as a bonus entry at the top of your findings
| jermaustin1 wrote:
| I did worse than I thought I would since I've been at this since
| the late 90s. I blame code completion. I got to 68, and when
| another tag didn't come to me after 5 minutes, I gave up.
|
| <blink> and <marquee> were my first guesses just for fun before I
| moved on and started with all the single character tags I could
| think of (a,b,i,p,s,u), then the various document tags (html,
| head, body, link, style, script, meta), then all the semantics
| (aside, article, nav, header, footer). Then the old school (table
| (and the descendants), div, p, span, etc...).
|
| It made me realize how many tags I just do not use anymore
| (object or embed anyone?).
| jchw wrote:
| I managed to get just over half-way and recall 58 of them before
| I ran out. I find it interesting which are omitted. I assume
| these tags are just fully removed from HTML5, although most of
| them continue to work just fine with the exception of <blink>.
|
| - <blink>
|
| - <marquee>
|
| - <tt>
|
| - <center>
|
| - <frame>
|
| - <frameset>
|
| That said, it accepts both <object> and <embed>, which I found
| moderately surprising, since I thought that those were mostly
| only used for ActiveX and NPAPI plugins. Maybe the last major
| round of deprecations for HTML came just a tad too early to kill
| them off, or maybe there is more to them than that.
|
| Some tags I feel are underrated in handwriting HTML that are
| still in the spec: <figure> and <figcaption>, good for
| semantically representing images with captions.
| <thead>/<tbody>/<tfoot>, semantically segments a table; In theory
| could be used by assistive technology, or possibly renderers that
| need to paginate HTML and want the table headers to repeat on
| each page (does any agent do this?). <picture> + <source>, pure-
| HTML method of having responsive images in an HTML page, can
| support a fallback for browsers that don't support it, too. On
| that note, the srcset and loading attributes of img are very
| useful too, srcset as an alternative to <picture>, ostencibly
| aimed at use cases where the different sources are identical
| aside from pixel density (vs <picture> which is meant to contain
| potentially more significantly different images for different
| responsive layouts.)
|
| I wonder which things I missed. That would be a nice feature to
| add.
|
| (I know I missed a few table elements because I just thought of
| colgroup while typing this.)
| bsd_source wrote:
| It also doesn't accept keygen
|
| (Although that never really worked.)
| anderskaseorg wrote:
| It worked in all major browsers until it was removed around
| 2017-2019. I personally used it, as part of MIT's
| authentication systems.
| jefftk wrote:
| It also rejected one of my favorites, the long-deprecated <xmp>
| CM30 wrote:
| Damn, got 65 and then had no idea which ones I was missing. Turns
| out I forgot col, colgroup, menu, dfn, and a lot of others like
| that.
| ajanuary wrote:
| Managed to get to 80 after about an hour while watching TV. Wish
| it would tell me which ones I'm missing, manually cross
| referencing seems like a bit of a pita. Fun though.
| blixt wrote:
| Maybe the validator should be something like
| Object.getPrototypeOf(document.createElement("a")).constructor
| !== HTMLUnknownElement
|
| I noticed several functional HTML elements (like "font") were not
| in the list, so might be nice to just trust the browser (not sure
| how you'd get the correct count per browser though).
| uses wrote:
| After a while they start flowing off screen. Perhaps make them an
| inline list, or a grid, or a list that fills from the top.
| koito17 wrote:
| For amusement, I tried inputting <applet>, <center>, <font>,
| <marquee>, and <object>, but the form declared them all invalid.
| I vividly remember using these over a decade ago.
|
| There are a few sites still using <frame> and <frameset>, but
| both are marked as invalid.
| pvorb wrote:
| <object> works, but I was surprised as well that the others
| don't. It was really hard for me to come up with many tags that
| are still allowed.
| TheRealPomax wrote:
| Correctly: almost all of them were removed from the HTML spec
| many years ago (but not <object>, that's still a valid HTML5
| element).
|
| But: invalid according to the spec doesn't mean it won't do
| something in a browser, browsers aren't pure spec
| implementations, they're applications used by humans to view
| content made by humans =)
| Izkata wrote:
| It also doesn't like <blink> and <marquee>
| CSMastermind wrote:
| > There are a few sites still using <frame> and <frameset>, but
| both are marked as invalid.
|
| Those are invalid now?
|
| Well more useless knowledge accumulating in my brain I guess.
| ElijahLynn wrote:
| I think this should be "HTML Elements Memory Test" yah? Tags are
| the opening and closing part of the element.
| xigoi wrote:
| I got 83, which is 82 more than the average React developer.
| j1mmie wrote:
| 61! Pretty proud of that
___________________________________________________________________
(page generated 2024-07-15 23:01 UTC)