zoom on some HTML tags
August 6, 2023 - Reading time: 11 minutes

I'm taking w3schools HTML course as a refresher and I learned a few things along the way.

quotations

I knew about blockquote but not sure about the other two.

Quote from another source:

  • use blockquote tag with cite attribute containing URL to the source
  • browser behaviour: usually indent

Short inline quote:

  • use q tag
  • browser behaviour: usually add quotation mark

Indicate the title of a work:

  • use cite tag
  • browser behaviour: usually render in italic

td

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

image size

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.

picture

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>

lists

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:

  • type="1" for number marker (default)
  • type="A" for uppercase letter marker
  • type="a" for lowercase letter marker
  • type="I" for uppercase roman number marker
  • type="i" for lowercase roman number marker

As well as a start attribute to chose from which number to start.

iframe

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>

noscript

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>

list of semantic elements and definition

From W3Schools.

  • article -> defines an independent, self-contained content
  • details -> defines additional details that the user can open and close on demand
  • summary -> defines a heading for the details element
  • figcaption -> defines a caption for a <figure> element. The <figcaption> element can be placed as the first or as the last child of a <figure> element.
  • figure -> defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
  • img -> defines the actual image/illustration
  • mark -> defines marked/highlighted text
  • time -> defines a date/time

Landmarks

Landmarks define some parts of the page to jump to with the help of a screen reader #accessibility

  • header -> defines a header for a document or a section
  • nav -> defines a set of navigation links
  • main -> defines the main content of a document. Should be unique.
  • aside -> defines content aside from the content (like a sidebar)
  • section -> defines a section in a document
  • footer -> defines a footer for a document or a section

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

kbd stands for keyboard inuput. Default browser's display is monospace font.

Use lowercase for file names

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".

time

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>.

Search

Categories