Author Topic: 10 obscure HTML tags  (Read 3027 times)

rcjordan

  • I'm consulting the authorities on the subject
  • Global Moderator
  • Hero Member
  • *****
  • Posts: 16401
  • Debbie says...
    • View Profile
10 obscure HTML tags
« on: February 26, 2022, 12:12:32 AM »

buckworks

  • Inner Core
  • Hero Member
  • *
  • Posts: 1636
    • View Profile
Re: 10 obscure HTML tags
« Reply #1 on: February 26, 2022, 01:01:10 AM »
Ooooh, great food for thought! A couple of those are new to me and it's good to be reminded of those I did know.

I use <dl> definition lists quite a bit.

ergophobe

  • Inner Core
  • Hero Member
  • *
  • Posts: 9315
    • View Profile
Re: 10 obscure HTML tags
« Reply #2 on: February 26, 2022, 01:43:35 AM »
meter, progress and datalist are all new to me.

I think there's a lot more HTML5 tags that I don't know

buckworks

  • Inner Core
  • Hero Member
  • *
  • Posts: 1636
    • View Profile
Re: 10 obscure HTML tags
« Reply #3 on: February 26, 2022, 02:47:22 AM »
I just discovered <picture> which is going to solve a problem for me.

https://www.w3schools.com/TAGS/tag_picture.asp




ergophobe

  • Inner Core
  • Hero Member
  • *
  • Posts: 9315
    • View Profile
Re: 10 obscure HTML tags
« Reply #4 on: February 27, 2022, 07:49:55 PM »
<picture> is a pretty old one. You can build a responsive site without it, but it's challenging if you want important images to show well on all sizes.

You can still use <image> with the srcset attribute, but that only works if all layouts need very similar aspect ratios.

Unfortunately, even a decade into the responsive design shift, it can take some gymnastics with popular CMS to effectively use the <picture> element.

buckworks

  • Inner Core
  • Hero Member
  • *
  • Posts: 1636
    • View Profile
Re: 10 obscure HTML tags
« Reply #5 on: February 27, 2022, 08:32:03 PM »
>> pretty old one

It was new to me. If I came across it before I certainly didn't understand what it could do.

But after wrestling with some images in a responsive context, I had an AHA! moment about how <picture> could be useful.

It's like a variation on "When the student is ready, the teacher will appear!"

If I'm understanding things correctly, <picture> will play well with my current quest for speed, as well as improving how some things look.

I found this article to be valuable:

https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015

ergophobe

  • Inner Core
  • Hero Member
  • *
  • Posts: 9315
    • View Profile
Re: 10 obscure HTML tags
« Reply #6 on: February 27, 2022, 09:10:38 PM »
>>new to me

The wrangling over it took forever. For multiple years, there were competing proposals on how it would work. Because of that, and the relative complexity of implementation, both from a browser and developer standpoint, adoption has been fairly slow. The biggest obstacle at this point, though, is mostly the complexity of implementation from the maintainer/content creator/editor point of view.

Initial discussions date to 2007, took a hiatus, came back in 2011 after Ethan Marcotte coined the term "responsive design" in 2010. There was a W3C draft spec released in 2013 at the latest. If you were subscribed to A List Apart back in those days, there was a lot of discussion. There was a long, sordid history of whether we would get <picture> or just the srcset attribute. At a certain point, a lot of people started tuning things out as W3C and WHATWG and RICG were arguing over not just details, but fundamentals.

If you're curious about the nasty stuff that goes into web standards sausage making...

https://thehistoryoftheweb.com/responsive-design-picture-element/
http://alistapart.com/article/responsive-images-how-they-almost-worked-and-what-we-need/

On a more practical level...

Two sites I maintained, built around 2013 and 2016 if I recall, required uploading three custom sized images for every image used in certain contexts. In one case, every page had a header/hero image and the widescreen version had a super wide aspect ratio (over 3:1 if I recall - 1920 x 580 I think). The tablet version was roughly normal landscape aspect ratio. Small (phone) resolutions were square. That meant not just custom crops, but often completely different images since what crops well at 3:1 usually looks awful when square.

It can turn basic site maintenance and updates into a nightmare task if you let designers get carried away. They come up with a client-wowing design that looks amazing in the two mockups they do. But then the reality set in of having to find 2-3 completely different images every time you want to build a page, then crop them all separately, then upload them. I find that if you're looking for images with zing, it is a huge huge part of the work on a page and when you double or triple that work, it can bring the process to a crawl. If you are using stock images, it makes finding them super hard. If you are doing photoshoots, you need to explain your needs to the photographer and find a photographer who can think not must about the compositions in the photo as taken, but the potential to work at different crops and aspect rations.

So be careful about having obligatory <picture> elements as part of your overall site design. You can live to deeply regret it.
« Last Edit: February 27, 2022, 09:23:10 PM by ergophobe »

buckworks

  • Inner Core
  • Hero Member
  • *
  • Posts: 1636
    • View Profile
Re: 10 obscure HTML tags
« Reply #7 on: February 27, 2022, 11:12:04 PM »
Noted.

Alas, there's usually a tradeoff between power and simplicity!

I'm still testing / playing with it, might install it on a "real" page by the end of the day.

ergophobe

  • Inner Core
  • Hero Member
  • *
  • Posts: 9315
    • View Profile
Re: 10 obscure HTML tags
« Reply #8 on: February 27, 2022, 11:18:04 PM »
Used carefully and judiciously, it opens up many possibilities.

Used carelessly, it opens up many headaches.

buckworks

  • Inner Core
  • Hero Member
  • *
  • Posts: 1636
    • View Profile
Re: 10 obscure HTML tags
« Reply #9 on: February 28, 2022, 05:03:52 AM »
I foresee loving <picture> for affiliate banners. Putting <picture> inside a link is a less cumbersome way to serve smaller banners to smaller screens etc. than the display:none I had been using to manage which banners showed or didn't.

<a href="https://example.com/">
<div style="text-align:center;">
<picture>
  <source media="(min-width:728px)" srcset="banner_728x90.jpg">
  <source media="(min-width:468px)" srcset="banner_468x60.jpg">
  <img src="banner_300x100_00.jpg" alt="Widgets etc." style="width:auto;">
</picture>
</div>
</a>