I'm taking w3schools HTML course as a refresher and I learned a few things along the way.
I knew about blockquote but not sure about the other two.
Quote from another source:
Short inline quote:
Indicate the title of a work:
td stands for table data! th (table header) and tr (table row) were clear to me but I always wondered why a table cell was written "td". Now I can properly read the code in my head haha
In the img tag, prefer using style attribute with width and height properties inside rather than width and height attributes. style attribute takes precedence over the style defined in the linked CSS file (for instance max-width: 100%;) or at the HTML page level, but width and height attributes come second.
W3Schools recommends to always specify the width and height of an image. If not, the web page might flicker while the image loads.
This element is new to me. Inside you can define a list of images to display acording to the screen size, so to save bandwith and cover different format supporting from the browsers. It should always ends with an img tag. For instance (from W3Schools):
<picture>
<source media="(min-width: 650px)" srcset="img_food.jpg">
<source media="(min-width: 465px)" srcset="img_car.jpg">
<img src="img_girl.jpg" style="width:auto;">
</picture>
Can't always remember of dl (description list) with dt (term) and a dd (description), so now it's somewhere on this blog.
Also, it's good to now that there's a type attribute for ordered list (ol) to specify the type of the list item marker:
As well as a start attribute to chose from which number to start.
iframe stand for inline frame. It is used to embed another document in current document (just like a Youtube video for instance). Don't forget title attribute for screen readers. Default display will add borders so make sure you remove them with CSS or style attribute.
An iframe can be the target of a link, just refer to it with it's name: (example from W3Schools):
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Don't forget to let the user know JavaScript is needed for this or this functionnality with noscript tag:
<noscript>Sorry but the game relies on JavaScript. Have a look at your browser's settings if you wish to play it.</noscript>
From W3Schools.
Landmarks define some parts of the page to jump to with the help of a screen reader #accessibility
A section can include article and an article section, depends of the content.
A header can be found in several zones in an HTML document except in a footer, address or header element.
A footer is also repeatable in the HTML document.
Note that a button element should be used for any interaction that performs an action on the current page. The a element should be used for any interaction that navigates to another view.
kbd stands for keyboard inuput. Default browser's display is monospace font.
Some web servers (Apache, Unix) are case sensitive about file names: "london.jpg" cannot be accessed as "London.jpg".
Other web servers (Microsoft, IIS) are not case sensitive: "london.jpg" can be accessed as "London.jpg".
Nesting time or duration information into a time element is useful for any automatic reading of a page, from a search engine for instance.
I'll be celebrating my birthday on <time datetime="2024-09-21T20:00">September 21<sup>st</sup></time> for <time datetime="PT2H30M">2h30m</time>.