A Tasty Treats Podcast for Web Developers.

Ask a Potluck Question →
Wes Bos

Wes Bos

Full Stack JavaScript Developer. Creator of really good web development courses. BBQ enthusiast.

Scott Tolinski

Scott Tolinski

Web Developer, Creator of Level Up Tuts, Bboy, Robotops Crew and Youtuber

Playing: 354: The Surprisingly Exciting World of HTML Elements

0:00

LOUDNESS

May 19th, 2021

The Surprisingly Exciting World of HTML Elements

👇 Download Show✏️ Edit Show Notes

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!