354

May 19th, 2021 × #html#webdev#accessibility

The Surprisingly Exciting World of HTML Elements

Scott and Wes have a fun discussion about HTML tags including semantic HTML, accessibility, SEO, default styling, and lesser known tags. They also talk about what tags they wish existed natively like textarea autosize and animated accordions.

Wes Bos

Wes Bos Host

Scott Tolinski

Scott Tolinski Host

or
Show Notes Transcript

In this episode of Syntax, Scott and Wes talk about HTML — interesting HTML elements, things you might not know, wish lists for the future, and more!

Prismic - Sponsor

Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Cloudinary - Sponsor

Cloudinary is the best way to manage images and videos in the cloud. Edit and transform for any use case, from performance to personalization, using Cloudinary’s APIs, SDKs, widgets, and integrations.

Show Notes

02:34 - What is semantic HTML?

  • What is the content? HTML should describe the content first and foremost.

04:04 - Why semantic HTML?

  • Accessibility
  • SEO
  • Styling is easier
  • HTML tags that have meaning:
    • Almost all of them
    • Common ones:
      • <p>
      • <ul>/<ol> and <li>
      • <a>
      • <h1> to <h6>

20:04 - Structural / Layout tags

  • <nav>
  • <header>
    • You can have more than one header
    • Header cannot be in a footer / address / header
  • <section>
  • <footer>
  • <aside>
  • <main>
  • <article>

26:18 - Some fun ones you might not know

  • <address>
  • <kbd>
  • <sup> /
  • <datalist>
  • <time> and strike?
  • <track>
  • <wbr>
  • <cite>
  • <dfn>
  • <mark>
  • <ruby> / <rt> / <rb>
    • A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters.
  • <meter> and <progress>
    • While <progress> is used to convey how much work in a task has been completed, the element is used to display a measurement on a known scale. This could be something like the current disk usage on your computer, or a temperature measurement (within a defined range).
  • <marquee>

32:12 - Visual vs Semantic tags

  • Almost all tags in HTML are semantic
  • <i> vs <em> and <bold> vs <strong>
    • <i> and <bold> are NOT deprecated like many have said
    • The <strong> element is for content that is of greater importance, while the element is used to draw attention to text without indicating that it's more important.

35:40 - HTML tags with no meaning:

  • <div>
  • <span>

37:51 - Some elements have special functionality or styling

  • <details> and <summary> tag
  • <fieldset> + <legend>

40:59 - What elements would we like to see?

  • Modal element
  • Textarea that grows with content
  • Animated accordion
  • A better table
    • One that works with grid/flex/modern CSS, auto-sizing, max/min widths
  • From Twitter:
    • VirtualList
    • Carousel - HOT DRAMA
    • Date range
    • Hero
    • tag that figured its level out by itself. Useful for components that can go anywhere
    • Icon tag
    • Cookie banner
    •  tag that shows HTML elements without encoding
* You can kinda do this with display block on script and style tags

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!

Share