Patrick Weaver
A Blog Post With Every HTML Element
After studying somewhat bit extra about internet accessibility final 12 months I had been exploring among the much less widespread HTML components, and making modifications to this web site, like wrapping the textual content of the posts on this weblog in <article> tags and including a <predominant> tag within the web site’s structure templates (this web site is constructed utilizing Eleventy).
I had beforehand carried out some work to make it possible for <determine> and <figcaption> components had been layed out properly for pictures with related captions, and I had been impressed with numerous Recurser’s implementation of footnotes or sidenotes, and have been pondering it will be attention-grabbing to see what different attention-grabbing layouts had been potential with simply HTML.
I might, ingredient by ingredient, proceed so as to add assist (principally by making CSS updates for every ingredient to slot in with the remainder of my type decisions) as I got here throughout particular wants for them, however not one to draw back from an exhaustive exploration, I made a decision to put in writing this publish and try to make use of each ingredient.
A purpose of the publish, was to keep away from delaying different future posts with CSS updates on a beforehand unused ingredient, however in actuality it took a 12 months and a half to make all of the updates for simply this publish! I’m utilizing the MDN Web Docs list of HTML elements as a reference which has greater than 100 tags divided into a couple of classes, which I may also use on this publish. Most of the tags like <html> don’t make sense to incorporate within the textual content of a weblog publish, however when you’re viewing this publish on patrickweaver.net, then each one of many components is used someplace on this web page.
The Parts
Major Root
I didn’t must make any modifications to the <html> tag for this publish, however one factor I don’t all the time bear in mind to incorporate is the lang property (on this case lang="en").
Doc Metadata
I wasn’t acquainted with the <base> tag earlier than penning this publish, although I’ve now added one with relative hyperlinks to my structure templates. This induced a couple of points with issues like native improvement, and relative hyperlinks, although they had been simply resolved. The remainder of the metadata tags are acquainted and had been already right here.
Sectioning Root
Just like the Doc metadata tags, within the structure, although it was attention-grabbing to learn the documentation and study attributes, like onbeforeprint that gives performance I’ve used extra hacky strategies to perform beforehand, and onblur, whose major utility appears to be annoying popups.
Content material Sectioning
Headers and Doc Group
After I first regarded on the listing I assumed that <handle> can be designed solely for mailing addresses, however was shocked to see that it may be used for e mail addresses, and even hyperlinks. I up to date the e-mail handle on the About web page of website website, however I’ll add an <handle> beneath additionally:
Electronic mail Patrick:
As I discussed above, I up to date the weblog publish web page template to make use of the <article> tag, however studying the documentation, I’m now questioning if it will match on each web page of the location.
I’m now utilizing <apart> components, which symbolize, a portion of a doc whose content material is just not directly associated to the doc’s predominant content material
, to wrap round my footnotes on the backside of this web page (although I could attempt to type them as sidenotes sooner or later). The present design of this web site doesn’t have a <footer>, however I’ve added one to this weblog publish, and whereas I had a <header> ingredient on the web page header beforehand, I now know that a couple of is suitable so there may be one across the header part of every weblog posts as nicely.
Heading components
As a part of the type replace and cleanup of this website that impressed this publish I spotted I used to be usually utilizing headers with incorrect hierarchy, which I cleaned up. Although I by no means reached 6 ranges of headers, the closest I acquired was <h3> in among the weblog posts with a number of sections and subsections.
Find out how to use prime degree headings
It’s a little bit unclear easy methods to use <h1> tags in a publish like this from simply the MDN documentation. This tip from the W3C suggests totally different implementations for pages with standalone, or assortment content material, which might make it tough to make use of the identical templates and types for various pages on this website.
How I made a decision to deal with it
Earlier than penning this publish I had up to date the location to make use of <h1> for the title of the location (my title) on the prime, <h2> for the part title, for this web page, “Weblog”, and <h3> for the title of what can be the <article> on a web page. Nonetheless, after studying the documentation and the tip above, I made a decision to replace the hierarchy and use <h1> for various issues on totally different pages, and use lessons for types, which might be extra according to the separation of considerations of HTML and CSS (which suggests this paragraph is beneath an <h6>).
Someday between once I began this experiment in early 2022 and once I printed it in Summer time 2023 <hgroup> and <search> had been added to the MDN documentation (which I understand will not be the official spec). I’ve added an <hgroup> across the heading of this part, with a subtitle <p> ingredient. <search> is a semantic ingredient that signifies that an enter can be utilized for search, not for search outcomes (apart from fast outcomes that populate inside a type ). Whereas a <search> ingredient that accommodates a <type> works with out HTML on an internet site that may generate search outcomes on a server, as a result of this web site is statically generated the instance beneath requires JavaScript. I haven’t seen a <search> ingredient wherever else, neither MDN’s header search, or google.com use it in 2023.
This search performance will solely be interactive when JavaScript is enabled.
The <predominant> ingredient was one of many preliminary curiosities that led me down the trail of studying about and implementing each ingredient, although it wasn’t till I learn by the MDN listing that I added a <nav> ingredient across the menu on the prime of this web page. I’ve added <part> components to this publish, however I’m unsure how usually I’ll use them elsewhere. One motive is that it makes it tougher to combine and match HTML and markdown with visually clear nesting within the document where I am writing this post.
Textual content Content material
I had beforehand used <blockquote> for embedding tweets into weblog posts, however for this publish I made a decision so as to add types for standalone quotes. I didn’t know in regards to the <blockquote> cite property or <cite> ingredient till studying the docs extra intently:
citeA URL that designates a supply doc or message for the data quoted. This attribute is meant to level to data explaining the context or the reference for the quote.
<blockquote><dd>, <dl>, and <dt> are components that, after discovering out about them when first wanting into extra obscure HTML components, I used to be very shocked to haven’t identified about sooner. Though, it’s unclear from the documentation whether or not lists just like the hyperlinks on the present model of my portfolio page ought to use <dl> (I’m at present utilizing <ul>). I’m curious how <ol> and <ul> turned a part of virtually each “Intro to HTML” class, however <dl> is comparatively obscure. It’s additionally unusual that <ol> and <ul> have default margins, however for <dl> the margin is on <dd>.
HTML listing components
dl- Description listing
ol- Ordered listing
ul- Unordered listing
<div> has acquired a nasty repute on the trendy internet on account of overuse, so I used to be shocked to be utilizing comparatively few <div> components, although as soon as I began utilizing components that I wished to type collectively, I ended up with round 20. It reveals how pointless most <div>s in all probability are, although this website has minimal generic “sections”.
Among the many first extra obscure components that I added to this website had been <figcaption> and <determine>. I used to be including some weblog posts that had initially been printed on Medium, and wished so as to add captions beneath pictures in a web-semantically right manner. Although after studying the documentation, which says <determine> can be utilized for, picture, illustration, diagram, code snippet, and many others.,
I spotted that there are loads of locations the place I at present have code blocks that I may very well be utilizing them.
I’ve all the time favored <hr> components lots, however I’m by no means certain when to make use of them. The documentation says, Whereas it might nonetheless be displayed as a horizontal rule in visible browsers, this ingredient is now outlined in semantic phrases, relatively than presentational phrases, so when you want to draw a horizontal line, it’s best to accomplish that utilizing acceptable CSS
which made me revisit the <hr> types on this website and I made a decision to incorporate an emoji in an hr:after rule, although I ought to test how that works on a display reader.
The gadgets within the (inline styled) lists of components on this web page are in fact <li> components, although I had by no means regarded on the documentation till now. It’s attention-grabbing that the identical <li> ingredient is utilized in each <ol> and <ul> lists, with quirks like The worth attribute has no which means for unordered lists
, however will not be used to wrap the <dt> and <dd> components in a <dl>.
I had not encountered <menu> earlier than penning this publish, and I used to be initially shocked that it survived to HTML 5 (whereas <menuitem> didn’t) as a result of fashionable browsers deal with it as basically a <ul>. Researching additional on Wikipedia I learn:
MENU existed in HTML Tags, and was standardized in HTML 2.0; deprecated in HTML 4.0 Transitional; invalid in HTML 4.0 Strict; then redefined in HTML5, however eliminated in HTML 5.2,
and now I don’t know what to suppose, however right here’s a <menu>:
<ol> and <ul> are among the HTML components I utilized in my earliest internet pages, and extra not too long ago I attempt to use <ul> with CSS in locations which might be semantically lists, however may not be styled like a conventional listing.
I used to be shocked to not discover extra steering on utilizing <p> tags on the MDN docs, one thing I ponder usually when including non lengthy type textual content to an internet site is, “is that this actually a paragraph?” However, it looks like so far as HTML is worried, if it’s not a heading, then in all probability!
Earlier than studying the documentation I had actually solely thought of utilizing <pre> tags together with <code> tags for code blocks, however the instance used on MDN is used to indicate how <pre> can show significant whitespace for issues like:
┏┓ ┃┃╱╲ in ┃╱╱╲╲ this ╱╱╭╮╲╲home ▔▏┗┛▕▔ we ╱▔▔▔▔▔▔▔▔▔▔╲ write semantic HTML ╱╱┏┳┓╭╮┏┳┓ ╲╲ ▔▏┗┻┛┃┃┗┻┛▕▔
Inline Textual content Semantics
As with different quite common tags I used to be curious to get to the documentation for <a> to see if there was something I used to be unaware of, or had been utilizing incorrectly. I used to be shocked to find that <a href="#">hyperlink</a> hyperlinks to the highest of the web page after years as simply utilizing it as a placeholder once I didn’t know the URL but.
<abbr> appears more likely to be the least used tag, particularly as a result of the MDN documentation doesn’t make an important case for it the aim of this ingredient is only for the comfort of the creator.
The excellence between <b> and <sturdy>, because the docs have it, will not be what I had beforehand thought (that <sturdy> was the HTML5 alternative for <b>). I feel the excellence is extra nuanced and overlapping than the technical nature of the documentation is de facto in a position to convey. The way in which I’ll in all probability clarify it to different individuals sooner or later is that, for probably the most half, it’s best to use <b> for single phrases (or compound phrases), and <sturdy> for entire sentences or phrases. That is extra a rule of thumb and bypasses the precise distinction. The documentation reads:
The
<sturdy>ingredient is for content material that’s of better significance, whereas the<b>ingredient is used to attract consideration to textual content with out indicating that it’s extra essential.
<b> vs. <strong>”However I can’t consider many situations the place I might need to draw consideration to a phrase, the place that phrase will not be extra essential than different phrases. The advice appears to be from a actuality the place, for probably the most half, all phrases are of equal significance, however deserve totally different quantities of consideration, which doesn’t appear quite common.
I’ll in all probability consider <b> any more because the HTML tag with an analogous impact because the citation marks used for “emphasis” you may see on signage that may trigger intergenerational confusion.
<bdi> is a tag for an idea that I hadn’t thought of till now, textual content whose course may (or may not) differ from the course of the encircling textual content. The examples on the documentation are all names, however might stand in for any person inputted textual content. Sooner or later I’ll in all probability attempt to wrap any tags, like those managed by the enter beneath, that may comprise arbitrary person inputted unicode characters in a <bdi> tag simply to be secure.
Whats up, , thanks for studying!
This kind will solely be interactive when JavaScript is enabled.
<bdo> I’ll in all probability use much less actually because I don’t work with RTL languages usually, however it’s nonetheless good to know easy methods to deal with small quantities of RTL textual content, like this hyperlink to the web page for HTML on the Farsi Wikipedia: اچتیامال.
<br> is attention-grabbing to me, as a result of for a time (a very long time in the past) it gave the impression to be as misused as <div> has been not too long ago, however, as CSS has gotten extra sturdy that’s in all probability much less usually the case; although I ponder whether it is nonetheless taught early in HTML lessons. It’s attention-grabbing that the instance use case within the docs is poetry as a result of it makes me surprise how the gray space between a paragraph and a standalone line was thought of in creating the HTML spec. It additionally looks like a <pre> tag could be a greater slot in some circumstances.
<cite> and <q> are attention-grabbing as a result of they attempt to add HTML semantic components for which means that can also be conveyed by seen punctuation in most languages. It’s the type of redundancy that underscores repetitiousness of working with computer systems (the default type for cite makes use of italics whereas q
provides citation marks not within the textual content.).
I’ve clearly used many <code> components on this publish up to now, however studying the documentation made me wonder if the not too long ago launched Markdown assist in Google Docs makes use of <code> for textual content, however on inspecting the HTML of a Doc, I remembered that <canvas> is used to render the doc now.
Often the MDN documentation examples are tough to mentally translate to real-world use circumstances. <knowledge> is one in all these, the place the ony examples present a <knowledge> ingredient with a worth property with product IDs wrapped round product names In that case the IDs appear both, person dealing with, through which case it will in all probability be higher to show them to the person, or non person dealing with, through which case, I’m unsure who the “knowledge” is for. Curiously, <knowledge> doesn’t appear to seem within the W3C HTML5 specification.
<dfn> is one other unusual ingredient as a result of it looks like it’s misnamed, because it wraps, not the definition of a time period, however as a substitute that time period inside the definition. It does only seem to have been part of the never officially adopted HTML 2.0 proposal, and it exemplifies the tutorial nature of the early internet. The HTML Tags: Past, Present, Proposed web page on martinrinehart.com defines HTML 2.0 as There by no means was an HTML 2.0 normal, however these all formed browser improvement within the late twentieth century
with references to a number of RFC paperwork.
<em> and <i> convey up comparable utilization questions as <b> and <sturdy>, however in my view with much more nuance, particularly, because the documentation notes, with different extra particular tags like <cite> that additionally by default italicize textual content in most browsers. The rule of thumb from above additionally for probably the most half suits right here, <em> for single phrases, and <i> for sentences or phrases, although the examples within the documentation appear to principally use <i> for drawing consideration to potential confusion, as in, The phrase the is an article
.
<kbd> is one other tag that makes me surprise in regards to the conceptual boundaries of the utilization of the tag. It’s supposed for specifying keys on a pc keyboard, for instance: to kind the < character used for (the non escaped) model of the tags on this publish, I press Shift + , (the types right here on <kbd> are utilized by customized CSS). However I’m curious if it will even be acceptable to place a <kbd> round one thing like Proper click on (on this case I used <i> as a substitute).
<mark> is attention-grabbing as a result of it suggests a 2-way authoring internet that was initially envisioned, however failed to return to fruition, with utilization notes like, Consider this like utilizing a highlighter pen in a e-book to mark passages that you just discover of curiosity.
The yellow right here is the default type in all main browsers.
<rp>, <rt>, and <ruby> all relate to rendering “ruby” or “agate” fonts, that are the smallest legible textual content utilized in print. They’re utilized in HTML to, present pronunciation, translation, or transliteration data for East Asian typography.
As a result of I don’t learn any East Asian languages, I’ll use the identical instance because the MDN docs do beneath. Curiously, <rp> is used to cover parentheses characters, that are included within the supply. It’s stunning to me that there’s a component to cover these characters in a really uncommon occasion, however we nonetheless depend on CSS to hide content visually (however nonetheless present it to display readers).
漢
字
<s> is the strikethrough ingredient, which needs to be used to point textual content that’s not correct or related, however was beforehand. Together with <menu> it’s one in all two components (or according to MDN 3 with <u>) that had been deprecated in HTML 4.01, and un-deprecated and redefined in HTML5. The redefinition modifications the usage of the tag from presentational, which ought to now be achieved with CSS, to related to the context of the textual content. Nonetheless, some display readers don’t announce the strikethrough, which appears doubtlessly complicated. I’ve added the CSS advisable by the MDN docs to my web site, so the strikethrough needs to be introduced right here.
HTML 3.0:<s>is used for presentation- HTML 5:
<s>is used for eliminated textual content
<samp> is one other ingredient I wasn’t conscious of earlier than studying the MDN docs. It’s used for rendering the output of a pc program, which I had beforehand simply used <code> for (I simply up to date my Raspberry Pi blog post to make use of <samp>). One other instance is beneath:
console.log("Whats up, World")
Whats up, World
<small> is used to render smaller textual content, which is one thing I might often have carried out with CSS. The MDN docs don’t present a lot readability about which technique to make use of: Authors are inspired to make use of their finest judgement when figuring out whether or not to make use of
. I’ll in all probability proceed to make use of CSS for probably the most half because the impact appears to be presentational for probably the most half.<small> or CSS.
<span> is a really acquainted ingredient, however studying the documentation made me surprise for the primary time why HTML and CSS enable contradictory ingredient types like a
<div type="show: inline" />
or a <span type="show: block" />. Although the <div> breaks the guardian <p> tag, whereas the <span> doesn’t.
<sub> (used for footnotes right here) and <sup> (used within the equation beneath) are extra components I in all probability have used the CSS implementations of beforehand (although it’s acceptable for presentation solely tremendous or subscript.)
<time> looks like a useful ingredient for creating semantic HTML, however even Google doesn’t appear to make use of it in search results. I’ve up to date the dates on my weblog posts to make use of it.
<u> has in all probability my favourite quote from the MDN docs, More often than not, you really don’t need to use
Their strongest suggestion appears to be indicating spellling errors.<u>.
<var> is a technique to point out semantically {that a} string is a variable for both math or programming. For instance, rendering the pythagorean theorem makes use of each <var> and <sup>: a2 + b2 = c2.
<wbr> was additionally a brand new ingredient till now, but it surely solves an issue I’ve hit many occasions earlier than, breaking lengthy “phrases” at sure factors, particularly URLs. If I put a <wbr> ingredient at clear break factors on this URL: https://www.patrickweaver.net<wbr> components:
https://www.patrickweaver.net/pages/averylongurlwithoutanypunctuationbutstillmadeupofwords/
Although together with hyphen characters within the URL additionally creates clear breakpoints in fashionable browsers. I did must wrap the URL above in a particular scrollable <p> to stop it from breaking the structure of the remainder of the web page.
Picture and Multimedia
<space> and <map> are components that I hadn’t been acquainted with beforehand, regardless that I had made a couple of picture map kind web sites within the days earlier than CSS 3. It looks like a sign of how seldom they’re used lately that the instruments for debugging the boundaries of <space> components are exhausting to make use of. One <space> border at a time will show whereas utilizing tab focus, however styling the weather doesn’t work (except there’s a show hack I couldn’t determine). It’s additionally considerably unusual that <space> is actually an <a> with a form.
Right here’s a <map> (with <space>s on every tag linking to MDN) of a handwritten HTML doc I made for June third’s HTML Day Freewrite in SF.
<audio> is likely one of the basic multimedia HTML 5 tags so I’ve used it earlier than, however eager about it now, it’s stunning I don’t see them extra usually within the 2020s. I might guess that there are more officious than I believed, for instance, the Bandcamp participant makes use of a hidden <audio> ingredient regardless that the UI is a customized mixture of <a> and <div>s inside a <desk> oddly sufficient.
<img> is in fact one of many first components I used, however I used to be curious what properties may very well be used with it that I may not have heard of. srcset, used for specifying a number of sizes of the identical picture to load at totally different display resolutions, was a kind of. I’ve created a demo beneath, which matches in opposition to the spirit of srcset.
The picture beneath has 3 pictures supplied to its srcset property:
- A yellow background and a monospace font that’s 300 pixels large and will render when the web page is lower than 520 pixels large
- A blue background and a serifed font that ought to render when the web page is between 520 and 800 pixels large
- A inexperienced background and a script font that ought to render when the web page is bigger than 800 pixels large.
I’ve examined it, and it does work, but it surely takes loads of forethought to just remember to will have the ability to load the proper picture. Issues just like the browser’s cache, and scaled shows will change the conduct. If you wish to see the impact you’ll in all probability must load the web page in a non-public window on a non scaled or “retina” show.
It’s attention-grabbing that whereas each <audio> and <video> are much less broadly used than <img> even after their introduction in HTML 5, the distribution of movies on-line appears to be centralized, totally on YouTube, whereas audio is extra decentralized, with individuals serving particular person recordsdata when distributing issues like podcasts, regardless that the audio participant that’s usually used will not be on the net.
The embedded video components will solely be toggleable when JavaScript is enabled.
One motive for this can be that there are nonetheless some quirks with <video> components. For instance, there’s a <figcaption> accompanying the video above, however once I initially tried creating the ingredient with a self closing tag it didn’t render. Additionally, as I’m penning this, Safari doesn’t assist the video in any respect, possible due to the event server I’m utilizing not supporting the “Vary” request header. I’m curious to seek out out whether or not the hosted model of the location (on GitHub pages) will assist enjoying the video in Safari. I believed that I may need an analogous concern with <observe>, however that simply turned out to be me not organising my Eleventy construct appropriately for .vtt recordsdata.
Embedded Content material
It’s considerably stunning that <embed> and <object> haven’t been deprecated since most of their makes use of have been outdated by particular tags like <video> and <iframe>. Possibly ultimately they are going to be, or they’ll simply stay on within the title of backwards compatibility.
Talking of <iframe> it’s additionally attention-grabbing that the very 90s title “iframe” (“inline body”, not “iPod Body” or one thing, and I used to be shocked to be taught does render show: inline) has survived whereas <body> was deprecated in HTML 5. I believed that <iframe> could be a technique to pressure the <img> srcset instance above to render the smaller pictures on a excessive DPI show, however even at 150px large on my gadget the massive picture nonetheless renders:
<image> is a tag that’s, with <supply> really supposed for structure methods just like the srcset experiment I attempted above, rendering totally different variations of a picture in several conditions. The picture beneath ought to present an icon of a pc when used with a mouse/trackpad, or an icon of a telephone when used with a contact display (utilizing the pointer media question to find out), and will fall again to a picture of a purple circle with a line by it when neither media question is suitable. The responsive design developer instruments in your browser ought to trick it, although apparently, not when inspecting a component.
<portal> is likely one of the extra mysterious sounding components, and appears supposed for the iPad-style hyperlink previews that I’ve seen applied on some web sites on hover, but also come with SPA-like performance benefits. It sadly remains to be an experimental function and isn’t (as of 2023) enabled by default in any browsers. Evidently it used to be an available experimental flag in Chrome, however in the present day in 2023 it isn’t accessible at chrome://flags. I’ll embody one beneath in case it really works for future readers! I did attempt it in an very outdated Chromium model I nonetheless had put in. <portal> doesn’t appear to be a part of the HTML 5 Spec, I’m unsure why it’s included within the MDN documentation.
<portal> ingredient that ought to show the “Links” web page on patrickweaver.internet, if the function is ever applied in browsers.SVG and MathML
That is an attention-grabbing part of the documentation as a result of it pairs probably the most ubiquitous components with probably the most obscure. <svg> components are in every single place, particularly that instruments like Figma and Sketch have made them simple to prototype and export. Pairing them with <math> within the documentation evokes a extra artisanal, hand-crafted <svg> that’s comparatively unusual lately. I’ve gone hand-crafted right here and drawn some <svg> circles.
<math> can be a wrapper ingredient for different non HTML components from the MathML namespace, so I assume I don’t have to incorporate each potential little one ingredient right here. I’ll keep on with one thing easy:
Scripting
I did a deep dive into <canvas>, particularly drawing crisp lines in 2020 whereas I used to be at Recurse Center. One factor I wasn’t acquainted with earlier than studying the MDN docs although, was that there’s a most measurement for a <canvas> ingredient in every browser (although all fashionable browsers it’s about 32 thousand pixels in every dimension). Under is a re-implementation of <marquee> with <canvas> and <script> (and <noscript>).
The <marquee> like animation above will solely be render when JavaScript is enabled.
There have been loads of tags that I anticipated to really feel somewhat outdated once I began this publish, however <script> wasn’t one in all them, however now that I’ve written many of the publish, and have created a couple of <script> tags, I’m realizing how little I take advantage of them now. For many of the code that I write, regardless that most of it’s JavaScript, all the “scripting” will get put into on <script> tag by construct instruments and it finally ends up feeling extra like boilerplate than a “markup” tag.
However, for many of the interactive web sites I’ve made, I’ve hardly ever included a <noscript> tag apart from these minified and compiled single web page apps the place the person would possible get a clean web page if it weren’t for the <noscript> tag (and even then, in all probability much less usually than I ought to have, although I’ve made certain to incorporate one with each <script> tag right here).
Demarcating Edits
One other set of components I had by no means come throughout earlier than studying the MDN documentation, <del> and <ins> appear to be supposed for creating a phrase processor. Studying about them led to yet one more spherical of, “I ponder if these are utilized in rendering Google Docs? .”
Desk Content material
It’s not a brand new perception that <desk> components had been overused for structure functions on the early internet, however an irony that I’m solely realizing now could be that not too long ago, as the net has gotten increasingly more populated by knowledge, that <desk> components have turn into hardly ever used, in all probability principally on account of their clunky default design, however in all probability additionally as a result of one predominant purpose of making an online UI for the information that’s in any other case in all probability saved in database tables, is to create a totally different view of the identical knowledge.
I don’t have any tabular knowledge as that is an solely doc primarily based weblog publish, however beneath I’ve added a desk with some customized CSS and “knowledge” on emoji that’s possible solely correct for the Apple emoji set in 2023. I wasn’t acquainted with <col> and <colgroup> earlier than, however I don’t know that there are a lot of circumstances the place I might use them relatively than a extra customized, non <desk> design.
| Quantity | 1 | 2 | 3 | 4 | 5 | 6 |
|---|---|---|---|---|---|---|
| Emoji | 1️⃣ | 2️⃣ | 3️⃣ | 4️⃣ | 5️⃣ | 6️⃣ |
| Emoji with leaves | ???? | ???? | ???? | ???? | ???? | |
| Emoji with fruit | ???? | ???? | ||||
| Emoji with slices | ???? | ???? | ???? | |||
| Totals | 4 | 4 | 3 | 3 | 2 | 1 |
Kinds
I’ve often used <type> and it’s related components when submitting the shape would redirect to a brand new web page, not for in-page person interplay, however both is legitimate. I might guess the shape components are in all probability crucial for accessibility so I’ll possible check with the documentation at any time when implementing one sooner or later.
Your emoji:
Interactive Parts
The <particulars> and <abstract> mixture might be the most typical, “You don’t want JavaScript to…” ingredient (one other popular blog publish making this level prompted me to lastly end this one). Making this sort of increase/collapse interactive view was one of many first issues I used JavaScript for (it was in all probability jQuery). I bear in mind it being considerably complicated on the time (2006?), so it’s humorous to me to see it really easy with only a couple HTML tags.
Hypothesis about <particulars>
I do surprise if <particulars> and <abstract> had been being thought of for the HTML spec in the present day, if they might be withdrawn in favor of an analogous impact utilizing CSS.
I wasn’t conscious of the HTML solely <dialog> earlier than utilizing it right here. It requires JavaScript to be helpful past simply its stylistic impression, but it surely’s an attention-grabbing technique to create interactions which might be extra customized than alert(), however nonetheless easy, as a result of whereas alert() is styled by the browser <dialog> could be styled with CSS.
Guess who?!
????
????????????
???? ???? ????
???? ???? ???? ????
???? ????
???? ????
???? ????
the palm sheriff
Internet Elements
Internet parts had been on a (lengthy) listing of “issues I ought to be taught extra about” for some time, so I used to be glad to get to this part of the MDN documentation. I used to be shocked that JavaScript (and Class syntax at that) was essential to get internet parts to render, however after studying extra in regards to the Shadow DOM, it is smart, as a result of HTML has no in-built technique to encapsulate types, although it does appear to be considerably comparable conceptually to <iframe> components.
I’ve used internet parts beneath to create a desk of contents for this publish beneath, although I’m not making one of the best use of them. One factor I couldn’t rapidly determine easy methods to do, when in comparison with parts from frontend frameworks, is cross in properties which might be themselves used as properties of components within the little one template, so within the listing beneath I’ve to cross a full <a> ingredient into every little one (which renders the <li>), to have the ability to set the proper href property. Sometime after ending this publish I’ll learn extra about internet parts and perhaps determine one thing I’m lacking now.
Out of date and Deprecated Parts
There are in fact a couple of deprecated HTML components, so why not embody them right here on the finish.
Everybody’s favourite is in fact,
<marquee>Most of the components, like <massive>, <acronym>, <font> (used above), <nobr> and <strike> are examples of structure associated performance that has been moved to CSS relatively than have HTML deal with it. The slim field beneath has an instance of <nobr>:
<nobr>.This sentence is wrapped in a <p>.
This sentence is wrapped in a <p> with type="white-space: nowrap;".
There are another unusual ones as nicely although. I couldn’t implement <content material> and <shadow> right here as a result of they had been by no means totally applied a part of the net parts spec. I’ll add some beneath anyway although.
<shadow> and <content material> components (that gained’t render).And <dir> is a really webserver model of <ul> for itemizing directories. Since my Eleventy static website generator does use directories right here’s a listing:
A few of deprecated components gained’t render with out some further work, for instance <body> and <frameset> are designed for use as a substitute of a <physique>, for I assume some type of collage internet web page made up of different pages. I’ve satirically solely been in a position to make use of them within an <iframe> beneath.
<frameset> and <body> components that itself embeds the Hyperlinks web page of this website.I anticipated that <picture> wouldn’t work because the MDN documentation says:
This doesn’t seem to have been a part of any formal specification. It was talked about in HTML+ Dialogue Doc – Dave Raggett, November 8, 1993 (Part 5.9 – Pictures), however was not a part of the primary revision of HyperText Markup Language Specification – 2.0 in 1994.
Nevertheless it does appear to work in some browsers in 2023, although this could be only a fallback for potential confusion with <img>.
One of many extra attention-grabbing browser compatibility tales of the deprecated components is <menuitem>, which supposedly was partially supported in Firefox versions 8 – 84, however I couldn’t get an example to work in any of the older variations I put in domestically (even with modifying about:config). The examples suggest that the <menu> (of kind=context) and little one <menuitem> components shouldn’t render till the ingredient whose contextmenu property is true clicked, however as you’ll be able to see beneath, the gadgets all the time render:
It’s stunning that <noembed>, basically a <noscript> type fallback, was deprecated whereas <embed> was stored within the spec. Right here’s my <embed> from above, however this time with a <noembed> little one. There may be additionally <noframes> which I included above with the <body> ingredient.
<embed> with a <noembed> tag little one.It’s unclear why <param> ever existed as a substitute of simply utilizing attributes on the <object> ingredient. After I began this weblog publish it was listed in the “Embedding Content” section, however by the point I completed it was deprecated. Right here is one beneath:
<object> with a <param> tag little one.<plaintext> is one other bizarre one, and notable among the many deprecated components in that it really works. It’s one other one I’m going to must wrap in an <iframe> as a result of in any other case the remainder of the web page can be rendered because the supply code:
<plaintext> ingredient.Nonetheless, <xmp> and <tt>, utilized in an analogous manner, have closing tags
as it will be proven on a teletype
with out an
<iframe>.
Just a few of the deprecated components have simply been changed by newer additions to the spec. <rb> and <rtc> had been used for displaying pronunciation of East Asian characters, but it surely looks like the spec was simplified. Right here is the instance from MDN:
Different Parts
I consulted a couple of different lists of HTML tags after realizing that the <!-- remark --> tag wasn’t in my listing from MDN (there’s one beneath this paragraph)
An older list from MDN in 2013 has components like <blink>, and for accessibility causes, virtually all browsers at present ignore this ingredient.
I’ll add one hidden beneath if you will discover a really outdated browser that helps it:
Additionally on the listing is <spacer>, which doesn’t work in fashionable browsers and,
would now be carried out
with CSS.
Then there’s others like <bgsound> (2013 docs) that appears to have by no means been applied (besides perhaps in Netscape?), however alludes to a imaginative and prescient for a way more multimedia enabled internet paperwork, and <isindex> (2013 docs) which looks like it’s from a world the place JavaScript doesn’t exist.
One other try at <xmp>, <tt>, <code> was
I’m shocked it appears to nonetheless work!
And naturally <applet>, however I’m not even going to attempt with that one.