FreeCodeCamp changed their courses again. Now they have a Certified Full Stack Developer Curriculum which I started taking and... surprise! I discovered several things. Let's have a look at them.
This is an information present in the meta tag inside the head section to inform social media platforms (Facebook, X, LinkedIn...) how your website's content should appear. It is used via the property attribute which value starts with og: to call for Open graph protocol. The information you want to provide should go as the value of the content attribute. Here's some examples:
og:title for the title that displays for social media posts<meta property="og:title" content="My amazing blog">og:type to indicate the type content that is shared (article, website, video, music...) <meta property="og:type" content="website">og:image to set the image that is shared on social media post<meta property="og:image" content="https://my-image.png">og:url to set the the URL that is shared on social media post<meta property="og:url" content="https://my-website.com">Replaced elements call for a resource, for istance an image or a video. For this reason, it's content cannot be modified by CSS. It's not a discovery in itself but it's an easy way to conceptualize it.
Oh, did you know about the poster attribute for the video tag? You can link to an image that will display while the video is not playing. Interesting!
And for accessibility purposes, take a look at the track element. It would be nested within video or audio element to provide subtitles and / or captions, with the help of several attributes. Some more info are available on MDN!
Description list can be used for a glossary of course but other use cases would include:
Basically, when you have key-value pairs you would be right to use description lists!
<h2>Ingredients</h2>
<dl>
<dt>Flour</dt>
<dd>250g</dd>
<dt>Milk</dt>
<dd>0,5L</dd>
<dt>Oil</dt>
<dd>2 spoons</dd>
</dl>The i element is mostly use to host font-awesome character but it has a meaning: idiomatic text does not indicate if the text is important or not, it only shows that it's somehow different from the surrounding text. It can be used to highlight alternative voice or mood, idiomatic terms from another language, technical terms, and thoughts.
The i element does not
I learned that sub element can be used for footnotes, in addition to the common use case of chemical formulas.
menuI saw this curiosity on the Fediverse. This menu element can be used for hosting an unordered list of items, juste like ul. The difference is that menu represents a toolbar containing commands that the user can perform or activate:
<menu>
<li><button onclick="copy()">Copy</button></li>
<li><button onclick="cut()">Cut</button></li>
<li><button onclick="paste()">Paste</button></li>
</menu>As always, this is a high quality vision of semantics. We can have some pedagogy with users but most would simply like to select text and click on a button to shape it as they want. How do you implement time, description lists and so on on a easy way? This is an open question!