EPISODE · May 19, 2021 · 1H 2M
The Surprisingly Exciting World of HTML Elements
from Syntax - Tasty Web Development Treats · host Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers
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: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While 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 Almost all tags in HTML are semantic vs and vs and are NOT deprecated like many have said The 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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 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 Sara Soueidan ××× 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
What this episode covers
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: / and to 20:04 - Structural / Layout tags You can have more than one header Header cannot be in a footer / address / header 26:18 - Some fun ones you might not know / and strike? / / A ruby annotation is a small extra text, attached to the main text to indicate the pronunciation or meaning of the corresponding characters. and While 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 Almost all tags in HTML are semantic vs and vs and are NOT deprecated like many have said The 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 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog 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 Sara Soueidan ××× 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
NOW PLAYING
The Surprisingly Exciting World of HTML Elements
No transcript for this episode yet
Similar Episodes
No similar episodes found.