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 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.
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 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.
02:34 - What is semantic HTML?
04:04 - Why semantic HTML?
20:04 - Structural / Layout tags
26:18 - Some fun ones you might not know
/
and strike?
/
/
and
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).
32:12 - Visual vs Semantic tags
vs
and
vs
and
are NOT deprecated like many have said
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:
37:51 - Some elements have special functionality or styling
and
tag
+
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
Links
××× SIIIIICK ××× PIIIICKS ×××
- Scott: Hat Washer
- Wes: Netflix's This is a Robbery
Shameless Plugs
- Scott: 1: Become a Level Up Tutorials Author 2: Github Actions with Brian Douglas - Sign up for the year and save 25%!
- Wes: All Courses - Use the coupon code 'Syntax' for $10 off!
Tweet us your tasty treats!
- Scott's Instagram
- LevelUpTutorials Instagram
- Wes' Instagram
- Wes' Twitter
- Wes' Facebook
- Scott's Twitter
- Make sure to include @SyntaxFM in your tweets
📆 2021-05-17 15:00 / ⌛ 00:21:31
📆 2021-05-10 15:00 / ⌛ 00:28:21
📆 2021-05-03 15:00 / ⌛ 00:28:20